Introduktion

När vi ska bygga webbplatser så börjar det ofta med en ide och sedan öppnar vi vår kodredigerare och börjar skriva HTML.

Det är fel ordning.

Inte för att koden är oviktig, du kommer att skriva mycket av den, utan för att koden bör vara ett resultat av de beslut som fattas före kodskrivandet. Beslut om vad sidan ska göra, för vem, och vad som händer när den inte fungerar som du tänkt dig.

Den här kursen handlar om att lära dig vad de besluten är, och såklart skriva koden som gör att de blir verklighet.

Webben kan se enkel ut utifrån. En sida är text och bilder, ordnade i ett rutnät. Men under ytan är det ett system av kontrakt: mellan din kod och webbläsaren, mellan din sida och sökmotorerna, mellan ditt gränssnitt och de människor som ska använda det.

Du skriver text som ska bli en grafisk presentation, som ska bli en interaktiv upplevelse. Det är svårt!

Varje tagg du väljer berättar något. <nav> säger: “det här är navigering.” <h1> säger: “det här är sidans viktigaste rubrik.” <div> säger ingenting alls. Den skillnaden är inte bara organisatorisk. Den är vad en blind användares skärmläsare behöver för att hitta rätt, vad Google behöver för att förstå vad din sida handlar om, och vad webbläsaren behöver för att presentera innehållet korrekt på allt från en mobiltelefon till en 49-tums ultrawide-skärm.

Det är anledningen till att tillgänglighet inte dyker upp som ett separat kapitel i det här materialet. Det är utgångspunkten. Sverige är ett av världens mest digitaliserade länder, och det är både en styrka och en sårbarhet. Om de digitala tjänsterna inte fungerar för alla har vi, mer eller mindre oavsiktligt, byggt in ett demokratiproblem. Digitalt utanförskap uppstår sällan av illvilja. Det byggs in av utvecklare som aldrig testade sin produkt med rätt verktyg, i rätt situation, med rätt användare i åtanke.

Du är på väg att bli en av de utvecklarna som faktiskt testar.

Kursen börjar med ett papper och en penna. Innan du skriver en enda rad HTML skissar du strukturen för hand, för att tvinga fram beslut som är gratis att ångra på papper men dyra att ångra i kod. Sedan bygger du strukturen i HTML, formar den med CSS och publicerar resultatet på GitHub Pages, tillgängligt för vem som helst med en länk.

Längs vägen lär du dig hur bilder faktiskt laddas, varför typsnitt är nätverkstillgångar som kostar, hur designbeslut kan motiveras med adjektiv i stället för magkänsla, och varför boxmodellen förklarar det mesta av det som verkar konstigt med CSS. Du arbetar med Flexbox och lär dig positionering. Du skriver JavaScript för första gången, inte för att göra saker flashiga, utan för att lösa ett konkret tillgänglighetsproblem: en hamburgermeny som fungerar för alla.

Du avslutar kursen med en komplett, publicerad, testad webbplats för ett fiktivt företag. Inte ett skolprojekt som ser ut som ett skolprojekt, utan en webbplats med en motiverad designidentitet, semantisk HTML-struktur, godkänd kontrast, fungerande tangentbordsnavigering och ett dokumenterat testprotokoll, precis som på ett riktigt projekt.

Webbexperten Jakob Nielsen formulerade en lag som kursens första del utgår ifrån: användare spenderar mestadelen av sin tid på andra webbplatser. Det betyder att de redan har förväntningar när de landar på din sida. Samma förväntningar som du hade när du landade här idag. Men försök att vara schysst mot dina första sidor du skapar, du lär dig, du är inte Googles team med tusentals designers som skapar Youtube.

Varje val du gör som webbutvecklare inkluderar eller exkluderar någon. Den insikten är kursen röda tråd.