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

• Download the file week-08/02/news-page-lab.zip and Expand All to a new folder on your PC.
• Open the file news-page.html
• View the page display template image news-template.png
• Modify 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. Update March 9, 2020: The schedule landing page and assignment listing in Blackboard both specified Saturday, March 7, as the due date. However a student has pointed out this discrepancy, which is due to my oversight in editing fall 2019 website content for the new semester. Since I missed that update here, I'll allow an extra day.
2. Do the pre-class reading for next class