Udacity - Responsive Web Design Fundamentals ( notes, projects ) https://www.udacity.com/course/responsive-web-design-fundamentals--ud893
-
Lesson 1 - Why Responsive?
- What is responsive design?
- Why does responsive design work for any device?
- Remote debugging and emulation in the browser
-
Lesson 2 - Starting Small
- Why start small and build up?
- What is the viewport?
- Sizing the content to the viewport
- avoiding static sized items
- Touch targets, and why they should be large
-
Lesson 3 - Building Up
- CSS media queries
- What is a breakpoint, and how to choose one
- Using the CSS flexbox to modify layout
-
Lesson 4 - Common Responsive Patterns
- Mostly fluid pattern
- Column drop pattern
- Layout shifter pattern
- Off canvas pattern
-
Lesson 5 - Optimizations
- Minor break points
- Optimizing text layout
- font size
- optimal line length