Tilbage til 1. semester

1. semester

Tema 4: Grundlæggende UI

Grundlæggende brugerflader med HTML forms, semantik, styling og enkel JavaScript-interaktion

Accordions

Basic Accordion
Interpolate Size

Dark Mode

Dark mode med JavaScript
Dark mode-øvelse med JavaScript
Dark mode-øvelse med localStorage
Light/Dark Mode with color-scheme
Toggle Light/Dark Mode

Exercises

Øvelse 1: Typer af input
Ø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
Dark mode 1: Sæt temaets farver op
Dark mode 2: Style toggle-switchen
Dark mode 3: Skift tema med JavaScript
Dark mode 4: Gem brugerens valg
Dark mode 5: Hent det gemte tema
Popover 1: Sæt popover op
Popover 2: Tilpas popover
Popover 3: Animer popoveren
Popover 4: Animer ::backdrop
Accordion 1: Sæt accordion op
Accordion 2: Sæt name på details-elementerne
Accordion 3: Skræddersy pilen
Accordion 4: Animer fold-ud-effekt

Form exercises

Øvelse 1: Vælg relevante input-typer
Ø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

Forms

Input Types
Styling inputs
Checkbox vs Radio
Input inheritance
Input inheritance (steps)
Input styling-anbefalinger
Input validerings-styling
Form Layout Grid
Form interaction states
Basic Color input
Basic Form
Basic Form (steps)
Basic Select
Basic Slider input
Basic Textarea
Basic to Advanced
Form interaction states (steps)
Form Layout Flex (steps)
Form Layout Grid (steps)
Input styling-anbefalinger (steps)
Input validerings-styling (steps)
Slider input
Spot fejlene
Styling Starter CSS

Misc

Basic Custom properties
Form action test: Summary med query strings
Form action: Summary med query strings
GET-form: Program på samme side
GET-form: Søgning med query strings
JS lite
JS lite Demo
JS recap

Popovers

allow-discrete & @starting-style
Animeret popover
Basic Popover
Popover (steps)