DokuWiki

This is an old revision of the document!

---

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