Webbutveckling 1 · område 3 · v.41–46
CSS – form, layout och designsystem
Tolv lektioner om hur en sajt ser ut. Fem genomgångar och sex arbetspass, och däremellan formger du sajten du byggde i område 2 – med ett eget designsystem, Flexbox och Grid.
- 6 nov Inlämning kl 23:59 Projekt 2 – stilsatt webbplats. Samma repo som Projekt 1.
- 9 nov Prov 2 – kodprov CSS Skriftligt prov utan dator.
Sista passet före lovet är fredag 23 oktober, och vi ses igen måndag 2 november. Tio dagar emellan.
Ha det här klart innan lovet: stilmallen inkopplad på alla sidor, variablerna på plats, färger och typografi satta, och navigationen layoutad med Flexbox. Då är det Grid och finputs som väntar efter lovet, och det hinns med på tre pass.
Material
Områdets uppslagsbok. Fjorton avsnitt från stilmallens syntax till designsystem, med felsökning, snabbreferens och ordträning.
Uppgift Projekt 2Områdets projekt. Uppdraget, kraven i tre nivåer och bedömningsmatrisen du stäms av mot. Deadline 6 november.
Repetition Inför provetVarje CSS-regel från guiden förklarad, med levande exempel med och utan regeln, och frågor att testa dig själv på. Prov 9 november.
Det ligger en färdig, ostilad fyrasidig webbplats i itslearning under område 3. Ladda ner den, lägg den i ditt repo och formge den i stället. Du hamnar inte efter – allt som bedöms i Projekt 2 är formen. Säg till mig om du tar den.
Lektionerna
Missade du ett pass? Sista kolumnen pekar på det du behöver läsa för att komma ikapp.
| Datum | Vad vi gör | Missade du passet? |
|---|---|---|
| tis 6/10 | Stilmallar och selektorer. Extern stilmall, syntax, selektortyper, kaskaden och specificitet. Uppgiften delas ut. | Guiden 1–4 |
| fre 9/10 | Boxmodell, färg och typografi. box-sizing, hex och hsl, typsnittsstackar och relativa enheter. | Guiden 5–7 |
| mån 12/10 | Flexbox. Layout i en riktning. Navigering och kortgalleri som radbryter av sig själva. | Guiden 8 |
| tis 13/10 | Grid. Rutnät som väljer antal kolumner själv, och sidlayout ritad i text. | Guiden 9 |
| fre 16/10 | CSS-variabler och designsystem. Egna egenskaper, färg- och avståndsskalor, refaktorering. | Guiden 10 |
| mån 19/10 | Arbetspass. Eget projekt med handledning. | Kraven |
| tis 20/10 | Arbetspass. Eget projekt med handledning. | Kraven |
| fre 23/10 | Arbetspass. Sista passet före höstlovet. | Felsökning |
| v.44 | Höstlov. Ingen lektion 26–30 oktober. | – |
| mån 2/11 | Arbetspass. Första passet efter lovet. | Felsökning |
| tis 3/11 | Arbetspass. Kamratrespons i par utifrån bedömningsmatrisen. | Matrisen |
| fre 6/11 | Sista finputs och deadline. Validera HTML och CSS, testa i två webbläsare. Inlämning 23:59. | Innan du lämnar in |
| mån 9/11 | Prov 2 – kodprov CSS. Skriftligt prov utan dator. | Snabbreferens |
Vad du kan efter området
- Koppla en extern stilmall till en sajt och skriva regler som gör det du tänkt.
- Välja selektor efter vad du vill träffa, och veta vilken som vinner när två krockar.
- Förklara varför ett element blir bredare än du sagt, och laga det.
- Välja färger med läsbar kontrast och sätta typografi i relativa enheter.
- Bygga en navigering med Flexbox som radbryter av sig själv.
- Bygga ett rutnät med Grid som väljer antal kolumner själv – utan media queries.
- Samla färg, typografi och avstånd i variabler, och byta hela sajtens utseende på ett ställe.
- Validera både HTML och CSS, och läsa felmeddelandena.