Jag är äntligen färdig med Projekt 1 – Paolos webbtjänst och har nu lagt upp den på min sida. Se projekt här.
HTML-validering:
CSS-validering:
Jag har bestämt mig att hålla ett tema med mörka blå färger eftersom de passar bra ihop och skapar god kontrast till den vita texten. Sidan för tekniker visar alla fyra tekniker växelvis med bilden på tekniken på ena sidan och den korta beskrivningen på andra sidan. Jag valde att göra det växelvis eftersom det bryter upp det linjära och skapar ett nytt mönster. För projekten ville jag ha större bilder och därför lägger jag allt i mitten av skärmen(i sidled) och har för varje projekt titeln, bild och sammanfattningen. Detta håller projekten mycket enkla. För kontaktinformationssidan ville jag helst inte ha en tabell, så istället gjorde jag de fyra medierna radade upp i sidled, med en enkel ikon över och texten under.
Jag fastnade lite när jag skulle göra tekniker-sidan. Först tänkte jag använda float för att flytta bilden höger/vänster, men jag insåg att detta kom med några problem. När jag satte på float för bilden så ville den inte längre flytta ner följande elements, men det större problemet var att texten oftast inte ville lägga sig rätt. För att lösa problemet använde jag mig av flexbox. Jag skapade fyra sections med flex på, och då hade jag mer kontroll över ordningen och positioneringen. Detta gjorde så att jag enkelt kunde lägga bilden på ena sidan och headern + texten på andra sidan.
När jag skulle lägga till kontaktinformationen så tänkte jag först använda fyra inline-block divvar, men det visade sig att det inte fungerade så bra att ha elements inuti divven. Därför bytte jag till flexbox, vilket gjorde det mycket enklare att placera ut divvarna på rätt sätt, samtidigt som jag nu kunde ha text och ikonerna inuti dem.
Till sist ville jag lägga till så att bakgrunden(den vid sidan om) ska ha ett halftone-mönster som är animerat. För detta tänkte jag först använda många divvar med border-radius för att skapa cirklar, och sen använda transform för att göra de större eller mindre. Detta visade sig vara väldigt ineffektivt och ohållbart. Det var då jag fick reda på att man kunde använda canvas för att enkelt rita figurer, vilket gjorde det mycket snabbare. Nu använder jag mig av perlin-noise för att skapa mönstret, samtidigt som jag kollar avståndet från musen och ökar storleken för de närmsta prickarna. Hela denna bakgrunden är endast till för att vara en extra detalj och den ska inte ta upp större del av hemsidan.
Till sist så är jag rätt så nöjd med sidan. Om jag hade fått välja så hade jag inte valt det typsnittet för loggan och rubrikerna. Det har varit en rolig uppgift som har utmanat mina kunskaper, men jag tror att jag har lyckats bra.
Lämna ett svar