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.
- Source code: https://github.com/padams-msj/digital-cafe
- Link: https://padams-msj.github.io/digital-cafe/
Your tasks:
- Move the JavaScript and CSS to separate files. Reference them using
scriptandlinktags 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.