Webbutveckling 1 · område 8 · inför pass 76 och slutprovet

Repetition: kursen på en sida

Kursen område för område: det viktigaste, frågor att pröva dig själv på, och var i guiden du läser vidare.

Åtta veckor har gått sedan pass 75, och det mesta du ska kunna lärde du dig i höstas. Sidan samlar kursen område för område: det viktigaste, frågor att pröva dig själv på, och var i guiden du läser vidare. Den ersätter inte guiderna – den visar var du behöver dem.

Så använder du sidan

Inför pass 76. Passet börjar med ett quiz i lag över hela kursen, med frågor av samma slag som under Testa dig själv. Läs Det viktigaste för varje område innan.

Inför slutprovet. Provet skrivs utan dator och täcker hela kursen. Det bygger på ett anonymiserat slutprojekt från klassen och har också frågor om juridik, etik och säkerhet från område 5. Du kommer att läsa kod på papper, hitta fel och skriva kod för hand.

Arbeta ett område i taget:

1. Läs det viktigaste. Stryk under det du inte känner igen.
2. Testa dig själv. Täck över svaret, svara på papper och jämför sedan.
3. Gå till guiden där det tar stopp. Under Läs mer står vilka avsnitt som hör till frågorna. Läs avsnittet, inte hela guiden.

Avsnitt 1–7 följer kursens områden. Avsnitt 8 visar hur de hänger ihop, och 9 är en ordlista med kursens viktigaste ord.

1. Igång med webben

Det viktigaste

