Web Development I

Het OLOD Web Development I heeft als doel eenvoudige websites te maken door gebruik te maken van HTML5 en CSS.

Hieronder vind je de indeling van de lessenreeks. Per les vind je er de slides met de te kennen leerstof en een link naar een GitHub repository met de voorbeeldbestanden die gebruikt worden in de slides.

Het belangrijkste deel van dit OLOD zijn de oefeningen. Per les is er een link naar een GitHub repo met de opgaves van de oefeningen en de (eventueel) benodigde startbestanden voor die oefeningen.

Bij sommige lessen is er ook een repo met extra oefeningen en voor elke les is er een repo met een oplossing van de oefeningen.

Alle informatie over de benodigde software voor deze cursus.
Inleidende informatie over Web Development I
Interessante websites.
Video opnames van de lessen.

  • Les 1: HTML - basis deel 1 - CSS intro

  • Inhoud:

    • Surfen op het web​
    • Basisbegrippen HTML​
    • Een eerste website
    • Basisbegrippen CSS​
    • CSS toevoegen aan onze website​
    • Omgaan met files en folders
    • Introductie CSS selectors
  • Slides slideshow
  • Voorbeelden slidesfile_download
  • Oefeningenedit
  • Opgeloste oefeningenschool
  • Les 2: HTML - basis deel 2

  • Inhoud:

    • Logische indeling - semantiek
    • Tekst markeren
    • Lijsten
    • Links - hypertekst - bookmarks
    • Afbeeldingen
    • Validatie
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 3: HTML - Tabellen & Formulieren

  • Inhoud:

    • Tabellen
    • Rijen en cellen
    • Cellen samenvoegen
    • Formulieren
    • Werking formulieren
    • Form controls
    • Toegankelijkheid
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 4: CSS - basis deel 1

  • Inhoud:

    • Stijlregel
    • Soorten stylesheets
    • Kleuren
    • Tekst - typografie
    • Opmaak lijsten
    • Selectors
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 5: CSS - basis deel 2

  • Inhoud:

    • Reset stylesheet
    • Cascading - inheritance
    • WebFonts
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 6: Lay-out - basis boxmodel

  • Inhoud:

    • Weergave elementen
    • Boxmodel: ruimte verdeling
    • Extra opmaak
    • Writing mode - logical properties/values
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 7: Lay-out - Flex

  • Inhoud:

    • Kenmerken flexbox
    • Assenstelsel - instellingen
    • Uitlijnen
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 8: Lay-out in een raster - grid, Float, Position

  • Inhoud:

    • Kenmerken gridlay-out
    • Raster en eigenschappen
    • Richtingen
    • Uitlijnen
    • Floating elementen
    • Positionering elementen
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 9: Lay-out - responsive: pages & images

  • Inhoud:

    • Responsive webpages
    • Mobile first
    • Media query
    • Responsive images
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Les 10: CSS Animatie

  • Inhoud:

    • Wat is animatie
    • Transform
    • Transition
    • Animation
  • Slides slideshow
  • Voorbeelden slides file_download
  • Oefeningen edit
  • Opgeloste oefeningen school
  • Voorbeeldexamen

  • Inhoud:

    • Voorbeeld examen
    • Opgave
    • Startbestanden
    • Oplossing
  • Voorbeeldexamen startbestanden - opgave edit
  • Voorbeeldexamen oplossing school