Practice building a responsive web page using semantic layout and incremental development.

• Learning Objectives
• Instructions
• Mock-Ups
• Study Links

• Develop a responsive design from a series of mock-ups
• Plan steps ahead of time (accounting for each device!)
• Start from an empty project
• Develop each step on one branch
• Use semantic HTML5 elements
• Apply media queries & CSS units for responsive design
• Write clean and readable code
• Deploy a polished repository

TOP

1. Fork this repository, turn on GitHub pages, and clone
2. Study the 3 mock-ups
3. Plan your user stories in ./development-strategy.md
4. Develop one story at a time
   1. Create a new branch before beginning each story
   2. Code the story entirely. Make sure the code is pretty and everything works
   3. Push the new branch to GitHub
   4. Merge the completed story into master
   5. Push master to GitHub
   6. Repeat!
5. have a nice day!

TOP

TOP

• Demo project to study

• Why, How and When? (css-tricks)
• What is "semantics"? (MDN)
• Using Sections and Outlines (MDN)
• Semantic Elements (FreeCodeCamp)
• Semantic Elements (w3schools)
• HTML5 Semantic Elements vs. CSS

• What is it?
• Using Media Queries
• Simulating Devices

• cascade & inheritance
• CSS Specificity
• CSS Positioning

• How to inspect an element
• Inspecting the DOM?
• Live DOM Viewer
• DOM Tutor
• Modify the DOM - does the source change?