• Kursen har tre verktyg: itslearning för uppgifter, guider, deadlines, återkoppling och inlämning, GitHub för koden och den publicerade sajten, Codespaces för att skriva koden. Koden till GitHub, länken till itslearning – och repot ska vara publikt, annars ger länken 404 för alla utom dig.
• En commit är en sparad punkt i historiken, med ett meddelande om vad du gjorde. En push skickar dina commits till GitHub. I VS Code är det Sync Changes som skickar – hoppar du över det är GitHub fortfarande tomt.
• Internet är näten och kablarna, vägarna. Webben är en av tjänsterna som åker på dem. E-post och spel använder samma vägar utan att vara webben.
• Klienten (webbläsaren) frågar, servern svarar, och HTTP är reglerna för hur frågan och svaret ser ut. En sida är ett dokument plus allt det i sin tur ber om – bilder, stilmallar och skript, var och en med sitt eget anrop.
• Varje svar börjar med en statuskod: 200 (här är den), 301 (sidan har flyttat), 404 (servern har ingen sådan sida) och 500 (servern kraschade).
• DNS översätter ett namn som google.com till en IP-adress. DNS hämtar ingen sida, och svaret sparas i flera lager så att uppslagningen sällan behöver göras på nytt.
• Adressens delar: protokoll, subdomän, domännamn, toppdomän, sökväg, filnamn, frågesträng och fragment. index.html är förvalet när filnamnet saknas, och fragmentet (delen efter #) skickas aldrig till servern.
• HTTPS är samma HTTP, krypterat på vägen. Hänglåset betyder att ingen kan tjuvlyssna, inte att den som äger sajten är ärlig.

Testa dig själv

1. Du har ändrat i index.html, skrivit ett meddelande och klickat på Commit. Ändringen syns ändå inte på github.com. Vad har du glömt?

2. Vad är skillnaden mellan internet och webben?

3. Titta på adressen https://www.example.se/kurser/index.html?niva=1#krav. Vilken del skickas aldrig till servern, och vad heter den?

4. Du skriver fel i adressen till en av dina egna sidor och får 404. En klasskamrat får 500 på en helt annan sajt. Vems fel är det i de två fallen?

Läs mer

• Kom igång: avsnitt 1 Tre verktyg, tre jobb, 4 Ändra något och spara det och 5 Lämna in.
• Från adress till sida: avsnitt 1–4 om internet, klient och server, DNS och adressens delar.

2. HTML: innehåll och struktur

Det viktigaste

• En tagg står mellan vinkelparenteser, ett element är starttagg, innehåll och sluttagg tillsammans, och ett attribut står i starttaggen, som href. img, meta, link, br och hr har ingen sluttagg.
• Varje sida har samma skelett: <!doctype html>, <html lang="sv">, head och body. <meta charset="utf-8"> ska stå först i head – annars blir åäö konstiga tecken. title syns i fliken, h1 syns på sidan.
• Semantik betyder att elementet säger vad innehållet är, inte hur det ser ut: header, nav, main, section, article, aside, footer. main finns exakt en gång per sida, och div är sista utvägen.
• section ska ha en rubrik. article är innehåll som går att klippa ut och fortfarande förstå. Rubrikerna bygger sidans innehållsförteckning: en h1 per sida, och inga hopp från h2 till h4.
• ul när ordningen inte spelar roll, ol när den gör det, dl med dt och dd för term och förklaring. Bara li får ligga direkt i ul och ol.
• Använd relativa sökvägar (stigar.html, bilder/karta.svg, ../index.html), aldrig ett inledande snedstreck. Gemener och bindestreck i filnamn. En ankarlänk href="#vaxter" hoppar till id="vaxter", och ett id får bara finnas en gång.
• alt beskriver vad bilden visar. Dekorativ bild får alt="", men alt får aldrig saknas. width och height anges utan enhet, och figcaption ligger inuti figure. Foto blir JPG eller WebP, ritad figur blir SVG.
• En tabell är för data i rader och kolumner, aldrig för layout. caption ligger först, och rubrikceller är th med scope="col" eller scope="row".
• Varje formulärfält har en label vars for är exakt samma sträng som fältets id. placeholder är ingen etikett. Alternativknappar i samma grupp har samma name men olika id, och fieldset med legend säger vad frågan var.
• Validera varje sida på validator.w3.org och rätta det översta felet först – ett tidigt fel skapar många följdfel. E-nivån är noll Error, C-nivån noll Error och noll Warning.

Testa dig själv

1. Vad är fel i den här koden?

<ul>
  <li>Du får plocka bär och matsvamp.</li>
  <p>Hundar ska vara kopplade.</p>
  <li>Du får inte göra upp eld.</li>
</ul>

2. Vad är skillnaden mellan title och h1?

3. En sida om fåglar har ett avsnitt "Fåglar" med en text om tranan och en om fiskgjusen. Vilket element får avsnittet, och vilket får varje art?

4. Varför ska den första cellen i varje rad vara <th scope="row"> och inte td?

Läs mer

HTML-guiden: avsnitt 1 Dokumentets grund, 3 Semantiska element, 5 Länkar och sökvägar, 6 Bilder, 8 Tabeller, 9 Formulär och 10 Validering och webbläsartest. Felsökningstabellen i avsnitt 12 är bra att läsa inför provets hitta felet-frågor.

3. CSS: form, layout och designsystem

Det viktigaste

• CSS skrivs i en extern stilmall, inkopplad med <link rel="stylesheet" href="stil.css"> i head på varje sida. style-attribut i HTML:en används inte – de går inte att återanvända och är nästan omöjliga att skriva över.
• En regel är selektor plus deklarationsblock. Varje deklaration är egenskap och värde och avslutas med semikolon. Glömmer du ett syns felet på raden efter. Kommentarer skrivs bara /* så här */.
• Använd klasser. Element-selektorn träffar allt, och id-selektorn är så specifik att den blir svår att skriva över. Mellanslag betyder någonstans inuti, > betyder direkt barn, och a[aria-current="page"] är en attributselektor.
• När två regler krockar frågar webbläsaren: gäller regeln alls, vilken är mest specifik, vilken står sist? Specificitet räknas som id-klass-element, och 0-1-0 slår 0-0-9. !important löser ett problem och skapar nästa.
• Det som handlar om text ärvs (color, font-family, line-height), det som handlar om lådan ärvs inte (margin, padding, background). Formulärfält behöver font: inherit.
• Boxmodellen är content, padding, border och margin. box-sizing: border-box gör att width: 300px betyder 300 pixlar, med padding och border inräknade. Två lodräta marginaler som möts slås ihop till den största.
• rem till typografi och avstånd, eftersom den följer besökarens inställda textstorlek. px till kanter. line-height skrivs utan enhet, och en typsnittsstack slutar med en generisk familj som sans-serif.
• Flexbox är en riktning: display: flex på behållaren, flex-wrap: wrap så att barnen radbryter, gap mellan dem. justify-content fördelar längs riktningen, align-items placerar tvärs.
• Grid är två riktningar. repeat(auto-fit, minmax(16rem, 1fr)) ger ett rutnät som väljer antal kolumner själv. fr är en andel av det som blir över, och grid-column: 1 / -1 sträcker ett barn över alla kolumner.
• Ett designsystem samlar färg, typografi och avstånd i variabler på :root, som --accent: #2f6f5e, och hämtar dem med var(--accent). Namnge efter roll, inte efter värde. Mörkt läge med prefers-color-scheme byter då bara värdena.

Testa dig själv

1. Texten i ingressen får varken rätt färg eller rätt storlek. Vad är fel?

.ingress {
  color: var(--dov)
  font-size: 1.25rem;
}

2. Stilmallen har .kortrutnat p { max-width: none; } högt upp och p { max-width: 34rem; } längre ned. Vilken gäller för ett stycke i kortrutnätet?

3. Ett element har width: 300px, padding: 20px och border: 1px solid. Hur brett blir det utan box-sizing: border-box, och hur brett med?

4. Du ska bygga en meny som radbryter och ett galleri med kort. Flexbox eller Grid, och varför?

Läs mer

CSS-guiden: avsnitt 2 Selektorer, 3 Kaskaden, specificitet och arv, 5 Boxmodellen, 7 Typografi och enheter, 8 Flexbox, 9 Grid och 10 CSS-variabler och designsystem.

4. UX, design och mobilanpassning

Det viktigaste

• <meta name="viewport" content="width=device-width, initial-scale=1"> ska finnas på varje sida. Utan den låtsas telefonen vara ungefär 980 pixlar bred, zoomar ut allt, och dina media queries löser aldrig ut.
• Mobile first: grundreglerna gäller den smala skärmen, och @media (min-width: …) lägger till för de breda. Det är lättare att lägga till än att ta bort.
• Relativa enheter (rem, %, fr, vw, ch) gör att layouten anpassar sig själv. Sätt aldrig font-size på html. vw ensam saknar gränser – clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem) ger minst, önskat och högst.
• Brytpunkter läggs där innehållet slutar fungera, inte där en telefonmodell råkar vara, och anges i rem. flex-wrap, auto-fit, clamp() och max-width: 100% klarar sig utan brytpunkt. Att byta riktning eller lägga till en sidospalt gör det inte.
• En wireframe visar var innehållet ligger och hur viktigt det är, i gråskala. Du ritar mobil (375 px) och desktop (1280 px) med samma innehåll, omflyttat. HTML:en skrivs en gång, efter mobilramen.
• Tangentbordet och skärmläsaren följer filen, inte layouten. Flyttar du ett block visuellt förbi något annat hoppar fokus när man tabbar.
• UX: det viktigaste ska ligga högst upp och se viktigast ut. Hierarki skapas med storlek, position och kontrast. Bryt inte konventioner utan skäl – logotypen leder till startsidan, menyn ligger högst upp, aktuell sida är markerad.
• Klickbara ytor är minst 44 × 44 pixlar. Sidan ska svara: :hover, :focus-visible, :active och aria-current="page" talar om vad som händer och var du är.
• Semantiken gör grovjobbet för tillgängligheten. En <button> går att nå med tangentbordet, en <div onclick> gör det inte. Hopplänken göms ovanför skärmkanten, aldrig med display: none.
• Tangentbordstestet: ser du var du är, följer ordningen läsordningen, når du allt? Kontrasten ska vara 4,5:1 för brödtext och 3:1 för stor text. WAVE behöver en publicerad adress, och varken WAVE eller Lighthouse kan avgöra om en alt-text är bra.

