├── .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 |
5 |
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 `