WEBBSIDA
Mallar vid behov. Utifall det visar sig behövas yttligare material så kommer det att tillkomma i mappen nedan för respektive uppdrag.
VAD
På fem dagar skapar ni och publicerar en webbsida som innehåller artiklar med media (bild, illustration, video, ljud eller datavisualisering). Allt ska gå att visa för en utomstående bedömare som inte känner er.
SYFTE
Träna samarbete i blandade grupper (estet + teknik, åk 1–3).
Öva kommunikation: planera, skriva, redigera och paketera innehåll.
Bygga en fungerande webbsida med bra design, tillgänglighet och enkel teknik.
Publicera något som ni kan länka till i portfolio/CV.
MÅL
En webbsida med:
Minst 2 artiklar (gärna 3+) skrivna av er.
Minst 2 olika medietyper totalt (t.ex. foto + illustration, eller video + datavis, eller ljud + foto).
Grundläggande tillgänglighet (alt-texter, bra kontrast, rubriker i ordning) och responsivitet (mobil → desktop).
En “Om projektet”-sida för utomstående bedömare där ni beskriver syfte, målgrupp, process och resultat (se mall nedan).
Publik länk (GitHub Pages, Netlify eller Vercel).
HUR
Lägg in en tydlig meny‑länk: “Om projektet / For Review”. Där ska följande finnas:
Pitch (3–5 meningar): Vad är sidan och för vem?
Huvudresultat: Länklista till era artiklar + 1 skärmdump per artikel.
Mediaöversikt: Vilka medietyper använde ni och varför? (max 5 rader)
Kvalitetsbevis: Lighthouse‑poäng (skärmdump), kontrastcheck, en kort UX‑insikt (1 förbättring ni gjorde).
Team & roller: Vem gjorde vad (1–2 rader per person).
Versionsinfo: Datum för publicering, versions‑tagg (t.ex. v1.0.0).
ROLLER
Projektledare: håller tider, leder standup.
Tech: sätter upp repo, struktur, review.
Design/UI: färg/typo, layout, komponenter.
Innehåll/Copy: texter, rubriker, bildtexter, alt‑texter.
Media: foto/illustration/video/ljud/datavis (och optimering).
QA/Tillgänglighet: checklistor, test, små buggar.
Tips: jobba i par (erfaren + ny), rotera roll dagligen om ni vill.
VERKTYG
Kanban (To do / Doing / Review / Done).
Figma eller papper för skisser. VS-code, HTML/CSS + lite JS. alt. ramverk (django, react) Lighthouse/axe för snabbkoll. (Martin hjälper till med publicering)
TIPS från COACHEN:
- Börja synligt (nav, hero) – ge alla en snabb vinst.
- Skriv artikel #1 tidigt (tisdag) så ni hinner förbättra den.
- Jobba i par och rotera uppgifter. Ställ frågor tidigt.
- Om ni kör fast: skala ner antalet sidor men gör en sak riktigt bra.
- Lycka till – bygg något ni är stolta över!
MÅNDAG
Idé & kärna
Dagliga rutiner: 10:00 standup (15 min) · 14:00 checkpoint (10 min) · 15:30 kort logg.
Målet idag: Bestäm vad ni bygger, för vem, och sätt grunden. Klart idag (ladda upp i repo):
✅ Syfte & målgrupp (1 persona + 2–3 användarresor)
✅ Sitemap (3–5 sidor) och wireframes för startsida + 1 artikelsida (mobil först)
✅ Stilstart: färger, typsnitt, knappstil (style tile)
✅ Teknikstart: repo, README, mappstruktur, index.html, styles/, assets/
TISDAG
Dagliga rutiner: 09:00 standup (15 min) · 14:00 checkpoint (10 min) · 15:30 kort logg.
Målet idag: En körbar MVP + minst 1 färdig artikel med media. Klart idag:
✅ MVP‑sidor (start + artikelsida, nav, footer, responsiv grund)
✅ Artikel #1 publicerad (med minst 1 medietyp + alt‑text/källor)
✅ Tillgänglighet basics: rubriker i ordning, kontrast AA, lang=”sv”
✅ SEO basics: <title>, meta description, favicon, social preview
✅ Prestanda basics: optimerade bilder, första Lighthouse (spara skärmdump)
ONSDAG
Fördjupning 1
(välj 1 spår)
Dagliga rutiner: 09:00 standup (15 min) · 14:00 checkpoint (10 min) · 15:30 kort logg.
Välj ett spår som lyfter helheten och gör klart det idag:
🧩 Interaktivitet (JS): mobilmeny, accordions/tabs, formulärvalidering.
👀 UX‑test: 3–5 snabba tester på klasskompisar → gör 3 förbättringar.
🎭 Varumärke & mikrocopy: enkel logo/ordmärke, tonalitet, mikrotexter.
♿ Tillgänglighet+: fokus‑stilar, skip‑link, test med skärmläsare.
🚀 Prestanda+: WebP/AVIF, kritisk CSS, mät före/efter. Klart idag:
✅ Artikel #2 publicerad (ny medietyp om möjligt)
✅ Dokumentera ert valda spår på “Om projektet” (före/efter-kort + 1 insikt)
TORSDAG
Fördjupning 2
(välj 1 spår)
Kommer…
Dagliga rutiner: 09:00 standup (15 min) · 14:00 checkpoint (10 min) · 15:30 kort logg.
Välj ett nytt spår eller fördjupa samma:
🧱 Designsystem light: knapp/kort/formfält som återanvändbara komponenter.
🌗 Dark mode / hög kontrast med prefers-color-scheme.
🌍 Flerspråk: sv/eng, minst 2 sidor översatta.
📈 Datavis eller mini‑PWA: enkel graf/karta eller offline‑stöd för startsidan.
🧪 Deploy & CI: publicera på GitHub Pages/Netlify/Vercel, tagga v1.0.0. Klart idag:
✅ Artikel #3 (valfritt men meriterande) – gärna av en tredje medietyp.
✅ Publik URL i README + “Om projektet” uppdaterad
FREDAG
PRESENTATION
🎤 5‑min demo: syfte, målgrupp, visa 1 artikel, visa sidan.
🧾 Bedömningssidan (“Om projektet”) färdig: pitch, länkar, skärmdumpar, roller, poäng, datum, version. SPARA PÅ DRIVE
🪪 Individuell logg (½ sida): vad du gjort, vad du lärt dig, nästa steg.