Testa dig själv

1. Hopplänken ska synas när den får fokus, men den går inte att nå med Tab. Vad är fel?

.hoppa {
  display: none;
}

.hoppa:focus {
  display: block;
}

2. Varför ska en brytpunkt skrivas @media (min-width: 40rem) och inte med px?

3. Vilken av de här tre behöver en media query: en meny som ska radbryta, ett kortrutnät som ska få färre kolumner, eller en sidospalt som ska komma till på bred skärm?

4. Vilka tre saker kontrollerar du när du tangentbordstestar en sida?

Läs mer

Designguiden: avsnitt 1 Viewport-taggen och mobile first, 2 Relativa enheter, 3 Media queries, 4 och 6 om wireframen och vägen till kod, 7–8 om hierarki och klickbarhet, samt 10–12 om tillgänglighet, tangentbord och WAVE.

5. Publicering, juridik och säkerhet

Område 5 hade inget prov – Google Sites-sajten var redovisningen. Nu kommer det tillbaka.

GDPR – det viktigaste

• Personuppgiftslagen upphörde 2018. I stället gäller GDPR, en EU-förordning som gäller direkt i alla EU-länder. IMY har tillsyn över GDPR i Sverige, och PTS över kakreglerna i lagen om elektronisk kommunikation.
• En personuppgift är allt som går att knyta till en levande person – även en bild, en röst, en IP-adress eller en beskrivning där ingen nämns vid namn.
• GDPR bygger på sju principer: laglighet, korrekthet och öppenhet · ändamålsbegränsning · uppgiftsminimering · riktighet · lagringsminimering · integritet och konfidentialitet · ansvarsskyldighet. Den sista betyder att du ska kunna visa att du följer reglerna.
• Varje behandling kräver en rättslig grund. Av sex är samtycke, avtal och intresseavvägning de vanligaste. Ett samtycke kan tas tillbaka när som helst.
• En publicerad sajt är inte privat. Publicerar du uppgifter om andra är du personuppgiftsansvarig, och en tjänst som tar emot ditt formulär är personuppgiftsbiträde. Inbäddade klipp och typsnitt från Google skickar besökarens IP-adress vidare.
• Kakor som inte är nödvändiga kräver samtycke först, aktivt, lika lätt att säga nej till som ja, med information, och möjligt att ångra. En statisk sajt på GitHub Pages sätter inga kakor och behöver ingen banner.
• En läcka – en personuppgiftsincident – ska anmälas till IMY inom 72 timmar.

