DokuWiki

This is an old revision of the document!

---

- why responsive

1. Sites on Mobile
2. Quiz - Share Your Great & Awful Sites
3. Intro to Project
4. Pan, Zoom, Touch, Ick
5. Emulators, Simulators and Real Devices
6. Setting up Chrome's Dev Tools
7. IMPORTANT! Udacity Front End Feedback Extension
8. Device Emulation
9. Remote Debugging Intro
10. Setup for mobile
11. Using dev tools on mobile
12. Mobile tools for iOS
13. Lesson 1 Summary

- starting small

1. Defining the Viewport
2. Pixels, pixels and moar pixels!
3. meta viewport
4. font boosting
5. Pixelation
6. Calculating DPR
7. What's the difference
8. Calculating CSS Pixels
9. How wide is the viewport
10. Setting the Viewport
11. Setting the Viewport
12. Large Fixed Width Elements
13. Max-width on elements
14. Relative Sizes
15. Tap Target Sizes
16. Tap Targets
17. Start Small
18. Project Part 1
19. Project Solution - Long
20. Lesson 2 Summary

- building up

1. Lesson 3 Intro
2. Basic Media Query Intro
3. Adding a Basic Media Query
4. Adding a basic media query 2
5. Next Step Media Queries
6. Which styles are applied
7. Breakpoints
8. Breakpoints Pt. II
9. Number of Breakpoints
10. Picking Breakpoints
11. Picking Breakpoints 2
12. Pick a Breakpoint
13. Complex Media Queries
14. What Styles Are Applied
15. Grids
16. Flexbox Intro
17. Flexbox Container
18. Flex Item
19. Deconstructing a Flexbox Layout
20. Deconstructing a Flexbox Layout
21. Lesson 3 Summary

- common responsive patterns

1. Intro to Patterns
2. Pattern - Column Drop
3. Pattern - Mostly Fluid
4. Mostly Fluid Part 1
5. Mostly Fluid Part 2
6. Combining Fluid Layouts
7. Pattern - Layout Shifter
8. Which is Which
9. Pattern - Off Canvas
10. Off Canvas Visualization
11. Project Update Part 2
12. Lesson 4 Summary

- optimizations

1. Lesson 5 Intro
2. Images
3. Responsive Tables Intro
4. Responsive Tables - Hidden Columns
5. Hide Some Columns
6. Responsive Tables - No More Tables
7. Responsive Tables - Contained Scrolling
8. Fonts
9. Minor Breakpoints
10. Final Project Updates
11. Wrap Up