Izradite vlastitu osobnu web stranicu prema primjeru dizajna početne stranice na desktop rezoluciji. Potrebno je izrezati navedeni dizajn u HTML-u i CSS-u. Dizajn se nalazi na sljedećoj poveznici: Link
- Kodirati HTML i CSS prema navedenom dizajnu za desktop rezoluciju
- Potrebno je dodatno nadograditi HTML i CSS kako bi stranica bila responzivnu na Tablet i Mobile rezolucijama sa svim gore navedenim elementima u dizajnu (Media Query)
- Optimizirati stranicu - optimizirati slike, ubaciti lazyload, koristiti različite slike na desktop i mobile rezolucijama (Testirat će se putem Google Speed Testa)
- Prilagoditi HTML kod da odgovara SEO značajkama
- Uključiti ARIA atribute kako bi prilagodili web stranicu čitačima zaslona
Napravljen zadatak potrebno je postaviti na internet koristeći neki poslužitelj i gore na "LINK:" dodati poveznicu na navedeni zadatak. Zadatak koji nije postavljen na servis bodovat će se s 0 bodova. Popis poslužiteljskih usluga:
https://github.com/anandrmedia/heroku-free-alternatives
ili koristiti Github: https://www.youtube.com/watch?v=OltY8JIaP-4
- https://www.smashingmagazine.com/2020/09/figma-developers-guide/
- https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/
- https://www.youtube.com/watch?v=hs_cXHkuHAM
- https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started
- https://css-tricks.com/where-do-you-learn-html-css-in-2020/
- Box model - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
- Position - https://developer.mozilla.org/en-US/docs/Web/CSS/position
- Display - https://developer.mozilla.org/en-US/docs/Web/CSS/display
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent