Webbutveckling 1 · område 3 · projekt

Projekt 2 – Stilsatt webbplats

Nu formger du sajten du byggde i Projekt 1. Extern stilmall, eget designsystem i CSS-variabler, layout med Flexbox och Grid – och en sajt som håller ihop på alla fyra sidorna.

• 6 nov Inlämning kl 23:59 Samma repo som Projekt 1. Länken lämnas i itslearning-uppgiften.
• 9 nov Prov 2 – kodprov CSS Skriftligt prov utan dator.

1. Uppdraget

Du ska formge sajten du byggde i Projekt 1. Samma innehåll, samma sidor, samma repo – men nu med en extern stilmall som gör den till din.

Formen ska byggas på ett designsystem: ett fåtal färger, en typografisk skala och en uppsättning avstånd, samlade som CSS-variabler och återanvända på hela sajten. Layouten byggs med Flexbox och Grid, och den ska tåla att fönstret smalnar utan att falla isär.

Sajten ska fortfarande validera – både HTML och CSS.

2. Får jag ändra i HTML:en?

Ja. Att formge kräver nästan alltid att du lägger till class-attribut, och ibland ett element som håller ihop en grupp.

Det du inte får göra är att byta ut semantiska element mot div för att det blir enklare att styla. header, nav, main, section och footer går utmärkt att formge som de är.

3. Har du inget färdigt Projekt 1?

Två vägar, och båda är godkända.

Rätta det du har. Fungerar sajten men har valideringsfel: rätta dem först. Det ingår i den här uppgiften, och det går fort med felsökningstabellen i HTML-guiden.

Utgå från startsajten. Finns ingen sajt att stilsätta ligger det 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.

4. Kraven

Kryssa av allt eftersom. Kryssen sparas i din webbläsare.

Kryssen sparas i din webbläsare. Nollställ alla kryss

5. Tekniska krav

Så här ser repot ut när du är klar:

bilder/
  ...
index.html
sida-2.html
sida-3.html
sida-4.html
stil.css
README.md

En stilmall räcker. Delar du upp CSS:en i flera filer ska det finnas ett skäl, och de ska kopplas in i en ordning du kan förklara.

6. Bedömningsmatris

Så här bedöms sajten, kriterium för kriterium. Tisdag 3 november gör ni kamratrespons i par utifrån den här matrisen – då har du tre dagar kvar att göra något åt det ni hittar.

Ingen rad väger tyngre än någon annan. Men en sajt som inte validerar eller inte är publicerad är inte inlämnad, oavsett hur den ser ut.

7. Kom igång – de tre första sakerna

1. Öppna ditt repo från Projekt 1 och kontrollera att alla fyra sidorna validerar. Gör de inte det är det första du rättar.
2. Skapa stil.css i repots rot och koppla in den i head på alla sidor.
3. Skriv :root högst upp i stilmallen med tre variabler, och använd dem direkt.

Det tredje steget ser ut så här. Skriv av det, byt färgerna mot dina egna, och ladda om varje sida för att se att det slår igenom överallt:

:root {
  --bakgrund: #fdfdfb;
  --text: #1c1c1a;
  --accent: #2f6f5e;
}

body {
  background: var(--bakgrund);
  color: var(--text);
}

8. Så ligger tiden

9. Innan du lämnar in

Gå igenom listan på fredagen den 6 november, i den här ordningen.

1. stil.css är inkopplad i head på alla sidor.
2. Ingen style kvar i HTML-filerna – sök efter ordet.
3. box-sizing: border-box är satt.
4. Minst tre variabler på :root, använda på flera ställen.
5. Navigationen använder Flexbox, något område använder Grid.
6. Bilderna har max-width: 100%.
7. Fönstret går att smalna utan att layouten faller isär.
8. Alla sidor ger noll fel i HTML-validatorn.
9. Stilmallen ger noll fel i CSS-validatorn.
10. Provad i två webbläsare.
11. Allt committat och synkat, adressen fungerar i ett privat fönster.
12. Repo-länken är inlämnad i itslearning.

10. Felsökning