Syftet med uppgiften är att förbättra Paolos hemsida för att redovisa de nya tekniker som paolo lärt sig under kursens gång.

Målgruppen är mindre företag och föreningar som villa ha paolos hjälp att bygga enkla hemsidor

Här är en wireframe över hur jag tänker att sidan ska se ut:

Och här är färgerna som jag tänker använda mig utav:

Som vi ser så är sidan en onepager och kan då navigeras både med navbar och bara genom att scrolla.

Sidan kommer att innehålla:

En startdel som Paolo skrivit själv där han välkommnar sidans besökare

En del om projekt som Paolo genomfört

En del om Tekniker som Paolo använder sig av

En del med information om Paolo

I botten kommer även Paolos kontaktuppgifter finnas.

på dator ser nu sidan ut såhär:

När jag skulle bygga om sidan så att den var mobilanpassad så var det relativt enkelt eftersom jag använt mig utav relativa enheter och eftersom jag har samma layout på dator och mobil. Mitt största problem var att själva navbaren var för ihoptryckt och att texten nästan var lite för stor.

Men det gick lätt att lösa med Media queries och nu ser sidan ut såhär på mobil:

Tester:

När jag validerar min HTML-kod får jag inga problem

Samma gäller CSS

När jag testade sidan mad pagespeed insights fick jag problem med CLS och First contentful paint. båda två var ganska lätta att lösa, CLS löste jag genom att lägga till height: auto; på mina bilder och First contentful paint var mest problem med fonten jag valt. Men det gick att lösa med att lägga till font-display: swap; i ”@font-face”.

Efter detta får jag dessa resultat på desktop:

och dessa på mobil:

performance går att förbättra lite grann men jag tycker det fungerar bra nog.

När jag tar in sidan i wave (för att kolla tillgänglighet) får jag dessa resultat:

Mina 7 alerts var ingenting särskillt.

Och till sist kollade jag mobilvänlighet på bing:

Problem och lösningar

För det allra mesta gick projektet utan problem men mot slutet insåg jag att sidan var bredare än själva fönstret. detta var särskillt tydligt på mobilen då hela sidan åkte åt vänster om man inte scrollade helt rakt. Det var en ganska så enkel lösning då jag ändrade kunde ändra padding så att det inte breddade ut sidan utanför fönstret. Förutom det var det inte så mycket mer problem.

Resultat

Sidan blev som jag tänkt, den innehåller de olika styckerna paolo skrivit, är mobilanpassad och följer paolos krav. Prestandan på mobilk hade kunnat förbättras för att få sidan att ladda in snabbare men det får jag spara till framtiden.

Utvärdering

Projektet var roligt, lärde mig dock inte jättemycket nytt utav det då jag valde att göra en ganska enkel variant utav projektet, men samtidigt så fick jag använda mig utav saker som jag inte använt i fulla projekt innan så det var kul. Det var också kul att testa på att göra en onepager, som jag inte har gjort så mycket innan.