Cursus HTML en CSS: responsieve, toegankelijke websites bouwen

Wat je leert in 8 lessen

1. 1

   Browsers, servers en HTTP

   Begin hier

   Leg uit wat er gebeurt tussen het intypen van een URL en het verschijnen van een pagina, met browsers, servers, HTTP-verzoeken en HTTP-antwoorden en de rollen van HTML, CSS en JavaScript.

   5 leerdoelen

   Wat je leert

   1. 1.Beschrijf hoe een webpagina op je scherm verschijnt
   2. 2.Lees webadressen en domeinnamen
   3. 3.Lees HTTP-verzoeken, HTTP-antwoorden en statuscodes
   4. 4.Leg de rollen van HTML, CSS en JavaScript uit
   5. 5.Stel je hulpmiddelen in en inspecteer bestaande webpagina's
2. 2

   HTML-elementen en attributen

   Structureer webpagina's met HTML-elementen en attributen en gebruik koppen, alinea's, lijsten, links, afbeeldingen en semantische elementen.

   5 leerdoelen

   Wat je leert

   1. 1.Schrijf correct opgebouwde HTML-documenten
   2. 2.Structureer tekst met koppen, alinea's en lijsten
   3. 3.Verbind pagina's met links en maak navigatie
   4. 4.Voeg afbeeldingen toe die iedereen kan begrijpen
   5. 5.Deel pagina's in met semantische elementen
3. 3

   Webformulieren, tabellen en media

   Maak formulieren met invoervelden met labels en validatieattributen, presenteer gegevens in tabellen en sluit audio en video in.

   5 leerdoelen

   Wat je leert

   1. 1.Maak formulieren die de juiste informatie verzamelen
   2. 2.Controleer invoer met ingebouwde validatie
   3. 3.Presenteer gegevens in toegankelijke tabellen
   4. 4.Voeg audio en video aan een pagina toe
   5. 5.Sluit inhoud uit andere bronnen in
4. 4

   Webpagina's vormgeven met CSS

   Geef pagina's vorm met CSS-selectors, de cascade en het boxmodel en bepaal kleuren, lettertypen en tussenruimte.

   6 leerdoelen

   Wat je leert

   1. 1.Schrijf CSS en bekijk hoe de browser die toepast
   2. 2.Selecteer de elementen die je wilt vormgeven
   3. 3.Voorspel welke stijl voorrang krijgt met de cascade, specificiteit en overerving
   4. 4.Noteer kleuren en kies eenheden
   5. 5.Bepaal de afmetingen en tussenruimte van elementen met het boxmodel
   6. 6.Geef tekst, lijsten, links, achtergronden en randen vorm
5. 5

   CSS-lay-outs met flexbox en grid

   Deel pagina's in met de normale documentstroom, positionering, flexbox en CSS-grid en kies de juiste methode voor een bepaalde lay-out.

   5 leerdoelen

   Wat je leert

   1. 1.Begrijp hoe boxen in de documentstroom worden geplaatst en hoe display dit verandert
   2. 2.Positioneer elementen met de position-eigenschap
   3. 3.Maak eendimensionale lay-outs met flexbox
   4. 4.Maak tweedimensionale lay-outs met CSS-grid
   5. 5.Kies en combineer lay-outmethoden voor webpagina's in de praktijk
6. 6

   Responsief webontwerp

   Laat pagina's werken op telefoons, tablets en desktops met de viewport-metatag, relatieve eenheden, mediaquery's en responsieve afbeeldingen.

   5 leerdoelen

   Wat je leert

   1. 1.Maak een pagina geschikt voor elk scherm
   2. 2.Pas lay-outs aan met mediaquery's
   3. 3.Laat componenten zich aan hun container aanpassen
   4. 4.Bied afbeeldingen en media die op elk scherm passen
   5. 5.Test en verbeter responsieve pagina's
7. 7

   Toegankelijke webpagina's

   Maak pagina's die werken met een toetsenbord, een schermlezer en inzoomen: gebruik semantische HTML, tekstalternatieven en voldoende contrast, en ARIA alleen waar dat nodig is.

   6 leerdoelen

   Wat je leert

   1. 1.Structureer pagina's met semantische HTML
   2. 2.Bied tekstalternatieven voor niet-tekstuele inhoud
   3. 3.Maak elke functie bedienbaar met het toetsenbord
   4. 4.Houd tekst en beeld goed leesbaar
   5. 5.Maak toegankelijke formulieren
   6. 6.Gebruik ARIA terughoudend en test je pagina's
8. 8

   Website publiceren en onderhouden

   Orden de bestanden van je website, valideer je pagina's en spoor er fouten in op, en publiceer je website via statische hosting met je eigen domein en HTTPS.

   6 leerdoelen

   Wat je leert

   1. 1.Orden een websiteproject en controleer de code
   2. 2.Spoor problemen op en los ze op met de ontwikkelaarstools van de browser
   3. 3.Zorg dat pagina's snel laden
   4. 4.Schrijf zoekmachinevriendelijke opmaakcode
   5. 5.Publiceer een website via statische hosting
   6. 6.Gebruik je eigen domein met HTTPS en houd de website in bedrijf