Tilbage til 3. semester
3. semester
Tema 13C: Frontend Design
Design og implementering af brugervenlige webinterfaces
Anchor Positioning
Anchor Positioning Fixed Button
Anchor Positioning Navigation
Basic Anchor Positioning
Basic Anchor Positioning w/ Popover
Basic Navigation
Animation
@property animation
@property Gradient animation
@property Switch Gradient
Conic gradient setup
Conic gradient setup steps
Counter()
Doughnut Chart
Doughnut Chart 2026
drawer animation
DVD animation-composition
Individuelle transforms
offset-path animation
Parallax
popover animation
popover animation steps
Scroll Header
Scroll timeline
View timeline
Cascade Layers
Cascade Layers in Astro
Cascade Layers override
Cascade Layers override (steps)
Weak Selector
Color
Bar Chart Colors
Color Mix
Color Mix Bar
Color Mix vs. RCS
Gradient updates
Relative Color
Relative Color 2
Relative Color Alpha
Relative Color Wheel
Container Queries
Wrapper
Wrappers
Container Query Units
Container Query color boxes
Container Query demo
Custom Properties
Boolean Prop
Inline svg
Nested Container Queries
Themed Sections
Themed Sections (steps)
Themed Sections Astro
Data Flow
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
Attr() basics
avatar ratings with attr()
Bar Chart
Bar Chart (solution)
Conic gradient setup
Conic gradient setup
Conic gradient setup (solution)
Conic gradient setup steps
Customer ratings with attr()
Doughnut Chart 2026
Gradient playground
Line Chart (solution)
Progress Bar
ratings with attr()
ratings with attr() (steps)
Star Rating
Stock info
Writing-mode
Defensive CSS
Flex Image
Flex Images
Flex Wrap
German Flex
Grid Fractions
Grid Image
Fundamentals
default link styles
inheritance
inheritance vs specificity
has
Icon Button
Sold out
img/no img
Before / After
Contents
Quantity query
Has Playground
Layout
Flex vs Grid
Flex vs Grid 2
Flex vs Grid 3
Flex vs Grid 4
Flex vs Grid 2 in steps
Flex vs Grid 3 in steps
Flex vs Grid 4 in steps
Flex vs Grid steps
Header alignment
Intrinsic sizing
Repeat auto-fill vs. auto-fit
Stack pattern
Math Functions
Linear mapping
Linear mapping (steps)
Math min() for responsive design
Max() padding
Min() i Grid
Nested radii
Typed Arithmetic
Typed Arithmetic 2
Misc
Code in the dark 1
Code in the dark 2
Opvarmningsøvelse
nesting
nth
nth (steps)
Rewrite
Rewrite (steps)
Pseudo-elements
Basic Pseudo-element
Basic Pseudo-element 2
Pseudo-element as background
Pseudo-element as background (steps)
scope
@scope
Proximity
Scroll
Snappy element
Snappy element (steps)
Sticky element
Select
Appearance base-select
selectors
:nth-child() Selectors
:nth-child(1 of ...) Selectors
spacing
Spacing Card
Subgrid
Fix alignment w/ subgrid
Subgrid Designer's Mind
Subgrid Makro-Layout
Subgrid naming lines
Subgrid pattern
Typography
cap
Cap Drop
Editorial Rhythm
Editorial Rhythm (Part 2)
Fluid Typography & Spacing
Gradient Text
lh
Prose Hierarki i Steps
Rounded Fluid Typography & Line-Height
Vertical text trimming
Vertical text trimming fallback
view-transition
test-vt
vt-test-2
vt-test-3