Webbutveckling 1 · område 2 · projekt

Projekt 1 – Flersidig ostilad webbplats

En webbplats på minst fyra sidor om ett ämne du väljer själv. Helt utan CSS, semantiskt uppbyggd och validerad utan ett enda fel. Det här projektet sätter betyg.

• 2 okt Inlämning kl 23:59 Länken till ditt nya publika repo lämnas i itslearning-uppgiften.
• 5 okt Prov 1 – kodprov HTML Skriftligt prov utan dator.

1. Uppdraget

Du ska bygga en webbplats på minst fyra sidor om ett ämne du väljer själv. Sidorna är länkade till varandra med samma navigation, och innehållet är skrivet med dina egna ord. Någonstans på sajten finns en tabell med data och ett formulär.

Sajten ska vara helt ostilad. Ingen stilmall, inga färger, inga typsnitt. Det är själva poängen med området: HTML säger vad något är, CSS säger hur det ser ut, och de två sakerna ska vara uppenbart olika innan vi slår ihop dem i område 3.

Sajten ska ge noll fel i W3C:s validator. Det blir sista steget i varje uppgift resten av kursen, och det börjar här.

2. Ämnet

Välj något du kan skriva fyra sidor om utan att slå upp varje mening. En sport, ett spel, en plats, ett hantverk, en musikgenre, en djurgrupp. Ämnet bedöms inte – det som bedöms är strukturen, koden och att texten är din.

Två saker att undvika: ämnen där du bara kan skriva av en encyklopedi, och personer i din närhet. Ingen text, bild eller uppgift om någon annan person utan att den personen vet om det.

Sajten du bygger nu följer med resten av kursen. I område 3 stilsätter du den, i område 4 gör du den mobilanpassad, och i område 6 bygger du in interaktiva moduler i den. Välj ett ämne du står ut med till mars.

3. Kraven

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

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

4. Tekniska krav

Så här ser repot ut när du är klar. Filnamnen är dina – index.html är det enda som måste heta som det heter:

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

5. Bedömningsmatris

Så här bedöms sajten, kriterium för kriterium. Matrisen är inte hemlig och den är inte till för slutet – tisdag 29 september går du igenom din egen sajt mot varje rad på lektionen, medan det fortfarande finns tre dagar kvar att göra något åt det.

Ingen rad väger tyngre än någon annan. Ett E på en rad drar inte ned de andra – men en sajt som inte validerar eller inte är publicerad är inte inlämnad, oavsett vad som står i koden.

6. Så lämnar du in

1. Din kod är sparad, committad och synkad till det nya repot.
2. Sajten är publicerad via GitHub Pages, och du har provat adressen i ett privat fönster där du inte är inloggad.
3. Länken till det publika repot är inlämnad i itslearning-uppgiften.

Det är repots adress som lämnas in, inte sajtens:

https://github.com/ANVÄNDARNAMN/REPONAMN

Rättningen tittar på koden, inte bara på hur sidorna ser ut, och sajten når man själv därifrån.

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

1. Bestäm ämnet och vilka fyra sidor sajten ska ha. Skriv rubrikerna på papper först – det tar tre minuter och sparar en timme.
2. Skapa det nya publika repot på github.com/new. Kryssa i Add a README file, så att repot inte är tomt.
3. Öppna ett Codespace på det nya repot, skapa index.html och skriv grunddokumentet: doctype, html, head med charset och title, och body.

8. Så ligger tiden

Genomgångarna är fem och arbetspassen sex. Du hinner inte bygga hela sajten på arbetspassen om du väntar med allt tills de börjar – börja skriva sidorna redan under genomgångsveckan, och använd arbetspassen till att göra dem rätt.

9. Innan du lämnar in

Gå igenom listan på fredagen den 2 oktober, i den här ordningen. Den sista punkten är den som oftast glöms.

1. Alla fyra sidorna öppnas från navigationen – provat från varje sida.
2. Varje sida har en egen title.
3. Alla bilder har alt, och sökvägarna fungerar på den publicerade adressen.
4. Tabellen har th och caption.
5. Varje formulärfält har en label med for.
6. Ingen CSS någonstans – sök efter style i koden.
7. Varje sida ger noll fel i validatorn.
8. Allt är committat och synkat, och syns i repot på github.com.
9. Adressen fungerar i ett privat fönster.
10. Repo-länken är inlämnad i itslearning.

10. Felsökning