Giter VIP home page Giter VIP logo

nettsider-101's Introduction

Nettsider 101

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.

Innhold

  • Hva er en nettside?
  • HTML
  • CSS
  • JavaScript
  • Sette alt sammen

Formål

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.

Timeplan (sånn omtrent)

  • 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

nettsider-101's People

Contributors

goranbasso avatar eivindmjelde avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.