CoderDojo #13: HTML, CSS en JavaScript

Op zaterdag 21 Oktober was er zoals elke maand weer een CoderDojo in het Rozet Arnhem. Hier komen elke maand ~20 kinderen (en ouders) en een paar mentoren bij elkaar om op een leuke en gezellige manier te leren programmeren. Deze week gingen we verder met websites bouwen met de programeertalen: HTML, CSS en JavaScript.

Omdat dit onderwerp al een keer langs gekomen was hebben we het deze keer wat anders gedaan. Voor de kinderen die nog nooit een website hadden gemaakt of nog liever bij de basis bleven was er een groep die gewoon lekker aan de slag kon. Voor de nieuwsgierige en durfals stond er deze keer wat extra uitdaging klaar.

WebTinq

Deze keer maakten we gebruik van een nieuwe service genaamd: WebTinq. Dit is een website bedacht door Louis Wolf speciaal voor nederlandse kinderen die bezig zijn met websites bouwen.

Er zijn enorm veel voordelen voor het gebruiken van WebTinq:

  • Online
    • Gewoon in je browser
    • Niks downloaden
    • Altijd beschikbaar
  • Delen
    • Website online/offline zetten
    • Link delen met je vrienden/familie
    • Toezicht vanaf een begeleiders account
  • Tools
    • Kleuren hulpje (handig voor CSS)
    • ‘Live’ programmeren (links je code, rechts je website)
    • Voorbeelden van stukjes code

WebTinq is nog redelijk nieuw dus het kan zijn dat nog niet alles zo feilloos werkt. Gelukkig is het Open Source dus als je een beetje kennis hebt van PHP (en Laravel) kun je zo aanschuiven.

Beginners

Voor de kinderen die voor het eerst een website bouwden of die het gewoon wat rustiger aan wilden doen gingen we aan de slag met HTML en CSS. We volgden de instructies die je hier kan vinden. Voor sommige was het begin wat lastig, maar al snel kregen we hele mooie websites op het scherm.

Uitdaging

Voor de de kinderen die het zichzelf wat moeilijker wilden maken hadden we speciale instructies geschreven. Die kun je hier nog nalezen. Hier gingen we in op wat moeilijkere CSS code en een beetje JavaScript. We maakten hierbij gebruik van Font Awesone icons, pseudo selectors (engels), schaduw & randen en transitie’s. Het begon wat moeizaam maar door de voorbeelden na te doen en gewoon te experimenteren zijn er hele mooie website’s uitgekomen.

Voorbeelden

Een paar website’s die gemaakt zijn:

Ben je al eens geweest bij CoderDojo of wil je nog komen en wil je alvast wat proberen? Was je aanwezig maar ben je je accountnaam vergeten? Of heb je al een website gemaakt op WebTinq en wil je die hier bij de voorbeelden zetten? Mail ons op contact@coderdojo-arnhem.nl.

← Terug