Lesson 8: Advanced CSS Layout


Click for closed captioning

Next Step

Step 2: Fluid Layouts


Click for closed captioning

You can do more than just set pixel values for boxes in CSS. Fluid layouts, fixed positioning and responsive design give you flexibility.

Kayla Knight's Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? is a useful article to help you sort out why you might choose one layout style over another.

The quickest fix to make a site mobile friendly is to use the viewport meta tag. You can also create media queries to make your site adaptive to mobile devices, as you can see in these examples.

You can download the fluid layout and CSS positioning example pages to follow along with the videos.

CSS Positioning


Click for closed captioning

CSS Positioning by Noah Stokes is a great resource to learn more about CSS Positioning.

Ethan Marcotte lays out the philosophy and resources for responsive web design in A List Apart. Marcotte designed the Boston Globe responsive design referenced in the lesson video.

Also mentioned in the lesson video was What the Heck is Responsive Web Design? by John Polacek. Scroll through to the end and you'll find links to professional responsive design resources if you know JavaScript.


Next Step

Log in to Moodle to complete Assignment 8.