3. semester

Tema 13C: Frontend Design

Design og implementering af brugervenlige webinterfaces

Fundamentals

3 emner

2 emner

Flex vs. Grid i praksis

En praktisk guide til at vælge den rigtige layout-model ud fra konkrete UI-opgaver.
Defensive CSS (Gotchas)

Praktiske defensive mønstre, så layouts overlever lang tekst, skæve billeder og uforudsigeligt indhold.

2 emner

Subgrid i praksis

Brug subgrid til at dele spor og linjenavne på tværs af nested layouts.
Container Queries i praksis

Byg komponenter der reagerer på egen plads i layoutet i stedet for viewporten.

6 emner

Flow-space og spacing i praksis

Brug --flow-space som en læsbar standardregel for rytme i prose og simple komponenter.
Line-height i praksis

Praktiske tommelfingerregler for line-height, hierarki og stabil rytme i UI og prose.
Units i praksis

Brug typografiske units, når spacing og alignment skal følge tekstens faktiske mål.
Fluid typografi og spacing i praksis

Brug flydende type- og spacing-skalaer som få, læsbare tokens i stedet for mange breakpoints.
Styling af tekstindhold

Byg en robust prose-wrapper med hierarki, toneværdi, flow-space og få bevidste undtagelser.
Øvrige typografi-greb i praksis

Små, moderne tekstgreb som text-wrap, initial-letter, text-box og gradient-text.

4 emner

Custom Properties i praksis

Brug custom properties som et læsbart API til temaer, varianter og fallback i komponenter.
Pseudo-elementer i praksis

Byg dekorative lag, badges og baggrundseffekter uden ekstra markup.
Scroll-teknikker i praksis

Brug sticky og snap som bevidste UX-patterns, og suppler med scroll-drevet feedback hvor det giver mening.
Math-funktioner i praksis

Brug calc(), min(), max() og clamp() til robuste grænser og færre breakpoint-hacks.

2 emner

Farver i praksis: color-mix()

Praktisk brug af color-mix() til visualiseringer, gradients og simple UI-varianter.
Farver i praksis: Relative Color Syntax

Praktisk brug af Relative Color Syntax til states, afledte tokens, alpha og farverelationer.

4 emner

UI-animation: transforms, composition og easing

Start med compositing-venlig motion og forstå rækkefølge, composition og `linear()`.
UI-animation: @property i praksis

Brug typed custom properties til interpolation, sikrere defaults og mere fleksible animationer.
UI-animation: Doughnut Chart i praksis

Byg doughnut chartet i lag: conic-gradient, offset-path og et animeret tal i midten.
UI-animation: Popover i praksis

Animer popovers med `:popover-open`, `@starting-style` og diskrete transitions i top layer.

4 emner

Moderne CSS-features og kompatibilitet

Brug nye CSS-features bevidst: de kan løse rigtige UI-problemer, men skal indføres med blik for støtte og fallback.
Progressive Enhancement og fallbacks

Tænk kompatibilitet som en strategi: basisoplevelse først, forbedringer hvor det giver mening.
@supports og feature detection

Brug `@supports` til at spørge browseren om kapabiliteter i stedet for at gætte på browsernavne.
Polyfills og browser-ressourcer

Når CSS alene ikke er nok: vælg mellem enhancement, polyfill, alternativ teknik eller bevidst fravalg.

4 emner

Scroll-driven animation i praksis

Fra tidsbaseret animation til scroll- og view-timelines med `scroll()`, `view()` og `animation-range`.
View Transitions i praksis

Forstå forskellen på same-document og cross-document view transitions, og hvordan `view-transition-name` bruges til at styre animationen.
Anchor Positioning: grundlag

Lær koblingen mellem anchor og target, og forstå forskellen på `position-area` og `anchor()`.
Anchor Positioning: patterns i praksis

Brug anchor positioning til faste knapper, login-panels og mere robuste overlays med fallback-positioner.