Upphovsrätt – det viktigaste

• Upphovsrätten uppstår automatiskt när verket skapas, utan registrering och utan ©-symbol. Verket behöver verkshöjd, och tröskeln är låg. Idéer skyddas inte, bara uttrycket. Kod, foton och webbsidor är verk.
• Den ekonomiska rätten – att kopiera och göra tillgängligt – går att sälja och licensiera. Den ideella rätten – namnangivelse och respekt för verket – går inte att sälja.
• Skyddet gäller upphovspersonens livstid plus 70 år, räknat till årsskiftet efter dödsåret. En fotografisk bild utan verkshöjd skyddas i 50 år efter det år den togs.
• Citat är tillåtna ur offentliggjorda verk, enligt god sed och i motiverad omfattning, med källa – men gäller i praktiken inte bilder. Att länka till öppet material är tillåtet. Att bädda in någon annans bild kan vara intrång.
• Att en bild går att hitta på Google säger ingenting om vad du får göra med den. Gå till källan och leta efter en licens. Står ingen: fråga, eller välj en annan bild.
• Creative Commons: BY kräver erkännande, SA att du delar under samma licens, NC att användningen inte är kommersiell, ND att verket inte ändras. CC0 har inga villkor. Erkännandet skrivs som TASL – titel, upphovsperson, källa, licens – i figcaption.
• Ett repo utan LICENSE-fil har alla rättigheter förbehållna. En helt AI-genererad bild har troligen ingen upphovsperson, men ska märkas som AI-genererad.

Säkerhet – det viktigaste

• De fem vanligaste hoten är nätfiske, läckta lösenord, skadlig kod, social manipulation och gissade lösenord. Alla fem riktar sig mot människan, inte mot tekniken.
• Långt slår krångligt: en lösenordsfras på fyra eller fler ord. Ett lösenord per tjänst, och en lösenordshanterare som minns dem åt dig.
• Flerfaktorsautentisering kräver något du vet plus något du har eller är. En passkey fungerar bara på rätt adress och går inte att fiska. Får du en inloggningsnotis du inte bett om är svaret nej.
• Nätfiske avslöjas av avsändaradressen, brådska, en länk för att logga in, krav på betalning eller kod, bilagor och QR-koder, och att något inte stämmer. Gå själv till tjänsten i stället för att följa länken.
• Hänglåset betyder att förbindelsen är krypterad och att certifikatet stämmer med adressen – inte att sajten är ärlig. Kryssa i Enforce HTTPS under Settings → Pages.
• En statisk sajt har liten angreppsyta. Ett tredjepartsskript körs däremot med full tillgång hos varje besökare. Text från besökaren läggs in med textContent, aldrig innerHTML – annars öppnar du för XSS.
• Lösenord, API-nycklar och .env-filer hör aldrig hemma i ett publikt repo. Lägg .env i .gitignore. Har en nyckel läckt byter du ut den hos tjänsten – historiken minns.
• Ett lösenord är personligt och lagras aldrig i klartext, utan hashat. Hittar du ett hål säger du till: att ta sig in utan lov är dataintrång, även med god avsikt. MSB heter sedan 2026 Myndigheten för civilt försvar, och CERT-SE hör till FRA.

Testa dig själv

