Ovaj projekt sam odlučila pisati samostalno koristeći alat Visual Studio Code. Ideja mi je bila napraviti nježnu stranicu u tonu cheesecakea sa početnom stranicom te opadajućim menu-om kako bi bio jednostavan i pregledan prijelaz na željene stranice. Ovaj zadatak nije bio niti malo lagan. Zahtijevao je potpunu koncentraciju jer je puno detalja u samom HTML-u, ali i u CSS-u. Također sam dodala i mali dio JavaScript-a za lijepši i pregledniji povratak na vrh stranice.
Koraci izrade:
Korak 1:U prvom koraku ovog projekta sam izradila sve potrebne dokumente, dakle za svaku stranicu opadajućeg menu-a poseban HTML dokument, te jedan CSS dokument gdje sam pisala sve stilove i uređenja svih dokumenata. Svi dokumenti se nalaze u istoj mapi, skupa sa svim potrebnim za projekt: slika, video, logo.
Korak 2:Sada prelazim na pisanje koda na način da sam izradila prvo kostur html-a za sve dokumente (!Doctype html, html, head i body), povezivanje CSS-a pomoću (link), te menu preko navigacije (nav) kao bi sve stranice bile povezane i korisnik mogao lako prelaziti s jedne stranice na drugu.
Korak 3:U ovom dijelu projekta sam svaku HTML stranicu posebno uređivala na način da sam u GIMP dodala sliku pomoću img src te joj postavila željenu veličinu. Nakon toga prelazim u DaVinci dokument i uređujem video na sličan način kao i sliku; pomoću source src umetnem video i type-om pregledniku govorim da je to video mp4 formata. Slijedeća je stranica Inkscape gdje sam dodala logo .svg formata pomoću img src kao i kod slike. Također sam dodala i kontakt dokument koji korisniku omogućuje unos osnovnih informacija: ime, e-mail, adresa i poruka. Na kraju kontakt dokumenta se nalazi gumb za slanje poruke koji bi radio kada bismo u action stavili konkretan server.
Korak 4:Nakon postavljanja strukture stranica provjerila sam da su sve stranice povezane i vizualno usklađene pomoću CSS-a, te sam dodala "Back to Top" gumb sa JavaScriptom kako bi svaka stranica imala mogućnost jednim klikom vratiti se na vrh stranice.