Dette er en workshop som skal holdes i forbindelse med Booster Kids 2024. Aldersgruppen er 13+, og temaet er hvordan begynne å lage helt enkle nettsider med bare HTML, CSS, og JavaScript.
- Hva er en nettside?
- HTML
- CSS
- JavaScript
- Sette alt sammen
Formålet med denne workshopen er å få en helt grunnleggende introduksjon i hvordan nettsider er bygget opp, og hvordan man kan, svært enkelt, begynne å lage nettsider som har både struktur, form, farge, og oppførsel, ved å bare benytte enkel HTML, CSS, og JavaScript.
Noen andre større, men relaterte, problemstillinger er å regne som utenfor scope, som for eksempel dette med versjonskontroll, moderne frontend-rammeverk (React og co), uthenting av data fra eksterne API, persistering av data, eller hvordan man faktisk hoster en nettside. Fokuset bør være på ren HTML.
Det bør være veldig lett å komme i gang, målet er at man bare trenger å opprette .html-filer lokalt på maskinen, og åpne de i en nettleser for å se resultatet. (Bør vi etterhvert introdusere dette med at man kan trekke ut CSS og JavaScript i separate filer?)
Workshopen er ment for tenåringer, og det er minimalt med forkunnskaper som er krevd. Hvordan åpne, opprette og redigere tekstfiler lokalt på en maskin er det eneste man bør kunne på forhånd. Vi bør vise, med live-koding, hvordan man kan løse oppgavene.
Programmeringsdelen bør være enkel, og det bør være rikelig med eksempler som viser hvordan man gjør ting. Programmering i seg selv er et kaninhull, og vi burde være litt forsiktig slik at det ikke blir overveldende mye informasjon. (Bør kanskje ikke forvente at alle kommer gjennom alt?)
Det bør være rom for kreativitet og lek, oppgavene bør være såpass åpne at de kan lage det de selv ønsker, innenfor gode nok rammer til at de er nødt til å bruke konseptene som blir introdusert.
Denne workshopen bør ikke kreve mer enn en laptop, en nettleser, og et eller annet program for å redigere filene. (Er det lurt å anbefale verktøy som Visual Studio Code?)
Workshopen bør være lett tilgjengelig på nettet, uten at man trenger å klone ned noe git-repo. (Bør vi ha løsningsforslag / eksempler for hver oppgave?)
Bør være på norsk, og språket bør være konsist og enkelt.
-
Første sesjon, HTML og CSS - kl 12:00 til 13:30
- 10 min - Introduksjon
- 10 min - Teknisk oppsett, finne workshopen, lage filer, redigere filer
- 30 min - HTML (med oppgaver)
- 10 min - Pause / buffer-tid
- 30 min - CSS (med oppgaver)
-
Lunch 13:30 til 14:15
-
Andre sesjon, JavaScript - kl 14:15 til 16:15
- 10 min - Introduksjon programmering
- 20 min - Variabler, funksjoner, typer
- 30 min - HTML-manipulasjon med JavaScript
- 10 min - Pause / buffer-tid
- 20 min - Oppgaver
- 30 min - Buffer-tid / fritid for å videreutvikle