06 Frontend

Med forbehold for mindre ændringer

• Læringsmål

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

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)

Artikler

Læs om hvordan man laver god UX/UI.

1. Gestaltlove
2. Usability heuristics

Figma

Download og installer mockup værktøjet Figma:

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

Vi får besøg af en multimediedesigner som viser os rundt i Figma

Her er det projekt, som Laura lavede i dag: Portfolio

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. Projektet fra HTML video
3. Skim dette dokument om Paper Prototyping af Caroline Snyder
4. Læs denne opsummering i vores værktøjskasse: Paper Prototyping
5. Se en ultrakort video om Paper Prototyping

1. Introduktion til paper prototyping og “tænke-højt-test”
2. Introduktion til HTML/CSS

• Carpool

Se disse videoer:

1. RWD: 10 basics you need to know (6:37)
2. Flexbox in 15 minutes. Stop evt video efter 10 min. Det bliver ret langhåret! Eller skip hurtigt fra 10 - 12. minut og se slutningen.
3. Media queries in 7 minutes

1. UX/UI + heuristisk vurdering af jeres Carpool designs
2. Flexbokse og media queries
3. Flexbox Froggy (flexbox cheatsheet)
4. Carpool Responsive

Responsive portfolio

• Diverse links og materialer om Frontend