Frontend (30 ECTS)

Valgfag, 3. semester, Guldbergsgade

Undervisere

Opbygning

  • 12 uger fordelt på 3 forløb
    • 3 bundne forudsætninger
  • 3 ugers eksamensprojekt

16 uger

Opbygning

Frontend Logic

1. tema

Klaus Mandal (klmh)

Et intensivt og praksisnært forløb, hvor de studerende lærer at tænke som frontend-udviklere og skrive struktureret, interaktiv kode.

Formål

Gøre de studerende fortrolige med programmering af interaktive brugergrænseflader og moderne JavaScript-praksis.

Frontend Logic

Fokus og indhold

  • JavaScript som værktøj til at omsætte visuelle idéer til funktionel kode

  • DOM-manipulation, funktioner, arrays, events og logik

  • Git & GitHub til versionsstyring og samarbejde

  • “Micro-cases” med daglige øvelser

  • Afsluttende individuel opgave: To-Do-app

Frontend Logic

Frontend Logic

To-Do app

Frontend Logic

Eksempel på en uge

Frontend Logic

Eksempel på en uge

Frontend Design

2. tema

Dannie Vinther (davi)

Et designteknisk forløb, hvor studerende lærer at oversætte visuelle designidéer til moderne, kodede brugergrænseflader.

Frontend Design

Formål

At bygge bro mellem design og kode — at kunne omsætte visuelle koncepter til funktionelle og brugervenlige (herunder tilgængelige) grænseflader. Her kombineres designprincipper med tekniske færdigheder i HTML, CSS og JavaScript.

Frontend Design

Fokus og indhold

  • Fra visuelle koncepter til kodede grænseflader

  • Designprincipper, animation og webtilgængelighed

  • Integration af Figma-designs i Astro (komponentbaseret tilgang)

  • Design tokens, typografi, farver og bevægelse

  • Afsluttende opgave: Implementér et Figma-design

Frontend Design

Animation

Frontend Design

Responsivitet og layout

Frontend Design

Eksempel på en uge

Frontend Design

Eksempel på en uge

Frontend Frameworks

3. tema

Troels Rasmussen (tras)

Et praksisnært forløb i moderne frontend-frameworks, hvor de studerende bygger datadrevne applikationer selvstændigt og i teams/netværk.

Frontend Frameworks

Formål

At gøre de studerende klar til praktik og job ved at arbejde med moderne frameworks som Next.js samt biblioteker som Zod, React Hook Form, Zustand mm.

Frontend Frameworks

Fokus og indhold

  • React og Next – CSR vs SSR (page) vs RSC (component)

  • Forståelse for datahåndtering, API-integration og lokal lagring.

  • Opbygning af avancerede brugergrænseflader med validering og feedback (fejl- og loading-states)

  • Teamsamarbejde og versionsstyring

  • Afsluttende gruppeopgave: Simple shop

Frontend Frameworks

React / Next.js

Frontend Frameworks

React / Next.js

Frontend Frameworks

React / Next.js

Frontend Frameworks

React / Next.js

Frontend Frameworks

React / Next.js

Frontend Frameworks

React / Next.js

Frontend Frameworks

Eksempel på en uge

Frontend Frameworks

Eksempel på en uge

Eksamensprojekt

4. tema

Et samlet bevis på, at den studerende kan gå fra idé og design til færdig applikation – professionelt og selvstændigt.

Eksamensprojekt

Formål

At samle og demonstrere kompetencerne fra de tre forløb i et afsluttende projekt, der afspejler professionel praksis.

Eksamensprojekt

Fokus og indhold

  • Gruppearbejde (2-3 studerende)

  • Helhedsorienteret frontend-løsning (HTML, CSS, JS, framework)

  • Fokus på brugervenlighed, API-integration og feedback i brugeroplevelsen.

  • Dokumentation og individuel screencast

  • Mundtlig eksamen på baggrund af projektet

Tailwind

Kriterier og vurdering

Det skal se godt ud, det skal virke, det skal føles rigtigt

Eksamensprojekt

Valgfagets mantra

Branchens behov

Indholdet er i høj grad inspireret af branchens behov og samtidig formet af den stadigt skiftende udvikling, der konstant driver faget fremad.

Kilder

  • Digitale bureauer
  • "frontenders.dk" (en facebook gruppe)
  • Frontend Masters
  • Tech-community'et
  • mm.

Et vigtigt mål...

At opbygge en vis tolerance for frustration og blive komfortabel med udfordringerne i webudvikling, så læringen prioriteres over at fokusere på resultaterne.

i forhold til de studerende

Hvad vi forventer...

  • Nysgerrighed
  • Engagement
  • Indstilling

i forhold til de studerende

Forudsætninger

  • Solid forståelse for HTML og CSS – struktur, layout og visuel styling

  • Forstår designprincipper, webtilgængelighed og visuel struktur

  • Grundlæggende forståelse for JavaScript – variabler, funktioner, betingelser, løkker og events

  • Kan hente og vise data (fx via fetch() og JSON)

  • Forstår GET-operationer fra et REST API

  • Har kendskab til komponentbaseret udvikling via Astro

i forhold til de studerende

Karrieremuligheder

  • Frontend-udvikler
  • Web-designer
  • UI-engineer

Spørgsmål...