Helpful Examples

Bookmark this page!

Click on the icon to view a sample page.

I suggest you upload a version of your project at each of these steps so you can view it on the class server and test it on multiple devices.

Flexible layout (midterm)  

  • Fonts converted from px to em
  • Flexible widths (%)
  • Flexible margins + padding (%)
  • Flexible images (max-width: 100%)

Responsive layout

  • Add meta tag for width=device-width
  • Add media queries to existing style.css

Add responsive navigation

Add jQuery feature

Final project

  • Add the rest of your content and style.
  • Test it on multiple devices: test, test and test.

Leave a Comment