CRAFTING UI

3. semester, MMD

Frontend Design

Introduktion til temaet

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

Hvad skete der undervejs?

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().