Mine øvelser

Accordion 1: Sæt accordion op

Accordion-øvelse med fokus på HTML-struktur og de vigtigste CSS-attributter

Accordion 2: Sæt name på details-elementerne

Accordion-øvelse med fokus på HTML-struktur og de vigtigste CSS-attributter

Accordion 3: Skræddersy pilen

Accordion-øvelse med fokus på HTML-struktur og de vigtigste CSS-attributter

Accordion 4: Animer fold-ud-effekt

Accordion-øvelse med fokus på HTML-struktur og de vigtigste CSS-attributter

Dark mode 1: Sæt temaets farver op

Brug color-scheme og light-dark() til at definere farverne i et lille tema.

Dark mode 2: Style toggle-switchen

Gør checkboxen til en lille toggle-switch, der passer til temaet.

Dark mode 3: Skift tema med JavaScript

Brug JavaScript til at læse checkboxens state og toggle dark-klassen på html.

Dark mode 4: Gem brugerens valg

Gem dark mode-valget i localStorage, når checkboxen ændrer sig.

Dark mode 5: Hent det gemte tema

Læs det gemte theme fra localStorage og synk både html-klassen og checkboxen ved load.

Dark mode-øvelse med JavaScript

Øvelse 1: Vælg relevante input-typer

Sæt de rigtige typer på felterne i event-pass-formularen.

Øvelse 2: Forbind labels og felter

Øvelse 3: Gruppér radio-knapper

Øvelse 4: Giv felterne name

Øvelse 5: Style formularen

Øvelse 6: Tilføj layout

Øvelse 7: Tilføj interaktionstilstande

Øvelse 8: Tilføj valideringstilstande

Øvelse 9: Tilføj tilgængelige beskrivelser

Øvelse 10: Læs query stringen

Øvelse 11: Hent og vis enkeltværdier

Øvelse 12: Fortolk hype-niveauet

Øvelse 13: Vis flere checkbox-værdier

Øvelse 14: Tilpas passets profil

Øvelse 1: Typer af input

Sæt de rigtige typer på hvert input-felt

Øvelse 2: Forbind labels og inputs

Øvelse 3: Grupper relaterede felter

Øvelse 4: name

Øvelse 5: Tilføj styles

Øvelse 6: Tilføj Layout struktur

Øvelse 7: Tilføj pseudo-classes

Øvelse 8: Tilføj valideringstilstande

Øvelse 9: Tilføj ARIA-attributter

Øvelse 10: Fjern browser pop-up

Øvelse 11: preventDefault & reset

Øvelse 12: Saml værdier op og vis dem

Bonus-øvelse 12a: Vis checkbox-værdi i output

Bonus-øvelse 12b: Vis select- og textarea-værdi i output

Popover 1: Sæt popover op

Popover

Popover 2: Tilpas popover

Popover med indhold og tilpasset størrelse

Popover 3: Animer popoveren

Popover

Popover 4: Animer ::backdrop

Popover

Lav en card-komponent

Flyt card-markup fra index til en ny Card-komponent.

Importer komponent

Importér Card og brug den på index i stedet for rå HTML.

Send props til komponent

Genbrug Card tre gange og send forskelligt indhold via props.

Components Scoped Styles

Flyt card-styling fra global CSS ind i Card-komponenten med scoped styles.

Components og slots

Brug default, named og fallback slots, og vis kun actions-wrapperen når slotten findes.

Testing Button Variants

Add Components Test

Bar Chart: Orientering

Bar Chart: Attr()

Bar Chart: Color-mix()

Bar Chart: CSS-variabel

Bar Chart: Pseudo-element

Bar Chart: Responsive med writing-mode

Bar Chart: Fix writing-mode med logical properties

Bar Chart: Gitterlinjer med gradient

Wrapper

Wrappers

Container Query Units

Icon Button

Sold out

img/no img

Before / After

Contents

Quantity query

Flex vs Grid

Flex vs Grid 2

Flex vs Grid 3

Flex vs Grid 4

Opvarmningsøvelse