Final project
Due Date: 10th September, 2023
Description
Your final project will be a website you design and create with a team.
You’ve learned a ton about HTML, CSS, and JavaScript in this course. The final project is your chance to build a website of your own design from scratch.
There are few requirements. You must use the knowledge you learned in the course, as outlined in the rubric below.
Rubric
| Points | Criteria | Description |
|---|---|---|
| 20 pts | Site is complete | - valid HTML, CSS, JS - no errors - nothing on the site appears incomplete |
| 10 pts | Site uses appropriate HTML elements | - Should use at least 10 different elements - Elements should be used for their intended purposes |
| 10 pts | Site is styled effectively | - Color palette creates contrast - Appropriate spacing between elements - Text is styled for readability |
| 20 pts | Site uses JavaScript for interactions | - Event listeners trigger actions on the page - Trigger at least 10 different actions. Examples: - Change the displayed text of an element - Change an element's colour - Change an element's background colour - Create a new element - Delete an existing element - Hide an element - Display an element |
| 10 pts | Code is styled well | - indented properly - organized effectively - appropriately commented |
| 20 pts | Deployment | Site is deployed on Github Pages |
| 10 pts | Video Demonstration | A video demonstration of your site in 5 - 7 minutes |
| 10 pts | (Bonus) Additional features | For example, social cards or HTML media elements; a responsive website |
| 100 | Total | 110 possible points with the bonus, scored out of 100 |
Topic and Design Guidelines
Your team gets to decide the topic for your final project. The challenge is to choose a design that is exciting to you, but is not so big that it’s overwhelming or impossible to complete.
Here’s some guidelines that can help you pick an exciting project you’ll be able to complete.
- Your final project should be more advanced than the exercises you've done. It should be a complete website that achieves a goal.
- Don’t plan to learn a whole new technology for the final project. Plan to use mostly what you’ve already learned (with a little bit more Googling for the things you run into along the way).
What features should you avoid?
- Collecting data
- Forms
- Payment
We haven’t covered how to collect and save data from users. Don’t plan to build a banking app, a social media website, or an e-commerce site.
Submission
- Submit your work on your Github Repository for the team.
- Submit your source code on Gradescope as a team.
- Submit the link to the video demo as a team on Gradescope.
- Submit your work on Woolf, individually.
Guidelines on the Video Submission
- Length of video should be between 5 to 7 minutes.
- The video should begin with a brief overview/description of your website.
- Video should show all pages of the website (running on a browser).
- Video should contain a code walkthrough, going through all your HTML, CSS and JavaScript files.
- Explain your choice of HTML elements, CSS layouts etc.
- Upload the video to Youtube using your Kibo account and submit the link.
How should you work together?
You’ll should figure out what works best for your team. The best teams communicate clearly up front, so that there isn’t confusion about what is going on. Try to agree on how you’ll communicate (Discord, Whatsapp, email, or something else), and when you’ll get together to work on the project.
It may be helpful to create a design doc. Using Google docs or a text file in Repl.it, write down your ideas. You might include links, images, drawings, and text that helps to explain what you are planning to build.
A design doc can also help you track what work you’ve done, and what work is left to do.