Week 8 – Responsive Design & Boostrap

Learning Outcomes

After this week you should be able to

• Make a simple responsive layout
• Discuss benefits of PWA

08.01

Pre-Class Reading

• Viewport

Class Slides

• Week 8.1 Slides

Group Activity / Lab

• Explore the Try It Yourself media query tool at W3Schools.

Post-Class Reading

• Media Queries — practice
• Media Queries — reference

08.02

Pre-Class Reading

• What is a Progressive Web App?

Group Activity / Lab

• Open the file week-08/02/news-page.html
• View the page display template image news-template.png
• Modify the news-page.html to render as news-page-ipad.png and news-page-iphone.png on those devices
• Use developer tools (right click > inspect > device toolbar) to select iPad and iPhoneX so you can view the page as rendered by those devices.

Post-Class Reading

• PWA

Homework due this week

1. Semantic HTML for your individual project is due by midnight Sunday
2. Do the pre-class reading for next class