Webbutveckling · område 3

CSS – form och layout

Här stilsätter du sajten du byggde i område 2 – enligt din egen stilguide från Gränssnittsdesign. Ingen ny sajt, inget nytt ämne. Samma innehåll, nu med form.

1 dec Inlämning: Projekt 2 – Stilsatt webbplats Kl 23:59. Sajten granskas sedan i Gränssnittsdesign.
2 dec Prov 2 – kodprov CSS Skriftligt, utan dator. Utgår från referensprojektet.

Börja här

Uppgift Projekt 2 – stilsatt webbplats
Kraven att bocka av medan du arbetar. Deadline 1 december.
Guide CSS – form och layout
Uppslagsboken. Fjorton avsnitt, felsökning och en snabbreferens med ordträning.
Felsökning När CSS:en inte gör som du tror
Sökbar tabell: symptom, trolig orsak och vad du gör åt det.
Snabbreferens Alla egenskaper i området
Trettio begrepp med ordträning. Använd den inför prov 2.
Prov Inför prov 2
Vad provet är, vad som kommer och hur du pluggar. Med plugglista att bocka av.

Vad du ska kunna när området är slut

Koppla en extern stilmall och veta varför den ska vara extern
Välja rätt selektor, och räkna ut vilken regel som vinner när två krockar
Räkna ut ett elements faktiska bredd med boxmodellen
Sätta färg och typografi som följer din stilguide
Lägga stilguidens värden som variabler så att en ändring räcker
Bygga en rad med flexbox och ett rutnät med grid – och veta vilket som passar var
Ge en komponent alla dess tillstånd, inte bara viloläget
Läsa av mått ur en mockup i stället för att gissa

Lektionerna i området

Missade du ett pass? Sista kolumnen säger var innehållet står.

Datum	Vad vi gör	Missade du passet?
20 okt	Stilmallar och selektorer	Guide, avsnitt 1–3
21 okt	Boxmodellen	Guide, avsnitt 4
3 nov	Färg och typografi i CSS	Guide, avsnitt 5–6
4 nov	CSS-variabler	Guide, avsnitt 7
10 nov	Flexbox	Guide, avsnitt 8
11 nov	Grid	Guide, avsnitt 9
17 nov	Komponenter i CSS	Guide, avsnitt 10
18 nov	Att bygga efter en mockup	Guide, avsnitt 11
24 nov	Arbetspass med handledning	Uppgift: ska-kraven
25 nov	Arbetspass med handledning	Uppgift: bör-kraven
1 dec	Sista finputs. Inlämning kl 23:59	Uppgift: innan du lämnar in
2 dec	Prov 2 – kodprov CSS	Inför prov 2

Det viktigaste

Uppgiften är inte att göra sajten snygg. Den är att göra den till det du redan bestämt i din stilguide. 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.

Din stilguide ändras – och det är meningen

Du kommer att justera guiden efter att CSS:en är skriven. Det är inte ett misslyckande, det är vad som händer när något byggs på riktigt. Det är också hela skälet till att värdena ska ligga som variabler: en ändring ska vara en rad.