Objectives:

1. Mobile-first design * Focused design * Progressive enhancement
2. Responsive Web Coding * Viewport * HTML considerations * Fluid & elastic layouts * media queries * responsive images * scalable vector graphics

By the end of this lessons, students will be able to:

• Describe the benefits and challenges of responsive design
• Manage images to load appropriate images to different devices
• Use scalable vector graphic (SVG) images
• Create forms in HTML by hand

Necessary materials:

• Refer to References section

Process

1. Start-up activity
2. Open Lab time on First assignment: Introduction to javaScript and jQuery
3. Open Discussion on First assignment: Introduction to javaScript and jQuery
4. Review loops: while, for codepen: for loop debug, breakpoints in js inspect element
5. Introduce Responsive Design project Part 1: Design a layout for an app on a phone. Put things in the right order by only using html Part 2: Use css to make header and footer fixed, link nav bar with hamburger svg icon part 3: Adapt layout to a larger screen by using media queries

Homework:

1. Treehouse JavaScript Loops, Arrays and Objects
2. Treehouse jQuery Basics This week’s homework is creating a small magazine using mobile-first, responsive design. Here are the instructions.
3. Complete part 1 and part 2 of resonsive design project by the next class.
4. Finish part 3 & 4 by Thursday class time.

Assessment:

• Monitor gitHub commits from Mobile First and Responsive Design project

References

Responsive Design Presentations Duckett Chapter 6: events Duckett Chatper 7: jQuery Mobile First and Responsive Design jQuery git branching and merging Chapter 3.1-3.4 git pull requests