Final project: Implementation I

Final presentation requires a functional PWA

Final presentation requires a functional PWA

Some features should be completed

Today

Implementing layouts for the app

• Complete html and css rules for a given page
• How would you make sure the layout works for different screen sizes?

From the syllabus: The app (and the browser version) should work for different devices

• Grading will use responsive design mode for:
  • Desktop
  • Tablet (e.g., 810 x 1080px)
  • Phone (e.g., 375 x 667px)

From the syllabus: The app (and the browser version) should work for different devices

• You can choose different layouts for different devices
  • e.g., selectively showing elements
• But, these layouts must be functional and usable across different devices. E.g.,:
  • Text shouldn’t cut off in smaller devices
  • Image should be responsive to device width

How would you share and merge code?

• Discuss and make a decision
  • Git, zip files, email snippets, …
• Who is doing what for code management?
  • Who will be merging?
  • Who will keep backups?

Project template

• You can start from scratch
• Or, you can use class activities with PWA as a starting point
  • E.g., Activity 17

Today

Implementing layouts for the app

• Complete html and css rules for a given page
• How would you make sure the layout works for different screen sizes?
• How would you share and merge code?