Week 4
Notes
HTML & CSS Layout
Class Exercises
- Completed Floating Layouts
- CSS Positioning Example (Steven Universe page)
- TextMate Manual with viewport set
Relevant Library Code
Reading
Read for week 5:
- Chapters 4 & 5 (pages 49–84) of Mobile First by Luke Wroblewski
- Configure the Viewport from the Google Developer Docs
- A Room With a Viewport (pages 82-84) from Responsive Web Design by Ethan Marcotte (Google Drive)
Homework
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.