Sidan: TC Utökade Kurser
Syfte: Presentera information om de olika valen som erbjuds av Teknik College sammanlagda i en sida.
Målgrupp: Elever som kommer att gå eller redan går till gymnasiet.
Sidor som ingår: Allt ligger inom en HTML och en CSS-fil.
_______________________________________________________________________________________
Mål
- Sidan ska bli responsiv med hjälp av: Relativa enheter / Flexbox / Grid
- Två Media Queries för Mobiler och Surfplattor
- Bilderna ska ha rätt storlek för att spara storlek
- Se till att bilder och stycken hänger ihop i olika skärmstorlekar
- Använding av ett script
- Prestandatest
- Tillgänglighet
- Flera förbättringar ifall det behövs
_______________________________________________________________________________________
Wireframe
Skiss av sidan i datorn (Sidan ska se ut nästa samma på andra enheter):
_______________________________________________________________________________________
Tidsplanering
v21 Tisdag: P2 Godkänt & Tankar kring P3 | Fredag: Uppstart
v22 Tisdag (Måndag): Arbete | Fredag: Lov
v23 Tisdag: Arbete | Fredag: Lov
_______________________________________________________________________________________
Arbetsprocess
– Samlade info om valen som erbjuds av Teknikcollege i Alströmmergymnasiet
– Byggde sidan kring min dators skärmstorlek
– Använde färger , font (https://fonts.google.com/specimen/Inter) och tema från kommunens hemsida: https://www.alingsas.se/
– Använde bilder från https://pexels.com
– Satte in alternativa fonter och alternativ text till bilderna
– Bestämde mig för att göra en enda lång sida för att prova något nytt, eftersom jag har använt pagination innan
– Header och Navigationsfält kombinerade och använder Flexbox
– Ingen riktig information om kurserna, använde istället lorem för att visa hur det skulle se ut
– Använde relativa enheter så mycket som möjligt
– Footer med lite extra info samt mitt namn och hemsida
– Två stycken Media Queries för mobiler och surfplattor, där navigationsfältet, bilderna och footern justeras med främst Flexbox och lite Grid.
– Använde samma skript som vi använde när vi gjorde BurgerBase sidan, så att när man trycker på en av knapparna i navigationsfältet det går smidigt, men det hamnar inte precis i rätt höjd med varje del och jag vet inte varför.
– Använde Robots (Index & Follow) och satte in en tom Meta Description för möjlig framtid utveckling
– Formatterade koden med Web Formatter
– Komprimerade koden med dirtymarkup och ändrade bildstorlek med https://imageresizer.com/bulk-resize
– Validerade koden med Markup Validation Service (HTML) och CSS Validation Service (CSS)
HTML:
CSS:
– Testade sidan på Firefox
_______________________________________________________________________________________
Prestandatest
Bing: Testverktyg för mobilvänlighet
Kommentar: Det fanns inga kontrastproblem men jag hade två alerts, och det var att en del text i footern hoppade över ett headersteg, men det var lätt att fixa.
Chrome Utvecklarverktyg
Mobil
Surfplatta
_______________________________________________________________________________________
Slutsats
Jag skulle säga att jag är rätt nöjd med mitt arbete. Jag följde mitt projektplan och wireframe väldigt nära och skapade en responsiv sida som är förbered för att utvecklas vidare. Jag är dock inte 100% nöjd med prestanda testen, för att betyget jag fick av Pingdom var inte så bra och skripten fungerar inte perfekt heller. Sidan är ganska enkel men den gör det den ska och jag tycker att jag dokumenterade arbetet väl.