Lektion 3 — HTML II og CSS

Web-sporets anden lektion: formularer og styling. I bruger CSS fra forberedelsen på jeres egen side.

Forberedelse

Det forventes, at du har forberedt dig til undervisningen — freeCodeCamp HTML Fundamentals (uden <script>), tre What is CSS-lectures og Cafe Menu til trin 28 (ca. 1 time).

Forberedelse til Lektion 3

Program (4 timer)

Tid Blok Indhold
10 min Gennemgang HTML Fundamentals: id vs class, div, entiteter kort
35 min Gennemgang Opsamling på Cafe Menu: stylesheet, type/class, width, margin: auto. Padding/box model (til jer der stoppede ved 28). position: fixed og enheder kort
15 min Quiz HTML Fundamentals (id/class/div) + CSS fra Cafe Menu
30 min Gennemgang <form>, <input>, <label>, <button> — nyt (ikke i forberedelsen); det, Lektion 1 lovede
10 min Quiz Formularer — kort tjek før øvelsen
40 min Øvelse 1 Style jeres login-/formularside i VS Code: eksternt stylesheet, class-selectors, farve, afstand. Ikke mere Cafe Menu
40 min Øvelse 2 Gruppearbejde: Mockup til D1 — style forsiden og skitsér 1–2 skærme mere med HTML + CSS. Hjælp rundt i grupperne

Pauser lægges ind undervejs.

Slides

Forelæsningsslides

Øvelser

De to øvelser står samlet her, med mere uddybning end på slidesne:

Øvelser til Lektion 3

Efter lektionen kan du

  • forklare hvornår du bruger id, class og div
  • forklare forskellen på HTML (indhold) og CSS (udseende)
  • koble en HTML-side til en separat styles.css
  • style med type- og class-selectors (h1, .menu)
  • bruge width, farve, margin (inkl. auto) og padding
  • bygge en formular med <form>, <label>, <input> og <button>
  • anvende det på jeres projekts login- eller formularside