CRAFTING UI

3. semester, MMD

Frontend Design

Introduktion til temaet

konference, juni 2026

Speakers

Er frontend-faglighed stadig relevant i en tid med AI?

AI kræver faglig dømmekraft

AI kan hjælpe os med at producere hurtigere, men den kan ikke automatisk vide, hvad der er en god weboplevelse. Derfor kræver AI stadig mennesker, der kan orkestrere løsninger ud fra platformen, brugerne og konteksten.

Faglighed før automatisering

Hvis vi mister forståelsen for webplatformen, mister vi også evnen til at vurdere kvaliteten af det, som AI producerer.

Platformen er blevet voksen

Mange af konferencens emner handlede om, at browseren nu kan løse problemer, som tidligere krævede JavaScript, frameworks eller custom komponenter.

Popover & dialogs

Anchor Positioning

View Transitions

Custom Select

Container Queries

Scroll State Queries

if()

attr()

Grid-lanes

scroll-driven/triggered animations

contrast-color()

@function

Nye mentale modeller

Fx skal komponenter vide,

— Adam Argyle

hvor de er

hvad de indeholder

hvem de er sammen med

hvad brugeren foretrækker

Til sammenligning genererer AI ofte komponenter isoleret

HTML

CSS

JavaScript

HTML

CSS

JavaScript

Vi skal herhen

Stop mig endelig undervejs!

Der kommer til at være meget, men...

Kursusmateriale

Oversættelse

Formål

Lære teknikker, der hjælper med design-implementering

Formål

Forstå, hvorfor design "virker"

Formål

Få mere erfaring med CSS

Formål

@layer component {
  .my-component {
    padding: 2rlh;

    :has(> &) {
      container: my-component / inline-size;
    }

    > * + * {
      margin-block-start: var(--flow-space, 1em);
    }

    :nth-child(2 of .paragraph) {
      &:first-letter {
        initial-letter: 3;
      }
    }
  }
}

moderne

Udvidelse af fagligt ordforråd

Formål

Det handler ikke bare om at lære flere features, men om at udvide din forståelse af teknikker og principper, så du mere nøjagtigt kan beskrive, undersøge, vurdere og kvalificere en løsning.

Udvidelse af fagligt ordforråd

Formål

Det handler ikke bare om at lære flere features, men om at udvide din forståelse af teknikker og principper, så du mere nøjagtigt kan beskrive, undersøge, vurdere og kvalificere en løsning.

✨ Også når du bruger AI som sparring ✨

Hvor skal vi ende?

Mål

Implementering af et Figma-design i Astro

Hvor er du lige nu?

Udgangspunkt

Hvad skal vi genopfriske? Brug 2 min med sidemakkeren

Hvad synes I, der er svært/vil I blive bedre til?
I hvilke situationer har I siddet fast med UI (HTML, CSS)?

Hvor er du lige nu?

Få UI’et til at spille (6-8 min)

Løs det, som du ville gøre normalt. Der er ikke én rigtig løsning.

Åbn opvarmningsøvelse

Kort refleksion

Brug 2 min. med sidemakkeren...

Hvad kunne du gøre uden at tænke ret meget?
Hvor begyndte du at prøve dig frem?
Hvad sad du fast i?
Hvad vil du gerne blive bedre til?

Flex vs. Grid
calc() og custom properties
Tailwind (andre frameworks)
animation scroll, pseudo-elementer, @property

Hvad kunne du tænke dig, at vi nåede igennem?

Skal vi love hinanden noget?

Hvor burde vi være?

Ifølge frontend-miljøet

Layout: Container queries, Subgrid
CSS-struktur: Nesting, @layer, @scope, :has() og container style queries.
Typografi: text-wrap: balance/pretty og text-box til præcis tekstjustering.
Farver: P3, Relative Colors (RCS), oklch(), oklab(), color-mix().
Scroll: Scroll snap, scrollstyrede animationer og scroll-state() queries.
Animation: View Transitions, linear() easing, animer til `auto`.
CSS-logik: @function, if() og typed attr().
Misc: Invokers, stylebare <select>, shape(), sibling-index() og sibling-count().