├── .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 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/jsLinters/eslint.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="EslintConfiguration">
4 |     <option name="fix-on-save" value="true" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/html-css-assignment.iml" filepath="$PROJECT_DIR$/.idea/html-css-assignment.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/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 `<article>` or `<section>` 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 `<iframe>` to add Google map, Lighthouse will deduct points. That will not affect evaluation. you should however consider just using an image of the map. 
35 | * Default font (Times New Roman) -2
36 | * Missing padding (text too close to edges or other elements) -2
37 | 
38 | **Note! Test your assignment on a different computer to make sure all files are loaded!** 
39 | 
40 | Screenshot page example html:
41 | ```html
42 | <!DOCTYPE html>
43 | <html lang="en">
44 | <head>
45 |     <meta charset="UTF-8">
46 |     <title>Results</title>
47 | </head>
48 | <body>
49 | <h2>Font</h2>
50 | <p>Font is from <a href="https://fonts.google.com/specimen/Whatever">Google Fonts. Name: Whatever</a></p>
51 | <pre>
52 |     @font-face {
53 |       font-family: whatEver;
54 |       src: url(sansation_light.woff) format(woff);
55 |     }
56 | 
57 |     body {
58 |        font-family: whatEver;
59 |     }
60 | </pre>
61 | <h2>Validation</h2>
62 | <p>
63 |     <img src="img/validator.png" alt="valid">
64 | </p>
65 | <h2>Lighthouse</h2>
66 | <p>
67 |     <img src="img/lighthouse.png" alt="lighthouse">
68 | </p>
69 | <h2>Contrast</h2>
70 | <p>
71 |     <img src="img/contrast.png" alt="contrast">
72 | </p>
73 | 
74 | </body>
75 | </html>
76 | ```
77 | 


--------------------------------------------------------------------------------
/assingment-layout.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ilkkamtk/html-css-assignment/62fc48eafbc3b1157df72564b774048ecd3e6c37/assingment-layout.pdf


--------------------------------------------------------------------------------
/wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ilkkamtk/html-css-assignment/62fc48eafbc3b1157df72564b774048ecd3e6c37/wave.png


--------------------------------------------------------------------------------