Ga naar hoofdinhoud

Inleiding

In dit vak leer je websites bouwen met de actuele webstandaarden: HTML voor de structuur, CSS voor de vormgeving en JavaScript voor de interactie. Je start met statische pagina's, maakt ze responsief en interactief, en eindigt met data uit een API.

Op deze pagina vind je hoe je start, hoe je deze cursus studeert en wat je per deel leert.

Zo start je​

  1. Installeer je editor met de stappen in IDE.
  2. Lees de coding guidelines. Die gelden voor alle labo's en voor het project.
  3. Volg de Startgids labo's en maak het eerste labo.
  4. Lees de projectinformatie zodat je weet waar je naartoe werkt.

Zo studeer je deze cursus​

Werk per labo, niet per theoriehoofdstuk. In het overzicht van de labo's zie je welke labo's we in welke lesweek maken. Open telkens de pagina van het labo dat aan de beurt is. Daar vind je onder Theorie precies welke hoofdstukken bij dat labo horen. Lees die, en maak daarna de oefeningen.

waarschuwing

Ga niet alle theorie in het menu van begin tot einde doorlopen. Dat is te veel in één keer en je raakt overweldigd. De labopagina's geven aan wat je wanneer nodig hebt.

Doorheen het semester pas je wat je leert toe in de projectopdracht: een responsieve webshop.

Wat leer je?​

Deel 1: HTML​

  • De bouwstenen: elementen, tags en attributen
  • Teksten structureren met semantische HTML
  • Lijsten, tekstmarkeringen en speciale tekens
  • Koppelingen, afbeeldingen en andere media
  • Tabellen en formulieren
  • Hoe een webpagina werkt: bestandsstructuur op de webserver, bestandsformaten en front-end testing

Deel 2: CSS​

  • De opbouw van stijlregels en waar je ze plaatst
  • Lettertypen, tekstopmaak en menu's
  • Eenvoudige en geavanceerde selectors
  • Het box model en de positionering van elementen
  • Kleuren en achtergrondafbeeldingen
  • Lay-out met flexbox en grid
  • Responsive webdesign met media queries, mobile first
  • Custom properties (variabelen) en nesting
  • Toegankelijkheid en UI/UX

Deel 3: JavaScript​

  • Wat JavaScript is en hoe je programmeert in een IDE
  • Fouten in je code opsporen
  • Variabelen, expressies en statements
  • Beslissingen en lussen
  • Arrays, objecten en functies
  • DOM-manipulatie
  • Event listeners

Deel 4: Asynchroon programmeren​

  • Callbacks en ES6 array-functies
  • Promises, async en await
  • Het JSON-formaat
  • HTTP-requests: GET en POST
  • API's aanspreken, eerst met een GUI (Postman) en daarna met JavaScript
  • Data uit een API tonen op je website