Week 3

Notes

HTML & CSS Layout

• Block and Inline Elements & the Display Property
• Understanding CSS Positioning
• box-sizing Property
• How to center a Layout

Flexbox

• Caniuse Flexbox?
• Flexbox Intro Slides
• Introduction to Flexbox Demo

Class Exercises

• Airbnb Layout Highlight Slides
• Airbnb Layout Examples - Starter files

Relevant Code Libraries

• Box Sizing Reset
• Clearfix Hack
• Fluid Images

Reading

Read for week 4:

• Read A Complete Guide to Flexbox from CSS-Tricks
• Read Chapters 2-3 (pages 18–45) of Mobile First by Luke Wroblewski [Google Drive]

Homework

Complete your Airbnb Surf page. Aim to make the page look as close to the real one as possible. Use what you learned about different layout strategies to help you out.

Make sure that the link to your class website on the Students page works. If it does not, adjust your website settings so that the link will work.

Flexbox Demo Page

Create a new html page on your website which demonstrates the "Holy Grail" layout created using flexbox. You may use dummy content for this layout. Use background colors for each section of the layout to help show them.