Jag fick en beställning av Paolo, han ville ha en webbsida där kunskaper och tekniker visas så att han kan få kunder.
Paolo ville inte ha några röda färger alls och fonten i headern ska vara Permanent Marker. Webbplatsen skulle ha totalt fyra olika sidor, en startsida, en för hans tekniker där han visar upp sina kunskaper, en sida med hans projekt han har jobbat på, och slutligen en om sida där hans kontakt information finns.
Jag la även till klassen “active” på navbaren och la till detta i CSS
nav ul li a.active {
background-color: gray;
}
Detta gjorde så att den aktiva sidan på navbaren fick en grå bakgrund istället för en blå, så att det visas vilken sida man är på. Jag fixade även en hover när man hade muspekaren öven en av sidorna på navbaren så att texten blev ljusare.
Vad har jag lärt mig?
Jag har lärt mig att bygga en webbsida som består av flera olika sidor. Jag fick även utveckla min HTML och CSS ytterligare och det var bra träning upplever jag. Jag blev även motiverad att fixa en navbar som visade vilken sida som var aktiv, samt ändrade färg när muspekaren var över en av sidorna på navbaren, detta pågrund av BurgerBase uppgiften som såg riktig bra ut.
En svårighet var att få till placeringen av bilden, detta tog lite tid men blev trots allt bra i slutändan. Sedan så fixade jag även en tabell för kontakt uppgifterna, det gick bra men det tog lite tid att få till rätt storlekar och marginaler.
Jag fick också lära mig att man behöver en header för section element om det ska valideras rätt. Jag fick då byta ut mitt section element mot en div för att det ska bli rätt då jag inte skulle göra en header på den delen av sidan.
Validering av sidan
Jag har även validerat HTML och CSS. Jag fick byta ut section element mot div för att det skulle valideras rätt för det fanns ingen header till section. Jag hade även av misstag satt <html lang=”en”> när det igentligen ska vara <html lang=”sv”>, så där fick jag även en varning men det är fixat nu.
Bild på HTML validering (det är 4 html filer som är validerade men jag visar bara en av dom)
Här är CSS validering för sidan
Här finns en ytterligare länk för Paolos webbtjänst
Leave a Reply