Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 8 av 8.

---

Du har byggt sidor med HTML och CSS, jobbat med layout och responsiv design – nu är det dags att ta nästa steg. I det här avslutande avsnittet får du konkreta tips på hur du publicerar din första webbsida och hur du kan fortsätta utvecklas som webbutvecklare.

Vi pratar om:

 * Vad det innebär att publicera en webbsida – och hur du gör det gratis med t.ex. GitHub Pages eller Netlify
 * Vanliga fallgropar att undvika när du går live
 * Hur du fördjupar dig i HTML, CSS och tar första steget in i JavaScript
 * Förslag på enkla projekt som hjälper dig lära genom att göra
 * Bra resurser för vidare självstudier: dokumentation, övningssajter, och videolektioner

Det här avsnittet är till för att peppa dig att fortsätta – och ge dig verktyg att ta nästa steg på egen hand.

🎯 Du är inte längre en nybörjare – du är en webbutvecklare i början av din resa.

---

Resurser

⛓️‍💥 W3C kurs om tillgänglighet
https://www.w3.org/WAI/courses/foundations-course/

⛓️‍💥 Mozilla MDN - referens dokumentation HTML & CSS
https://developer.mozilla.org/en-US/docs/Web/HTML

⛓️‍💥 CSS Tricks
https://css-tricks.com

⛓️‍💥 Frontend Mentor
https://www.frontendmentor.io

⛓️‍💥 Flexbox Froggy
https://flexboxfroggy.com/#sv

HTML & CSS del 8 av 8: Nästa steg – publicera och fortsätta lära

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 7 av 8.

---

Hur ser din webbsida ut på mobilen? Surfplattan? Datorn? I det här avsnittet lär du dig grunderna i responsiv design – alltså hur du bygger webbsidor som automatiskt anpassar sig till olika skärmstorlekar och enheter.

Vi går igenom:

 * Vad responsiv design är och varför det är så viktigt
 * Hur du använder viewport-taggen, flexibla mått och enheter som %, em, vw, vh
 * Hur du med media queries kan anpassa layout och stil beroende på skärmens bredd
 * Tänk “mobile first” – börja enkelt, skala upp
 * Ett praktiskt exempel på hur en meny förändras mellan mobil och desktop

Du får verktygen för att skapa webbsidor som inte bara ser bra ut – utan fungerar överallt.

👉 I nästa (och sista) avsnitt tittar vi på nästa steg: hur du publicerar din sida och fortsätter utvecklas som webbutvecklare.

---

Exempel

Meta-tag till huvudet av HTML-dokumentet
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media query
@media (max-width: 600px) {
   .nav {
       flex-direction: column;
   }
}



HTML & CSS del 7 av 8: Responsiv design – gör plats för mobilen

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 6 av 8.

---

Hur får man saker att hamna rätt på en webbsida? I det här avsnittet går vi igenom hur du med hjälp av CSS kan styra var dina element placeras – från grundläggande positionering till moderna layoutekniker med Flexbox. Det är här din webbsida går från enkel stapling till professionell struktur.

Du lär dig:

 * Hur CSS display påverkar hur element visas (block, inline, flex m.fl.)
 * Vad position betyder – och hur du placerar saker exakt där du vill ha dem
 * Hur Flexbox fungerar och varför det förenklar layout
 * Tips för att undvika vanliga layoutproblem – och hur du felsöker med webbläsarens utvecklarverktyg

Det här avsnittet ger dig kontroll över hur din sida faktiskt ser ut – oavsett skärmstorlek eller innehåll.

👉 I nästa avsnitt tar vi det vidare till responsiv design – så att din sida fungerar snyggt på både dator och mobil.

---

Exempel
<div class="container">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

.container {
 display: flex;
}

---

Resurser

🐸 Flexbox Froggy: https://flexboxfroggy.com/

HTML & CSS del 6 av 8: Layout med CSS – från kaos till kontroll

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 5 av 8.

---

En webbsida i all ära – men det är först när sidor hänger ihop som det blir en webbplats. I det här avsnittet dyker vi ner i HTML-länkar, menyer och grunderna i webbplatsnavigation. Du lär dig hur du kopplar samman sidor, skapar tydliga menyer och bygger en användarvänlig struktur.

Vi går igenom:

 * Hur länkar fungerar med <a>-taggen och attributet href
 * Skillnaden mellan relativa och absoluta länkar
 * Hur du bygger en semantisk och tillgänglig navigationsmeny med <nav> och listor
 * Tips för tydlig och användbar navigation – både visuellt och tekniskt

Det här är ett avsnitt som lägger grunden till att din webbplats blir mer än bara isolerade sidor – den blir en helhet.

