Responsive Code-Along

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

Index

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

---

Learning Objectives

• 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

---

Instructions

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

---

Mock-Ups

TOP

---

Study Links

Branching & Incremental Development

• Demo project to study

Semantic Layout

• 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

Responsive Web Design

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

CSS & Styling

• cascade & inheritance
• CSS Specificity
• CSS Positioning

Inspecting the DOM

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

---

---