HTML en CSS met Codecademy

Een groot deel van je tijd bij interactief zal besteed worden aan het snel en goed kunnen bouwen van een website. Wij zijn van mening dat je betere en mooiere ontwerpen kunt maken wanneer je weet hoe de boel in elkaar steekt. Dat betekent heel concreet dat je in leerjaar 2 in de eerste 8 weken 8 uur in de week HTML en CSS les gaat krijgen.

De opdrachten op deze pagina zijn niet bedoeld om je een voldoende of onvoldoende te geven maar om jou inzicht te geven in het soort lessen wat je zult gaan krijgen. Je kunt de volgende tutorials doen:

HTML leren via Codecadamy

Volgens schooljaar krijg je gewoon klassikaal uitleg maar omdat we nu niet weten van wie je les krijgt sturen we je naar website Codecademy. Hier kunt je heel eenvoudig stap-voor-stap HTML leren en meteen oefeningen maken. De oefeningen worden meteen beoordeeld door de site zelf. Lukt het niet? Dan krijg je allerlei aanwijzingen om je weer op pad te helpen. Met de basiskennis die je hier leert kun je een eenvoudige site maken.

 

Aanmelden bij Codecademy

Ga naar https://www.codecademy.com en registreer jezelf met je school e-mail. Gebruik een makkelijk te onthouden password zoals je schoolpassword.

Via Codecademy kun je heel makkelijk allerlei code leren.

Via Codecademy kun je heel makkelijk allerlei code leren.

 

De les “Make a website”

Ga vervolgens naar https://www.codecademy.com/learn/make-a-website waarin je stap voor stap een eenvoudige website leert maken. Je leert hierin hoe je afbeeldingen en tekst in je pagina plaatst.

De les "Make a website"

In de les “Make a website” leer je een eenvoudige website maken. Dit gebruik je als basis voor je eigen website.

Hoe helpt Codecademy jou met leren?

Wanneer je een cursus start dan kom je in dit scherm. Links zie je de aanwijzingen. In het midden (grijze vlak) de ruimte waarin jij je code typt. En rechtsbovenin zie je wat er gebeurt wanneer je typt.

Zo ziet je scherm er bij wanneer je met een cursus bezig bent.

Zo ziet je scherm er bij wanneer je met een cursus bezig bent.

Je krijgt instructies die je moet opvolgen. Indien je vast loopt kun je om extra hulp vragen. Soms staat hier dan de code die je kunt kopiëren en plakken en soms staat hier extra uitleg.

Instructies

Instructies zijn de echte opdracht die je moet doen.

 

En wanneer je een fout maakt?

Bij codecademy werkt het zo dat je een melding krijgt wanneer je een fout hebt gemaakt. Ook wordt er duidelijk aangegeven waar die fout zich bevindt zodat je deze meteen kunt oplossen.

De rode stipjes geven duidelijk aan op welke regel nog een fout zit.

De rode stipjes geven duidelijk aan op welke regel nog een fout zit.

aanwijzing

Of je krijgt onderin een aanwijzing wanneer je een opdracht nog niet voldoende hebt afgerond.

 

Wanneer je iets qua code hebt gedaan kun je op de groen Run knop drukken. Codecademy controleert dan of alles goed is.

Druk op RUN om te zien of je het goed hebt gedaan.

Druk op RUN om te zien of je het goed hebt gedaan.

Hoe lang duurt deze cursus?

Circa 30 minuten.

 

Zelf HTML’en

Lukt het je en heb je nog wat tijd over?
Maak dan een website over een onderwerp naar keuze waarin je de volgende technieken verwerkt:

  1. Je maakt de website zelf met HTML
  2. Je stijlt de website met CSS
  3. Je website heeft een achtergrondkleur of een achtergrond afbeelding
  4. Er staat tekst op de website
  5. Er staan plaatjes op de website
  6. Je hebt 2 linkjes gemaakt; 1 naar een andere pagina van je website en 1 naar een externe website

Dit moet je allemaal hebben gehad bij de Codecadamy les.

Spelen met HTML

Wil je liever niet meer zo veel typen? Dan kun je ook deze website gebruiken en hierin wat zaken wijzigen (bijvoorbeeld de afbeeldingen of de tekstkleuren.

Download het zip-bestandje ‘simpel html.zip’. Hierin vind je een aantal documenten:

  1. Een HTML pagina, index.html. Dit is een document met gewone tekst.
  2. Een mapje css met style.css. Dit is het opmaakdocument.
  3. Een mapje images met afbeeldingen.

 

Eerste oefening bij Discoveryland HTML

Gebruik dit bestand als basis voor je eigen site.

Je gaat met deze bestanden eens wat spelen.

  1. Download de bestanden naar je eigen studentenmap.
  2. Open index.html in Google Chrome of in Firefox
  3. Open style.css in Dreamweaver.
  4. Wijzig eens wat waarden in het style.css document. Sla style.css na zo’n wijziging op en ververs index.html in Chrome of Firefox. Wat zie je veranderen?
  5. Probeer eens de tekstkleur te wijzigen. Ook dit vind je in style.css.
  6. Probeer eens één of meerdere afbeeldingen aan te passen. Tip: zorg er dan voor dat jouw afbeeldingen even groot zijn (qua pixels) en hetzelfde heten. Dan gaat het vrij makkelijk.