1. En förening vill skicka ett nyhetsbrev och frågar i sitt formulär efter namn, e-postadress, personnummer och skostorlek. Vilken princip bryter de mot, och hur?

2. Din sajt ligger på GitHub Pages och har bara egen HTML och CSS. Behöver du en kakbanner? Vad ändras om du länkar in ett typsnitt från Google Fonts?

3. En bild har licensen CC BY-ND 4.0. Får du beskära den och lägga den på din sajt?

4. Ett porträtt togs 1950. Fotografen dog 1960. Är bilden fri att använda 2027?

5. Vad är det för fel i koden, ur säkerhetssynpunkt?

const falt = document.querySelector("#sok");
const utskrift = document.querySelector(".sokord");
utskrift.innerHTML = falt.value;

6. Du upptäcker att en API-nyckel ligger i en fil du pushat till ditt publika repo. Du tar bort raden och committar igen. Är problemet löst?

Läs mer

• GDPR: avsnitt 2–3, 6 Din egen sajt, 7 Kakor och samtycke och 10 Vanliga missuppfattningar.
• Upphovsrätt och licenser: avsnitt 1–5, 7 Creative Commons bokstav för bokstav, 8 Kod, typsnitt och AI-bilder och 9 Så anger du källa.
• Säkerhet: avsnitt 1–4 om hot, lösenord, MFA och nätfiske, 6 HTTPS och hänglåset, 7 Din sajt, 8 Hemligheter och repot och 9 om det etiska kravet.

6. Interaktivitet med moduler

Det viktigaste

• HTML svarar på vad är det här?, CSS på hur ser det ut? och JavaScript på vad händer när någon gör något? JavaScript i kursen körs i besökarens webbläsare: det sparar inget på en server, det kan stängas av, och koden syns för alla.
• Koden ligger i en egen .js-fil, inkopplad med <script src="js/meny.js" defer></script> sist i body på varje sida där den ska användas. defer gör att filen hämtas parallellt och körs när hela HTML:en är klar.
• Fem byggstenar: variabel (const som standard, let när värdet ska ändras), funktion (körs först när den anropas, med parenteser), händelse, villkor och lista.
• document.querySelector(".menyknapp") ger det första elementet som matchar, eller null om inget finns. querySelectorAll ger alla som en lista. I parentesen står en vanlig CSS-selektor. Därför börjar varje modul med if (!knapp || !lista) { return; } – saknas elementen avslutar den tyst i stället för att krascha sidan.
• Sidan ändras med textContent, classList.add/remove/toggle/contains, setAttribute och hidden. För text används textContent, inte innerHTML.
• Mönstret i hela modulbiblioteket: skriptet byter ett attribut som aria-expanded, aria-pressed eller aria-invalid, och stilmallen reagerar på det. Ingen modul sätter färger i koden.
• knapp.addEventListener("click", stang) – en namngiven funktion ges utan parenteser. Vanliga händelser är click, keydown, submit och input, och handelse.preventDefault() stoppar det webbläsaren annars hade gjort.
• Jämför med ===, aldrig ==. && är och, || är eller, ! är inte. false, 0, "", null och undefined räknas som falskt. Index i en lista börjar på 0.
• Felsök i konsolen (F12 → Console) och börja med fil och radnummer. 404 betyder fel sökväg, Cannot read properties of null att elementet inte hittades, och is not defined eller is not a function ett stavfel.
• Allt i modulens ÄNDRA HÄR-zon är ditt, resten rör du inte. Byter du ett klassnamn måste det ändras i modulen, i HTML:en och i CSS:en.

Testa dig själv

1. Menyn öppnas direkt när sidan laddas, och sedan händer ingenting när du klickar. Vad är fel?

const knapp = document.querySelector(".menyknapp");
knapp.addEventListener("click", oppna());

2. Konsolen säger Cannot read properties of null (reading 'addEventListener') och at meny.js:48. Vilka är de två vanligaste orsakerna?

3. Vad är skillnaden mellan querySelector och querySelectorAll?

4. Karusellen skriver "Bild 1 av 3" när variabeln aktuell är 0. Varför står det aktuell + 1 i koden?

Läs mer

• JS-guiden: avsnitt 2 De fem byggstenarna, 3 Hitta element på sidan, 4 Ändra sidan, 5 Händelser, 8 Koppla in en modul, 9 Konsolen och 10 Anpassa en modul. Avsnitt 11 läser en hel modul rad för rad.
• Modulbiblioteket: Så använder du sidan och Vilken ska du välja? – användbart igen när slutprojektet ska få sin funktion.

