INF-250: Web Design and Development — Putting it All Together

Announcements

No in-person class next week (3/24 & 3/26)

Do your textbook reading, and make sure you complete the mini-assignment. There will be a link to it on the Week 10 module, and it will appear under Assignment Submission. It's due Sunday 3/29

Also, Quiz #3 is due this Sunday the 22nd!

Group Work & Presentation

Find a new partner to work with! You might need to stand up and walk around.

Scenario: You have a friend who thought they knew how to code and started to make a website for their digital cafe, but they gave up and asked you to help.

Your tasks:

  • Move the JavaScript and CSS to separate files. Reference them using script and link tags in the index.html file.
  • Check the HTML and make sure it uses correct semantic elements and a logical structure. Make adjustments as needed.
  • Add at least one image.
  • Add styles to get the page looking good. Use custom fonts, decide on a color palette, use consistent spacing/margins.
  • Get rid of any browser defaults for things like links, lists, and headings.
  • Finish the JavaScript functionality that is supposed to show the menu prices in a popup.
  • Work until 11:45 so we have time for presentations.
  • When your group presents, show both your code and your frontend and explain your decisions.
  • No need to upload to GitHub, you can work and present locally in VSCode with LiveServer.

Resources

This is a quick and simple site, but remember our design principles from the start of the semester: Balance, Contrast, Repetition, Alignment, and Proximity. Use these principles to guide your design decisions.