👉 I nästa avsnitt lär du dig hur du styr layouten på sidan – med moderna tekniker som Flexbox.

---

Exempel på en enkel navbar:

<nav>
 <ul>
   <li><a href="index.html">Start</a></li>
   <li><a href="om.html">Om oss</a></li>
   <li><a href="kontakt.html">Kontakt</a></li>
 </ul>
</nav>

HTML & CSS del 5 av 8: Att länka samman världen – navigation och länkar

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 4 av 8.

---

Hur gör man en webbsida inte bara fungerande – utan tilltalande och lättläst? I det här avsnittet går vi ett steg längre med CSS och fokuserar på färgval, typografi och hur webbläsaren faktiskt hanterar utrymme kring dina element.

Du lär dig:

 * Hur du använder färg med namn, HEX, RGB och HSL – och varför kontrast är viktigt
 * Grunderna i typografi: typsnitt, textstorlek, radavstånd och andra detaljer som påverkar läsbarheten
 * Vad boxmodellen är – och hur padding, border och margin påverkar layouten
 * Hur små CSS-justeringar kan göra en enorm skillnad i helhetsintrycket

Det här är avsnittet där din sida börjar se ut som en “riktig” webbsida – och där du börjar tänka som en designer.

👉 Nästa avsnitt handlar om navigation – hur du länkar sidor, skapar menyer och bygger en tydlig struktur för din webbplats.

---

Resurser

Internetting is Hard: CSS Box Model
https://webdesign.solomon.ng/html-and-css/css-box-model.html

HTML & CSS del 4 ac 8: Färg och form – att skapa visuella uttryck

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 3 av 8.

---

Dags att göra din webbsida snygg! I det här avsnittet introducerar vi CSS – språket som låter dig forma färger, typsnitt, layout och mer. Du får lära dig hur CSS fungerar tillsammans med HTML och hur du med några enkla regler kan förvandla en enkel sida till något visuellt tilltalande.

Vi går igenom:

 * Vad CSS är och varför det är viktigt
 * Hur du kopplar CSS till HTML på tre olika sätt
 * Hur CSS-regler är uppbyggda – med selektorer, egenskaper och värden
 * Vanliga egenskaper för färg, text, marginaler och ramar
 * Ett praktiskt exempel: före och efter CSS

Oavsett om du gillar färgkoordination eller bara vill förstå hur proffs bygger snygga sidor – så är det här din väg in i webbdesignens värld.

👉 Nästa avsnitt handlar om att förfina din design med färgscheman, typografi och layoutprinciper.

HTML & CSS del 3 av 4: CSS – Stilen som gör webben snygg

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 2 av 8.

---

Nu börjar vi bygga! I det här avsnittet får du en praktisk och begriplig introduktion till HTML – språket som ger webbsidor struktur och innehåll. Vi går igenom hur HTML fungerar, hur taggar ser ut, och hur du skriver din första webbsida helt från grunden.

Du lär dig:

 * Vad HTML är – och varför det inte är ett programmeringsspråk
 * Hur HTML-taggar och element fungerar
 * Hur en grundläggande HTML-sida är uppbyggd
 * Vanliga HTML-element som rubriker, stycken, länkar och bilder
 * Vad “semantisk HTML” innebär och varför det är viktigt

Oavsett om du vill skapa en blogg, portfolio eller bara förstå hur webben är uppbyggd – så börjar allt här.

👉 I nästa avsnitt dyker vi in i CSS och ser hur du kan ge stil och personlighet åt din sida.

HTML & CSS del 2 av 8: HTML – Skelettet av en webbsida

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 1 av 8.

---

Vad är en webbsida – och vad händer egentligen när du skriver in en adress i webbläsaren? I detta första avsnitt lägger vi grunden för din förståelse av webbutveckling. Du får en tydlig mental modell för hur webben fungerar, och var HTML och CSS passar in i helheten.

Vi pratar om:

 * Hur en webbsida laddas – från webbläsare till server och tillbaka
 * Vad HTML och CSS faktiskt är – med konkreta exempel och liknelser
 * Skillnaden mellan frontend och backend
 * Varför du inte behöver vara expert för att komma igång

Oavsett om du är total nybörjare eller bara vill fräscha upp grunderna är det här ett perfekt startskott. 🎧

👉 I nästa avsnitt börjar vi bygga vår första webbsida – med rubriker, stycken och bilder.

HTML & CSS del 1 av 8: Vad är en webbplats egentligen?

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se [https://www.kodkunskap.se/]

💬 https://discord.gg/hZfsnpQM

Martin Haagen

Shows