Kurshandbok för
Responsiv webbdesign
Studietips från Pär
Att lära sig programmera tex html, css, javascript C#, python är som att lära sig spela ett instrument – det handlar mindre om att memorera fakta och mer om att bygga upp ett ”muskelminne” i fingrarna och hjärnan. För att verkligen bemästra hantverket behöver du kombinera teori med att faktiskt göra, varje dag. Här är min metod för att du ska lyckas:
- Gör det till en daglig vana: Sätt av 2–4 timmar varje dag hemma eller i skolan. Varva läsning i kurslitteratur och kolla inspelningar, med att faktiskt skriva kod då skapar du en naturlig rytm där hjärnan får bearbeta informationen från flera olika håll.
- Härma för att förstå: Börja med att skriva av kodexempel ur kursboken, inspelningar, från nätet. Det kan kännas enkelt, men det är ett kraftfullt sätt att låta ögonen och händerna lära sig språkets mönster. Innan du vet ordet av kommer syntaxen att sitta i ryggmärgen.
- Experimentera och lek: När du har skrivit av kod – våga ändra! Testa att byta ut en html tagg, en css styling, förändra en variabel eller ändra en loop och se vad som händer. Det är i de små misstagen och felsökningarna som den verkliga förståelsen föds. Det är här du går från att kopiera till att förstå.
- Bygg något eget från dag ett: Låt all ny kunskap landa direkt i ett eget projekt – kanske ett system för en pizzeria, en bilfirma, en förening eller en frisör. Genom att använda det du precis lärt dig och applicera det på ditt egna projekt, förvandlar du abstrakt teori till ett hantverk du faktiskt äger.
- "Rubber Ducking": När du felsöker och ändrar i din kod – försök att förklara högt för dig själv (eller en badanka på skrivbordet) varför du tror att koden gör som den gör. Att sätta ord på kodlogiken och vad den gör, del för del, är det sista steget för att verkligen befästa kunskapen.
Veckoplanering
Vecka 46
Kursmaterial
- Jennifer Niederst Robbins, Learning Web Design, 6 upplagan 2025, O'Reilly.
Webbsidans tre stora delar Visar en websidas tre stora delar: html, css och javascipt.
Kap 4 HTML overview Inspelning utifrån kursbokens powerpoints: Elements & Attributes: Hur vi bygger upp taggar och ger dem egenskaper. Minimal Structure: Skelettet som krävs för ett korrekt HTML-dokument. Block vs. Inline: Hur olika element tar plats och beter sig på sidan. Troubleshooting: Hur du validerar din kod och hittar fel med rätt verktyg.
Kodexempel Kap 4 HTML overview Kodexempel Kap 4: Vi omsätter teori till praktik med konkreta exempel. Lighthouse-optimering: Så strukturerar du din HTML för att få 100% poäng på tillgänglighet, SEO och prestanda. Best Practices: Vikten av semantiska taggar och korrekt länkning av resurser. HTML-mallen: Vi går igenom en universell mall som du kan använda som stabil grund för alla dina framtida webbprojekt.
Kap 5 Marking up text Inspelning utifrån kursbokens powerpoints: Struktur & Layout: Skillnaden mellan generella block-element, sidorganiserande element och radbrytningar (br). Listor: Hur man skapar ordnade och oordnade listor på rätt sätt. Inline-nivå: En genomgång av textnära element och skillnaden mellan generiska taggar som div och span. ARIA & Tillgänglighet: En första introduktion till hur vi gör webben tillgänglig för alla. Specialtecken: Hur man använder escaping characters för att visa symboler korrekt.
Kodexempel Kap 5 Marking up text Går igenom html kodexempel relaterat till kap 5. Citat & Källor: Hur du markerar upp citat och referenser på ett korrekt sätt. Definitionslistor: Vi tittar på dl, dt och dd för att strukturera ordlistor eller förklaringar. Article-taggen: En kort genomgång om när och varför man använder article för fristående innehåll. Datum & Tid: Hur du markerar upp tidskritiskt innehåll med time-taggen för bättre sökbarhet och tillgänglighet.
Kap 6 Adding links Inspelning utifrån kursbokens powerpoints: A-elementet: Grunden för alla länkar och hur attributet href fungerar. Absoluta vs. Relativa URL:er: Skillnaden mellan att länka till externa sajter och att navigera mellan dina egna lokala filer. Fragment (Länka inom en sida): Hur du skapar bokmärken och länkar på samma sida med hjälp av ID. Target: Hur du styr om en länk ska öppnas i en ny flik eller i samma fönster. Speciallänkar: Hur du skapar klickbara länkar för e-post (mailto) och telefonnummer (tel).
Kodexempel Kap 6 Adding links Mappstruktur: Hur du organiserar dina HTML-filer och bilder på ett logiskt sätt. Länka mellan sidor i olika mappar: Hur du "hoppar" in i eller ut ur mappar med hjälp av ./ och ../ Bilder: Hur du använder img-taggen för att hämta bilder som ligger i en separat bildmapp.
Kodexempel Kap 6 Adding links inom samma sida Länkar i samma html-sida: Hur du använder id attributet och # i dina länkar för att få webbläsaren att skrolla till ett specifikt ställe i html sidan. Användningsområden: Hur man bygger en innehållsförteckning eller en "Tillbaka till toppen"-knapp.
Kap 7 Adding images Inspelning utifrån kursbokens powerpoints: Bildformat för webben: Så som JPG, PNG, WebP eller GIF. IMG-elementet: Hur man praktiskt lägger till bilder i sin HTML-kod. Attributen src och alt: Hur du anger rätt sökväg till bilden och varför den alternativa texten är avgörande för tillgängligheten. Bredd & Höjd: Hur du använder attribut för att styra bildens storlek när den laddas. SVG-grafik: Hur du lägger till skalbar vektorgrafik som ser knivskarp ut på alla skärmar.
Kodexempel Kap 7 Adding images Bilder som länkar: Hur du omsluter en bild med en ankar-tagg för att göra hela bilden klickbar. Image Maps (Bildkartor): Hur du definierar specifika regioner (koordinater) i en och samma bild som leder till olika destinationer. Mappstruktur för media: Best practices för att organisera dina bildfiler i projektet. CSS & Bildlayout: Hur du använder CSS-egenskaper som float, margin och display för att snyggt placera bilder i förhållande till din text.
Att göra
- Ladda ner VS Code för att kunna koda och editera dina HTML-, CSS- och JSfiler.
- I VS code installera 'Live server' via extentions ikonen till vänster. Komma igång med Live server i VS code
- Fixa git i VS code Versionhantering med git i VS code
- Komma igång med VS code och git
- Längre video om att komma igång med VS code och git
- Koda tillsammans med live share
- Skapa din egna digitala portfolio som visar vem du är och vad du kan som systemvetare använd html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa din egna blogg med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa ditt egna CV med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Skapa webbplats för en lokala byggfirma med html taggar från kapitel 4–7. Sidorna ska även vara byggd med semantiska taggar (header, nav, main, section, article, footer) för att skapa en logisk och modern struktur. Validering: Din kod måste passera utan fel i både W3C HTML. Lighthouse: Gör en analys i Chrome Lighthouse och optimera sidan tills du når 100% på Performance, Accessibility, Best Practices och SEO.
- Examination: Se kursrummet
Instuderingsfrågor
- Vilken tagg används för att berätta för webbläsaren vilken version av HTML som används?
- Var placeras metadata om webbsidan, såsom titel och teckenkodning?
- Vilken tagg omsluter allt innehåll som faktiskt syns på webbsidan?
- Vilken tagg omsluter huvudinnehållet på en webbsida?
- Vilken tagg används för att definiera sidans introduktionsinnehåll, ofta innehållande en logotyp och rubrik?
- Kan man ha flera <header>-element på samma sida?
- Vilken tagg är bäst lämpad för att innehålla kontaktinformation eller copyright-text, adresser?
- Vilken tagg används för att gruppera innehåll som hör ihop tematiskt, till exempel olika produktkategorier? ämnesområden
- Vilken semantisk tagg är bäst lämpad för att omsluta en oberoende del av en sida, till exempel ett blogginlägg, information om en bil, en produkt eller personal?
- Vilken tagg används för att skapa ett vanligt textstycke?
- Hur många nivåer av rubriktaggar finns det i HTML?
- Varför ska man aldrig hoppa över rubriknivåer (t.ex. gå direkt från <h1> till <h3>)?
- Vilken tagg används för att skapa en punktlista?
- Vilken tagg används för att skapa en numreradlista?
- Vilken tagg används för varje enskilt element i en lista?
- Vilket generiskt element används för att gruppera innehåll på blocknivå, ofta för styling?
- Vad är den största skillnaden mellan att använda <div id="nav"> och att använda den semantiska taggen <nav>?
- Vilken tagg används för att citera ett längre stycke från en annan källa?
- Vilken tagg används för att citera ett längre stycke från en annan källa?
- Vilken tagg används för att skapa en klickbar länk?
- Hur länkar man till en html sida filnamn.html som ligger i en undermapp som heter "bilder"?
- Vad kallas en länk som leder till en helt annan webbplats?
- Vilket tag används för att skapa en bild?
- Vilket attribut anger sökvägen till bilden?
- Vilket element kan erbjuda alternativa bildformat så att webbläsaren kan välja det mest optimala
- Vilket attribut på img-taggen hjälper webbläsaren att reservera plats för bilden innan den laddats, så att sidan inte "hoppar"?
- Vilken tagg används ofta för att gruppera navigeringslänkar?
- Vilken taggar används ofta inuti en tagg där man gruppera navigeringslänkar?
- Vilket element används för att markera en tematisk paus, vilket oftast visas som en vågrät linje?
- Vilken tagg används för att markera en specifik tidpunkt eller ett datum?
- Vilken är den vanligaste teckenkodningen som används i HTML5 för att stödja tecken som å, ä och ö?
- Vad innebär det att ett element är ett "tomt element" (void element), och ge ett exempel?
Vecka 47
Kursmaterial
Kap 8 Table markup Inspelning utifrån kursbokens powerpoints: Hur en tabell byggs upp logiskt i HTML. Hur man använder taggar som som table, skapa rader med tr och dataceller/columner med td samt rubrikceller med th. För att ge hela tabellen en titel används en caption.
Kodexempel Kap 8 Table Markup hur man använder rowspan och colspan.
Kap 9 Forms Inspelning utifrån kursbokens powerpoints: Går igenom Hur formulär fungerar, olika fomulärstaggar som textfält, knappar, menyer, speciala fält text date time.
Kodexempel Kap 9 Forms Visar ett beställningsformulär för pizzeria som använder olika HTML-input typer för att samla in data: text / tel / email: För korta fritextsvar som namn, adress och kontaktuppgifter. textarea: För längre fritext (leveransinstruktioner). radio: För val där man bara kan välja ett alternativ (bottentyp). checkbox: För val där man kan välja flera alternativ (toppings). select: En menylista för att välja ett specifikt antal (antal pizzor). submit: En knapp som skickar iväg all ifylld data till servern. Koden använder även och för att gruppera och strukturera informationen logiskt.
Att göra
- Examination:
Instuderingsfrågor
- Vilka är de tre absolut nödvändiga elementen för en giltig tabellstruktur?
- Varför bör man aldrig använda tabeller för layoutändamål t.ex. för att positionera knappar eller textblock?
- Hur definierar man en rubrik för hela tabellen som är tillgänglig för både seende användare och skärmläsare?
- Vad är den semantiska skillnaden mellan <th> och <td>?
- Vad gör attributet colspan="3"?
- Vad gör attributet rowspan="2"?
- Vad gör attributet rowspan="2"?
- Vilka är de två viktigaste attributen på ett form-element för att data ska kunna skickas till en server, och vad gör de?
- Vad är skillnaden mellan att använda method="GET" och method="POST"?
- Varför är det viktigt att varje form-element, som input, har ett unikt name-attribut?
- Hur kopplar man samman ett <label>-element med ett <input>-element på ett korrekt sätt?
- Varför bör man undvika att använda attributet placeholder som ersättning för en <label>?
- Vad är fördelen med att använda specifika <input> -typer som type="email", type="tel" eller type="number" istället för bara type="text"?
- Hur markerar man ett input element fält som obligatoriskt i HTML?
- Vilka två element används för att gruppera relaterade fält i ett långt formulär visuellt och med rubrik, och vad är deras syfte?
- Vilket HTML-element och vilken type bör användas om användaren endast får välja ett alternativ ur en grupp av flera förutbestämda val?
- Vilka tre element måste (och bör) ingå i en korrekt strukturerad rullista, dropdown meny, och vad är deras respektive funktioner?
- Vilket värde skickas till och blir tillgängligt på server och dess kod <option value="sthlm">Stockholm</option>? sthlm eller Stockholm?
Vecka 48
Kursmaterial
Grundläggande css egenskaper för layout och extern css fil för styling Visar stylingen i en rödbrun färgskala (maroon) för rubrikerna. H1 får en tydlig inramning med linjer upptill och nertill, medan H2 och brödtexten skjuts in 100 pixlar från vänster för att skapa en ren och luftig layout. Vi använder ett stilrent sans-serif-typsnitt i större storlek för bättre läsbarhet, och slutligen ser vi till att bilder flyter till höger med en balanserad marginal så att texten kan löpa snyggt runtomkring. Till sist så länkar vi style från extern css fil.
Kap 11 Introducing CSS del 1 Syntax och struktur: Bryter ner hur en stilregel är uppbyggd av selektorer och deklarationer. Selektorer: Hur vi väljer ut element via typ, klasser eller ID:n. Implementering: De tre sätten att koppla stilar till ett dokument – externa stilmallar, inbäddade koder och inline-stilar. Dokumentets hierarki: Vi tittar på hur element förhåller sig till varandra som föräldrar, barn och ättlingar. Arv (Inheritance): Hur stilar ärvs nedåt i dokumentträdet,
Kap 11 Introducing CSS del 2 The Cascade: En genomgång av det system som webbläsaren använder för att lösa konflikter när flera stilregler gäller och appliceras på samma element. The Box Model: Varje element är som en rektangulär box. Vi tittar på hur man beräknar totala bredden resp höjden i en box där även av kanter (borders), marginaler (margins), utfyllnad (padding) påverkar dem. Måttenheter i CSS: En översikt av absoluta enheter som pixlar (px) och de viktiga relativa enheterna som em, rem samt viewport-enheter (vw/vh) som anpassar sigtypsnittsstorlek eller skärmens mått.Developer Tools: Nämner till de inbyggda verktygen i moderna webbläsare som gör det möjligt att inspektera kod och testa designändringar i realtid direkt på webbsidan.
Att göra
- Examination:
Instuderingsfrågor
| PROGRAM | Systemvetenskapliga programmet |
|---|---|
| SYFTE | Kursen behandlar grundläggande HTML och CSS, så som element, attribut, nästling, dokumentdisposition, sektionering, länkning, deklarationer, egenskaper, värden och kaskaden.. |
| KURSPLAN | Gå till kursplan hos DU |