CoderDojo #44 @Rozet: Webdev!

Hoi Allemaal!

Leuk dat jullie er weer zijn. Voor deze CoderDojo hebben we allemaal materiaal klaargezet
om dingen te bouwen met de programmeer talen: HTML en CSS (en JavaScript). Wanneer je
met je browser naar een website surft (b.v. FireFox, Chrome of Edge), dan zijn de pagina’s
meestal geschreven in deze 3 programeer talen.

Alleen…, zie je dat meestal niet! Wat je ziet is het “resultaat”, of de “afbeelding” van deze talen.
Wil je toch de programeer talen zien? Dat kan in de meeste browsers door,

Nu kan je verschillende dingen met deze talen bouwen,

Vandaag hebben we dingen klaarliggen om webpagina’s of spreekbeurten te bouwen.
Aan het begin kan je inlog gegevens vragen aan een Mentor, zodat je in je eigen “WebTinq” omgeving
kan gaan bouwen!

  • Mocht je vandaag niet zoveel zin hebben om met webpagina’s enzo aan de slag te gaan,
    voel je dan vrij om b.v. met Scratch aan de slag te gaan.
  • Mocht je vandaag je HTML/CSS/JavaScript bouwsel niet afkrijgen? Een andere keer kan je er zo weer mee verder! (Je WebTinq account blijft 1 jaar geldig)

Wij hopen dat je veel plezier hebt vanmiddag en wanneer je vragen hebt, of wat hulp nodig hebt dan horen we het graag!

Groetjes, Maud, Floris, Kai En Fokke!

De bouwplaats: WebTinq

Code schrijven in HTML, CSS en JavaScript kan in verschillende “bouwplaatsen”/werkomgevingen, b.v. in,

Voor vanmiddag hebben we voor jullie allemaal een WebTinq bouwplaats klaarstaan, waarin “alles” kan:

  • code schrijven en bewaren,
  • het resultaat zien,
  • het resultaat “publiceren” (zodat anderen het ook kunnen zien)

Hoe te beginnen?

Er zijn heel veel verschillende manieren waarop je kan leren programmeren. Bijvoorbeeld door,

  • een uitleg/tutorial te volgen over de “basis” (en daarop zelf door te bouwen?),
  • een voorbeeld op het internet op te zoeken en die proberen na te maken (niet perse “de basis”),
  • een combinatie van beide,
  • ?een andere manier?

Hoe ik het liefst iets leer verschilt per onderwerp en zelfs per dag! En het verschilt ook per persoon. En… door al deze mogelijkheden is het soms moeilijk om door de bomen het bos te zien, te bepalen waar je gaat beginnen. Mocht je even niet weten hoe te beginnen? Kijk dan eens naar de linkjes hieronder, of vraag een CoderDojo mentor?

CategoryOnderwerpLinkExtra
Basis: Stap-Voor-StapCSSprojects.raspberrypi.org – Geheimzinnige briefDe uitleg maakt gebruik van de bouwomgeving “Trinket.io”. Wil je dan je werk opslaan, dan moet je zelf een “account” aanmaken. Wil je het in WebTinq maken? Dat kan ook, vraag dan even een Mentor om hulp!
Basis: Stap-Voor-StapCSSprojects.raspberrypi.org – Tijdschrift” ”
Basis: introHTMLcoderdojo-arnhem – HTML
Voorbij Basis: VoorbeeldenCSSw3schools.com – How TO CSS Flip CardEngels
Voorbij Basis: Stap-Voor-Stap/VoorbeeldenCSSw3schools.com – CSS Navigatie MenuEngels
BouwplaatsWebTinqwebtinq.nl/Gebruikersnaam en wachtwoord krijg je van een mentor, is een jaar geldig
InformatieDierenrangers.wwf.nl – Spreekbeurtenb.v. over de tijger, olifanten, etc.
InformatieDieren – Aardvarkenburgerszoo.nl – AardvarkenHet Arnhemse (Feest)Aardvarken
InformatieSchoolTV – Spreekbeurt Info
Informatienl.wikipedia.org
Basis: VoorbeeldenHTMLwebtinq.nl/test-voorbeelden-coderdojo – Voorbeeld 1: HTML “tags”o.a. met “Ctrl + Shift + i” kan je de achterliggende code zien!
Basis: VoorbeeldenCSSwebtinq.nl/test-voorbeelden-coderdojo – Voorbeeld 2: Vierkant en Cirkelo.a. met “Ctrl + Shift + i” kan je de achterliggende code zien!
Basis: VoorbeeldenCSSwebtinq.nl/test-voorbeelden-coderdojo – Voorbeeld 3: Positie” “
Basis: VoorbeeldenHTML/JavaScriptwebtinq.nl/test-voorbeelden-coderdojo – Voorbeeld 6: JavaScript en interactie met een “user”” ”
Basis: VoorbeeldenHTML/CSSwebtinq.nl/test-voorbeelden-coderdojo – Voorbeeld 5: Volledige Webpagina” ”
Voorbij Basis: Voorbeelden HTML/CSS/JavaScriptwebtinq.nl – Voorbeeld: Spreekbeurt Kangoeroe” “
Basis: VoorbeeldenCSSwebtinq.nl: Wat ziet CSS in HTML?