Webbutveckling · område 3

Projekt 2 – Stilsatt webbplats

Sajten från Projekt 1, nu med form. Extern stilmall, och den ska följa din egen stilguide från Gränssnittsdesign.

1 dec Inlämning kl 23:59 Repolänk och Pages-adress i itslearning.

Uppdraget

Du ska stilsätta sajten du byggde i Projekt 1, med en extern stilmall och enligt din egen stilguide från Gränssnittsdesign. Ingen ny sajt, inget nytt ämne – samma innehåll, nu med form.

Det är två kurser som möts i den här uppgiften. I Gränssnittsdesign bestämde du hur det ska se ut och varför. Här bygger du det.

Uppgiften är inte att göra sajten snygg

Den är att göra den till det du redan bestämt. Skillnaden märks i bedömningen: den som gissar sig fram till något fint ligger på E, den som kan peka från en rad CSS till en rad i stilguiden ligger på C.

Sajten du lämnar in går vidare till Gränssnittsdesign den 10 december och granskas heuristiskt där – av en klasskamrat, inte av dig. Det är värt att veta medan du bygger.

Vad du utgår från

Det här har du redan	Var det kommer ifrån
Sajten, minst fyra sidor med semantisk HTML	Projekt 1, inlämnad 13 oktober
Stilguiden: färger, typsnitt, avstånd, komponenter	Uppgift 3 i Gränssnittsdesign, 5 november
Mockupen av startsidan	Samma uppgift

Stilguiden är ditt eget arbete, och du har haft den sedan överlämningen den 22 oktober. Att den fortfarande ändras när du börjar skriva CSS är inte ett problem – det är själva skälet till att värdena ska ligga som variabler. Ändras en färg i guiden ska du byta den på ett ställe.

Kom igång

Koppla en tom stil.css till alla sidor först. Skriv en enda regel i den – gör bakgrunden knallrosa – och kontrollera att varje sida ändrar färg. Då vet du att sökvägarna är rätt innan du skrivit en rad riktig CSS. Ta bort rosan sedan.
Skriv in stilguidens värden som variabler i :root innan något annat. Färgerna, typsnitten, avståndsskalan. Det är tråkigt i tjugo minuter och sparar dig timmar när guiden ändras i november.
Ta typografin före layouten. En sida med rätt teckenstorlek och radavstånd ser halvfärdig ut på ett bra sätt. En sida med perfekt rutnät och förvald typografi ser trasig ut.

Kryssen nedan sparas i din webbläsare.

Bör-krav — nivå C

Du kan peka från en CSS-variabel till raden i stilguiden den kommer ifrån
Inga hårdkodade färger eller avstånd utanför :root – allt går genom var()
Avstånden följer en skala, inte lösryckta tal. 8, 16, 24, 40 – inte 7, 15, 23
Layouten tål bredder från 320 till 1600 pixlar utan horisontell rullning
Formulärfälten har font: inherit och egna tillstånd för fokus
Tabellen går att läsa på telefon utan att sidan blir bredare än skärmen
Du kan motivera var du valde flexbox och var du valde grid, och varför

Utmaningar — nivå A

En sidlayout byggd med grid-template-areas, och du kan förklara varför just där och inte överallt
Komponentklasser som återanvänds på minst tre olika ställen i sajten
Du har byggt startsidan mot mockupen och kan namnge tre saker som saknades i överlämningen och vad du gjorde åt dem
Sajten är fortfarande läsbar med stilmallen avstängd – markeringen bär innehållet, CSS ligger ovanpå
Du har kontrollerat kontrasten mellan text och bakgrund och kan säga vilka värden du fick

Tekniska krav

Krav	Vad som gäller
Filstruktur	`stil.css` i roten, bredvid `index.html`. Bilder kvar i `bilder/`
Antal stilmallar	En. Flera filer hör till senare kurser
Filnamn	Gemener, bindestreck i stället för mellanslag, inga å ä ö
Sökvägar	Relativa. `href="stil.css"`, aldrig `/stil.css`
HTML-ändringar	Tillåtna bara där markeringen behöver en klass. Lägg aldrig till element enbart för att få layout
Enheter	`rem` för text, valfritt för annat. Inte `px` på teckenstorlek
Validering	W3C för både HTML och CSS, noll fel
Webbläsartest	Två olika webbläsare, plus telefon
Var det lämnas	Repolänk och Pages-adress i itslearning

Raden om HTML-ändringar är den som brukar missförstås. Att lägga till class="kortlista" på en lista är rätt. Att lägga in tre div för att få tre spalter är fel – det är vad grid är till för, och sajten slutar fungera utan CSS.

Bedömningsmatris

Kriterium	E	C	A
Stilmall och struktur	En extern stilmall är kopplad och gäller alla sidor	CSS:en är ordnad i avsnitt och går att hitta i	En annan person kan ändra i den utan att fråga dig var något står
Stilguiden i kod	Färg och typografi följer guiden	Guidens värden ligger som variabler och används konsekvent	Ett byte i guiden slår igenom med en enda ändring, och du kan visa det
Layout	Navigering med flexbox och minst en yta med grid	Valet mellan flexbox och grid är motiverat, layouten tål olika bredder	Layouten håller i bredder du inte testat, utan lappar för specialfall
Komponenter och tillstånd	Länkar och knappar syns vid hover och fokus	Fälten och komponenterna har genomtänkta tillstånd, också för fel	Komponenterna är återanvändbara och fungerar i sammanhang de inte byggdes för
Kvalitetssäkring	HTML och CSS validerar, sajten är publicerad	Testad i två webbläsare och på telefon, skillnaderna kända	Sajten fungerar även med stilmallen avstängd, och kontrasten är kontrollerad

Innan du lämnar in

Sista passet, 1 december, är till för det här. Gå igenom i tur och ordning:

Validera HTML och CSS på varje sida. Två validatorer, validator.w3.org och jigsaw.w3.org/css-validator. Laga det översta felet först och validera om.
Öppna den publicerade adressen, inte filen i VS Code. Det är där sökvägen till stil.css visar sig om den är fel.
Dra i fönstret från smalt till brett. Någonstans mellan 320 och 1600 pixlar ska ingenting sticka ut och ingen vågrät rullningslist dyka upp.
Tabba igenom sajten utan att röra musen. Ser du hela tiden var du är? Det tar två minuter och det är det test flest hoppar över.
Ta bort link-elementet tillfälligt och ladda om. Går sidan fortfarande att läsa? Då ligger CSS:en ovanpå markeringen, som den ska. Sätt tillbaka det.
Lämna båda adresserna i itslearning: repot och den publicerade sidan.

Punkt 5 är den som skiljer. En sajt som blir obegriplig utan stilmallen har fått sin struktur från CSS i stället för från HTML, och det är samma fel som område 2 handlade om – det syns bara inte förrän någon stänger av formgivningen.

Provet dagen efter

Prov 2 är 2 december, skriftligt utan dator, och utgår från referensprojektet Fyrar längs Bohuskusten. Guidens snabbreferens är det du repeterar på.