Comm 328 Responsive Web Design

Week 4


HTML & CSS Layout

Class Exercises

Relevant Library Code


Read for week 5:


Tell a story with a single page website...

Craft a story about the presidential primaries. The exact subject of the story you create is up to you. It could range from an informational overview of a candidate of your choice, a comparison of multiple candidates or an overview of the race leading into super tuesday. If you really hate politics, you may instead do an analysis of the messaging of Beyoncé's new Formation video and her Super Bowl halftime performance.

You will be working with this story for the next few weeks to create a single page website. In order to ensure that your webpage has enough content, you should make sure your story has at least four "sections" to it.

Complete for next week:

  • Write your story
  • Mark your story up with semantic HTML
  • Create a style tile for your single page story
  • Attach a CSS reset or normalize stylesheet
  • Write basic styles for the design of your web page (you don't need to finish the design by next week).

At this point, only worry about how your layout looks on a small screen (phone or mobile device). This means you will probably not need to worry about any kind of sophisticated layout. Focus on making the content clear, accessible and beautiful on the small screen.

Do not worry about creating a navigation system at this point.

Make sure to post your style tile and web page on your class website.

Single page website examples