LV 1 zadatak - Osobna stranica

LINK: https://web-lv1-33z2.onrender.com/

---

Opis zadatka

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

Potrebno je:

• 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

Korisni linkovi prilikom rješavanja zadatka

Figma

• 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

CSS - općenito

• 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

CSS - responzivni web dizajn

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
• https://kinsta.com/blog/responsive-web-design/
• https://www.youtube.com/watch?v=p0bGHP-PXD4

CSS - Grid i Flexbox

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• Grid - https://www.youtube.com/watch?v=0-DY8J_skZ0
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://www.youtube.com/watch?v=JJSoEo8JSnc
• Kako kreirati svoj grid sistem - https://zellwk.com/blog/responsive-grid-system/