├── .idea ├── .gitignore ├── html-css-assignment.iml ├── jsLinters │ └── eslint.xml ├── modules.xml └── vcs.xml ├── README.md ├── assingment-layout.pdf └── wave.png /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/html-css-assignment.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/jsLinters/eslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML + CSS Assignment 2 | ### Make your version of [the provided layout](assingment-layout.pdf). 3 | * In the provided layout you'll find the plans for three pages: Home, Products and Contact. 4 | * Your task is to make a simple website using the provided layout. 5 | * The result does not have to be pixel-perfect. It's enough that the visual structure is close to the provided layout. 6 | * You can have the three pages in one document, or you can put each page into its own document. 7 | * You should make up your own color palette and choose a font (or fonts) for your version. 8 | * Also add your own images to the page(s). 9 | * You can use lorem ipsum as text content. Any text will do. 10 | * You don't have to consider copyrights, since this is an educational assignment. 11 | * More detailed description in the video provided in Oma. 12 | * Web page(s) don't need to be responsive. 13 | 14 | ### How to submit: 15 | In Oma, provide a `clickable` link to the folder where your assignment is. Also provide a `clickable` link to the html document where you have the screenshots and the css example of your font. See the [video](https://www.youtube.com/watch?v=u7mjd5Vi6lk&list=PLKenVLUxjmH-y89AiiI2xcXDy5QG83D4K&index=6) for details. Example submission: 16 | 17 | [Site](https://users.metropolia.fi/~username/foldername) 18 | 19 | [Screenshots](https://users.metropolia.fi/~username/foldername/screenshots.html) 20 | 21 | ### Evaluation 22 | On submission, you will automatically receive grade 5. If some aspects of the assignment are missing or inadequate, grade will be deducted as follows: 23 | * Your version does not resemble the provided layout, or CSS is missing -1 to -3 24 | * Navigation does not work -3 25 | * Images are not found -3 26 | * Contrast check is not passed -2 27 | * _UPDATE 28.10.2024_: https://color.a11y.com/Contrast/ is no longer available. Use https://wave.webaim.org/ instead. [Example screenshot here](wave.png). 28 | * Contrast errors needs to be 0. Other items are checked with validation and Lighthouse below. 29 | * Validation is not passed -3 30 | * No errors 31 | * Warnings, like no heading in `
` or `
` etc. are allowed 32 | * Lighthouse check score is less than 90 -1, less than 70 -2 33 | * some versions of Chrome show the score with 5/5 or 4/4 in that case -1 from each missing point. E.g. 3/4 = -1. However, max deduction is -2 34 | * Update 25.3.2024: If you use `