{"id":100,"date":"2026-04-18T13:39:21","date_gmt":"2026-04-18T13:39:21","guid":{"rendered":"https:\/\/wp.als080717od.hemsida.eu\/?p=100"},"modified":"2026-04-18T13:39:21","modified_gmt":"2026-04-18T13:39:21","slug":"projekt01-paolos-webbtjanst","status":"publish","type":"post","link":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/04\/18\/projekt01-paolos-webbtjanst\/","title":{"rendered":"Projekt01 – Paolos webbtj\u00e4nst"},"content":{"rendered":"\n

Jag fick en best\u00e4llning av Paolo<\/a>, han ville ha en webbsida d\u00e4r kunskaper och tekniker visas s\u00e5 att han kan f\u00e5 kunder. <\/p>\n\n\n\n

Paolo ville inte ha n\u00e5gra r\u00f6da f\u00e4rger alls och fonten i headern ska vara Permanent Marker. Webbplatsen skulle ha totalt fyra olika sidor, en startsida, en f\u00f6r hans tekniker d\u00e4r han visar upp sina kunskaper, en sida med hans projekt han har jobbat p\u00e5, och slutligen en om sida d\u00e4r hans kontakt information finns.<\/p>\n\n\n\n

Jag la \u00e4ven till klassen “active” p\u00e5 navbaren och la till detta i CSS <\/p>\n\n\n\n

nav ul li a.active {<\/p>\n\n\n\n

    background-color: gray;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Detta gjorde s\u00e5 att den aktiva sidan p\u00e5 navbaren fick en gr\u00e5 bakgrund ist\u00e4llet f\u00f6r en bl\u00e5, s\u00e5 att det visas vilken sida man \u00e4r p\u00e5. Jag fixade \u00e4ven en hover n\u00e4r man hade muspekaren \u00f6ven en av sidorna p\u00e5 navbaren s\u00e5 att texten blev ljusare.<\/p>\n\n\n\n

Vad har jag l\u00e4rt mig?<\/h2>\n\n\n\n

Jag har l\u00e4rt mig att bygga en webbsida som best\u00e5r av flera olika sidor. Jag fick \u00e4ven utveckla min HTML och CSS ytterligare och det var bra tr\u00e4ning upplever jag. Jag blev \u00e4ven motiverad att fixa en navbar som visade vilken sida som var aktiv, samt \u00e4ndrade f\u00e4rg n\u00e4r muspekaren var \u00f6ver en av sidorna p\u00e5 navbaren, detta p\u00e5grund av BurgerBase uppgiften som s\u00e5g riktig bra ut.<\/p>\n\n\n\n

En sv\u00e5righet var att f\u00e5 till placeringen av bilden, detta tog lite tid men blev trots allt bra i slut\u00e4ndan. Sedan s\u00e5 fixade jag \u00e4ven en tabell f\u00f6r kontakt uppgifterna, det gick bra men det tog lite tid att f\u00e5 till r\u00e4tt storlekar och marginaler.<\/p>\n\n\n\n

Jag fick ocks\u00e5 l\u00e4ra mig att man beh\u00f6ver en header f\u00f6r section element om det ska valideras r\u00e4tt. Jag fick d\u00e5 byta ut mitt section element mot en div f\u00f6r att det ska bli r\u00e4tt d\u00e5 jag inte skulle g\u00f6ra en header p\u00e5 den delen av sidan.<\/p>\n\n\n\n

Validering av sidan<\/h2>\n\n\n\n

Jag har \u00e4ven validerat HTML och CSS. Jag fick byta ut section element mot div f\u00f6r att det skulle valideras r\u00e4tt f\u00f6r det fanns ingen header till section. Jag hade \u00e4ven av misstag satt <html lang=”en”> n\u00e4r det igentligen ska vara <html lang=”sv”>, s\u00e5 d\u00e4r fick jag \u00e4ven en varning men det \u00e4r fixat nu.<\/p>\n\n\n\n

Bild p\u00e5 HTML validering (det \u00e4r 4 html filer som \u00e4r validerade men jag visar bara en av dom)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

H\u00e4r \u00e4r CSS validering f\u00f6r sidan<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

H\u00e4r finns en ytterligare l\u00e4nk f\u00f6r Paolos webbtj\u00e4nst<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Jag fick en best\u00e4llning av Paolo, han ville ha en webbsida d\u00e4r kunskaper och tekniker visas s\u00e5 att han kan f\u00e5 kunder. Paolo ville inte ha n\u00e5gra r\u00f6da f\u00e4rger alls och fonten i headern ska vara Permanent Marker. Webbplatsen skulle ha totalt fyra olika sidor, en startsida, en f\u00f6r hans tekniker d\u00e4r han visar upp […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":1,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/100\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}