Frontend

Med forbehold for mindre ændringer!

Læringsmål for frontend

Mandag

  • Review af sidste uges fredagsopgave og hvad der ellers måtte opstå af spørgsmål.

Tirsdag (frontend intro)

Forberedelse

Der er en del forberedelse I skal have gjort inden tirsdag. Du skal have set 3 videoer, installere et mockup værktøj og have set et lynkursus i det:

Intro-videoer:

Se først disse 3 videoer. Det er hyggevideoer, som giver dig et overblik over www’s historie, hvad full stack web development er, og hvad UX/UI er. Altsammen vigtige begreber, som skaber begreber og kontekst for det vi skal i gang med.

  1. Intro til www’s historie (13:03)
  2. Hvad er full stack we development? (18:57)
  3. Hvad er UX/UI? (11:18)

Figma

Download og installer mockup værktøjet Figma:

  1. Opret en konto på Figma (gratis) med din cphbusiness email: Figma apply for educational
  2. Download og installer Figma Desktop App
  3. Se dette lynkursus om Figma (11:06)

I klassen (det gør vi sammen)

  1. UX/UI øvelse. Vi bruger Laws of UX og sætter os ind i begreberne.
  2. Overraskelse. Vi får besøg af en “kunde” som vil have en hjemmeside. Her er de indholdselementer vi skal bruge.
  3. Figma session.

Onsdag (CodeLab)

Forberedelse

Se disse videoer og kod med hele vejen. De er MEGET vigtige for at komme i gang med HTML og CSS:

  1. HTML basics - kod med tutorial. Eksempelkode fra videoen
  2. CSS basics - kod med tutorial
  3. Bonus: Hvis du er i stødet, så lav denne lille opgave for at teste din forståelse: Booking formular
  4. Skim dette dokument om Paper Prototyping af Caroline Snyder
  5. Læs denne opsummering i vores værktøjskasse: Paper Prototyping

I klassen til CodeLab

Torsdag (responsivt design)

Forberedelse

Se disse videoer:

  1. RWD: 10 basics you need to know (6:37)
  2. Flexbox in 15 minutes
  3. Media queries in 7 minutes

I klassen

Fredag (opgave)

Ressourcer


Table of contents


Top

2. semester forår 2025