Course Assignment

Goal

To put into practice everything you’ve learned about HTML and CSS over this course.

Brief

You need to deliver a properly functioning, responsive website for the assignment brief that you chose in Design 1 (This wuld be your Figma design).

The site needs to have every page (Scene) listed in the site architecture on your chosen brief. Certain functionality that requires JavaScript can be mimicked for now, for example a log in page could link across from the ‘Sign in’ button.

  • The HTML should be semantic and neat.
  • The CSS should follow the DRY principle and be easy to read.
  • The website should be responsive and look good at every screen size starting from 320px 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 and accessibility taken into account.
  • Each page should have a unique meta description, title, and h1.
  • You should not use copied code in your submission. All code submitted must be written by you. You may use external sources to show you how to achieve specific effects, and these should be included in your report.
  • You are allowed to use external libraries such as animation.css or open-props, but you must include quote them in your submission.

Acceptence Criteria

  • The project has a readme with a link to the live site and a link to the figma design.
  • The project has an publically accessible git repository.
  • The project has a live site (Can be hosted on Netlify or vercel for free).
  • The project has a rationale document that explains the design decisions you made.
  • Your last commit must be before your deadline.
  • You may use a build tool such as Vite, Parcel but not a framework like Gatsby or Next.js.
  • The project has been submitted on Moodle

Level 1 Process

  1. Look at the prototype you designed and think about how the elements will move across the different devices. Which elements move where on different devices.
  2. Write your HTML and CSS ensuring your HTML is semantic and bug-free, and your CSS follows DRY principles.
  3. Use media queries to make your website responsive across screen-sizes.
  4. Test your website using your developer tools as well as testing on major browsers and on various devices.
  5. Validate your code using the Markup Validation Service
  6. Go through the marking criteria and ensure your website meets each criteria.
  7. When your site is ready, post it on the Moodle forum for peer review.
  8. Look at the work of your peers and write a review for them. If you post your website for peer review more than 5 days before the CA deadline, a teacher will write a review of your website for extra feedback.
  9. Make adjustments based on their feedback.
  10. Submit on Moodle.