HTML og CSS

Her finder du guides, eksempler og forklaringer, der hjælper dig med at bygge flotte, strukturerede og responsive websider med HTML og CSS. Uanset om du lige har åbnet din første .html-fil, eller du vil løfte dit layout-niveau med moderne CSS-teknikker, kan du bruge indholdet her som din praktiske værktøjskasse. Tag det i dit eget tempo, og brug artiklerne som både opslagsværk og trin-for-trin læring.

Hvad lærer du i denne kategori?

I denne kategori dykker vi ned i alt det, der får en webside til både at hænge sammen og se ordentlig ud: HTML til struktur, og CSS til styling og layout. Fokus er praktisk – du skal kunne tage eksemplerne, kopiere dem over i din editor og se en forskel med det samme.

Artiklerne spænder fra de helt grundlæggende byggesten (tags, semantik, farver, fonte) til mere avancerede emner som responsivt design, moderne layout-teknikker (Flexbox, Grid) og små forbedringer, der gør dine sider hurtigere, mere tilgængelige og nemmere at vedligeholde.

HTML: Struktur og semantik, der giver mening

HTML er skelettet i din webside. Hvis strukturen er rodet, bliver alting ovenpå også sværere – både styling, JavaScript og senere vedligeholdelse. Derfor arbejder vi meget med:

  • Grundlæggende HTML-tags: overskrifter, afsnit, lister, links, billeder m.m.
  • Semantisk HTML: hvornår du bør bruge <header>, <main>, <section>, <article> osv.
  • Strukturering af indhold, så det giver mening for både brugere og søgemaskiner
  • Tilgængelighed i HTML – f.eks. korrekte labels og alt-tekster

Hvis du er helt i startfasen med at lære at kode, kan det være en hjælp at kombinere artiklerne her med de mere introducerende ressourcer i Lær at kode-kategorien. Sammen giver de dig både teori, øvelser og konkrete projekter.

CSS: Fra kedelig rå HTML til et gennemført design

CSS er lag nummer to: farver, typografi, spacing, knapper, menuer og hele layoutet. Her får du både de klassiske teknikker og moderne best practices. Vi arbejder bl.a. med:

  • Grundlæggende CSS-syntaks, selectors og specifitet
  • Farver, fonte, linjeafstand og whitespace, så din side bliver læsbar
  • Layouts med Flexbox og CSS Grid
  • Responsivt design med media queries og mobile-first tankegang
  • Genbrug og struktur i din CSS (f.eks. utility-klasser og BEM-inspirerede mønstre)

Du vil også støde på artikler, der hjælper dig med at forstå, hvordan CSS faktisk beregnes i browseren – box-modellen, flow, stacking order osv. Det er den slags viden, der gør det meget nemmere at fejlfinde mærkelige layouts senere.

Hvordan hænger HTML, CSS og resten af webudvikling sammen?

HTML og CSS er fundamentet for al webudvikling. Når du først er tryg ved strukturen og layoutet, bliver det langt lettere at bevæge dig videre til dynamisk adfærd med JavaScript, eller til at arbejde med frameworks og full stack.

En typisk læringsvej kunne se sådan ud:

  • Start med HTML-struktur og simpel CSS-styling
  • Byg små sider og øvelsesprojekter – f.eks. en portfolio eller en enkel landingsside
  • Lær responsivt design, så dine sider fungerer på mobil
  • Bevæg dig videre til JavaScript til web for at gøre siderne interaktive
  • Gå derefter videre til frontend frameworks eller backend, når du er klar

Artiklerne her i kategorien hjælper dig netop med de første tre trin: stærk HTML-struktur, solid CSS-styling og et responsivt, brugbart layout.

Typiske spørgsmål, vi hjælper dig med at besvare

Hvor skal jeg starte, hvis jeg aldrig har kodet før?

Start med enkle HTML-sider og meget lidt CSS ad gangen. Få én ting til at virke, før du går videre til den næste. Brug f.eks. en artikel om grundlæggende tags, og suppler med ressourcerne under Kom godt i gang, hvor fokus er på det allerførste skridt og opsætning af værktøjer.

Hvordan bliver jeg bedre til layout og responsivt design?

Det korte svar: øvelse med konkrete små opgaver. I stedet for at prøve at bygge en stor webapp med det samme, kan du:

  • Genskabe simple layouts, du ser rundt omkring på nettet
  • Øve dig på at lave den samme side med både Flexbox og Grid
  • Teste din side på mobil, tablet og desktop og justere dine media queries

Her vil artikler med fokus på layout-teknikker, komponentbaserede designs og mobilvenlige mønstre være særligt relevante.

Hvordan undgår jeg at sidde fast og miste overblikket?

Det er helt normalt at blive overvældet af kombinationen af HTML, CSS, browserforskelle og værktøjer. En god strategi er at adskille udfordringerne: fejl i HTML-struktur, fejl i CSS-logik og fejl i værktøjskæden. Du kan med fordel kombinere indholdet her med artiklerne om fejlfinding og debugging, hvor vi arbejder mere målrettet med systematisk problemløsning.

Din videre vej efter HTML og CSS

Når du er tryg ved HTML og CSS, står døren åben til resten af udviklerverdenen: JavaScript, frameworks, backend og full stack. På tværs af Coding Class finder du derfor artikler, der hjælper dig videre i både den tekniske retning og i forhold til studie og karriere – f.eks. under studie, karriere og læringsvej.

Indholdet i denne kategori er tænkt som et fundament, du kan vende tilbage til igen og igen. Jo bedre du forstår HTML og CSS, desto nemmere bliver alt det, der kommer ovenpå.