7. Optimering och diskret funktionalitet

Det viktigaste

• Bilden bär nästan hela vikten. Reservatets startsida väger 51 kB optimerad och 1 163 kB ooptimerad, och skillnaden är en enda bild.
• Foto blir AVIF och WebP med JPEG som reserv. Logotyp, ikon, karta och diagram blir SVG. En skärmdump med text blir PNG. PNG är förlustfri, JPEG, WebP och AVIF är förstörande.
• Skala ner bilden till den storlek den visas i innan du lägger in den. Komprimera från kvalitet 75 och gå nedåt tills du ser artefakter – gå då tillbaka ett steg.
• width och height på img, utan enhet, ger webbläsaren bildens proportioner. Då reserveras rutan direkt och texten hoppar inte (layout shift). I CSS:en hör width: 100% och height: auto ihop med attributen.
• srcset listar vilka filer som finns och hur breda de är (800w). sizes lovar hur bred bilden blir i layouten, och löftet måste stämma med CSS:en. I picture tar webbläsaren första source den förstår, och img med alt ligger sist.
• loading="lazy" på bilder längre ned på sidan, aldrig på den översta. Mät i nätverksfliken med Disable cache och Slow 4G, och kör Lighthouse på den publicerade adressen. Läs listan, inte siffran.
• Diskret betyder att JavaScript lägger sig ovanpå en sida som redan fungerar. Struktur, stil och beteende ligger i var sin fil, och onclick i HTML:en används aldrig. Att sajten inte kraschar utan JavaScript är ett E-krav – egen diskret funktionalitet är A-spårets kärna.
• hidden-mönstret: det som bara fungerar med skript har hidden i HTML:en, skriptet kontrollerar att elementen finns och tar sedan bort hidden. Sätter du display på något som kan vara gömt, skriv :not([hidden]).
• Progressive enhancement: HTML som fungerar, CSS som gör sidan färdig, JavaScript som gör den bättre. Testfrågan är om besökaren förlorar en genväg eller innehållet när skriptet saknas.
• Formuläret validerar redan i HTML:en med required, type="email", min och max. Skriptet sätter novalidate själv, lyssnar på submit och frågar checkValidity(). Ett tomt element med aria-live="polite" läser upp det som ändras.

Testa dig själv

1. Webbläsaren kan AVIF, men hämtar ändå WebP-filen. Vad är fel?

<picture>
  <source type="image/webp" srcset="bilder/mossen-800.webp">
  <source type="image/avif" srcset="bilder/mossen-800.avif">
  <img src="bilder/mossen-800.jpg" width="800" height="533"
       alt="Näckrosmossen strax före soluppgången.">
</picture>

2. Med JavaScript avstängt syns karusellens knapprad, fast den har hidden i HTML:en. Stilmallen har .karusell-styr { display: flex; }. Förklara, och rätta regeln.

3. Ett formulär har novalidate i HTML:en, och ett skript sköter valideringen. Vad händer när JavaScript inte körs?

4. Vad betyder sizes="(min-width: 60rem) 640px, 94vw"?

Läs mer

• Optimeringsguiden: avsnitt 2 De fyra bildformaten, 4 Rätt dimensioner, 5 width och height, 6 srcset och sizes, 7 picture, 9 loading="lazy", 11 Nätverksfliken och 12 Lighthouse.
• Diskret funktionalitet: avsnitt 1–6 gäller alla, särskilt 5 hidden-mönstret. Avsnitt 7 Formulär och 8 aria-live hör till C- och A-spåret, och 11 visar hur du testar med JavaScript avstängt.

8. Hur hänger det ihop?

Den första webbplatsen 1991 var bara text och länkar – ingen CSS, ingen JavaScript. Kursen har följt samma ordning, och din sajt växte i lager:

Område 1 gav dig verktygen, och område 5 reglerna för att publicera: vems bilder, vems uppgifter, vems lösenord. Ordningen är densamma som progressive enhancement i område 7: HTML som bär innehållet, CSS som gör sidan färdig, JavaScript som förbättrar.

Slutprojektet använder allt, i samma ordning. Byggpassen följer lagren – struktur (pass 77–78), layout (79), responsivitet (80), interaktivitet (81) och optimering (82) – och sedan testning, publicering och dokumentation. Varje pass hänvisar till samma guider som står under Läs mer ovan.

9. Ordlista

Hämtad ur guidernas ordlistor. Orden används i kursen utan att förklaras om.