HTML & CSS Course Assignment

Goal

To put into practice everything you’ve learned about HTML and CSS over this course by bringing your design alive.

Brief

• You must deliver a properly functioning, responsive website for the assignment brief you chose in Design 1.

• The site needs to have every page listed in the site architecture on your chosen brief. Certain functionality requiring JavaScript can be mimicked; for example, a login page could link across from the ‘Sign in’ button.

• You must deliver a properly functioning, responsive website for the assignment brief you chose in Design 1. The website should be able to navigate from one page to another from the navigation menu as well as from buttons and/or arrows.

• The site needs to have every page listed in the site architecture on your chosen brief. Certain functionality requiring JavaScript can be mimicked; for example, a login page could link across from the ‘Sign in’ button. This assignment should be written in purely HTML and CSS.

• Ensure that all of your images are compressed to around 200KB.

• The HTML should be semantic, neatly formatted and valid.

• The CSS should follow the DRY principle and be easy to read.

• The website should be responsive and look good at every screen size with no horizontal scrollbars. Use Flexbox and CSS Grids where appropriate. Please do not use a CSS framework like Bootstrap; we want to see that you can build responsive sites without the help of a framework.

• The site should be WCAG compliant, SEO, performance and accessibility should be taken into account.

• Each page should have a unique <meta name="description">, <title>, and <h1>.

• You should not use copied code in your submission. All code submitted must be written by yourself. You may use external sources to show you how to achieve specific effects, which should be included in your report.

Process

1. Clone the repository to your computer using GitHub Desktop.
2. Spend some time going through your design files and thinking about which tags and approaches you will need.
3. Write a basic plan for how to approach this, what will you do first? What will you do last?
4. Work through your plan to create HTML and CSS files for each page.
5. Test your website using your developer tools and also test on major browsers and various devices.
6. Validate your code using the Markup Validation Service
7. Use the WAVE Web Accessibility Evaluation Tools to test that your site matches best practices for accessibility
8. Go through the marking criteria and ensure your website meets each criteria.
9. Deploy your site on Github Pages - remember that you can still make changes after it is deployed.
10. When your site is ready, post it for Peer Review on Teams or Moodle.
11. Look at the work of your peers and write a review for them.
12. Make adjustments based on the feedback you gather.
13. Delivery in Moodle.

Submission

You need to submit the following:

1. A link to your GitHub repository. Your last commit must be before your deadline.
2. A link to your website, live on GitHub Pages.
3. A report using the this template.