HTML, CSS & JavaScript Basics

Duur

5 sessies van 2–3 uur

Vorm

Persoonlijke 1-op-1 begeleiding, online

Investering

$75 / SRD 2.850 per sessie

Wat u leert

Deze workshop is opgebouwd uit drie delen: HTML voor structuur, CSS voor vormgeving en JavaScript voor interactie. Elke sessie bouwt voort op de vorige, zodat u aan het eind zelfstandig een responsive, interactieve website kunt bouwen.

Volledig programma

5 sessies, verdeeld over 3 delen. U doorloopt de stof stap voor stap, met praktijkoefeningen in elke sessie.

Deel 1: HTML

Sessie 1: HTML-basis, formulieren en meerdere pagina's

Hoe het web werkt (browser, server, bestand)
HTML, CSS en JavaScript: de drie rollen
VS Code en Live Server installeren
Bestanden en mappen organiseren, bestandsnamen
Documentstructuur: <!DOCTYPE>, <html>, <head>, <body>
Tags, elementen en nesting
Headings, <p>, <strong>, <em>, <br>, <hr>
Lijsten: <ul>, <ol>, <li>
Links en afbeeldingen (absolute en relatieve paden, alt)
Semantische tags: <header>, <nav>, <main>, <section>, <article>, <footer>
Attributes, id en class
Tabellen: <table>, <tr>, <th>, <td>, <thead>, <tbody>
Formulieren: <form>, <input>, <label>, <textarea>, <select>, <option>, <button>
Input types (text, email, password, number, checkbox, radio)
Ingebouwde validatie (required, minlength, pattern)
Basis toegankelijkheid
Meerdere pagina's aan elkaar linken met een navigatie

Deel 2: CSS

Sessie 2: CSS-basis en responsive design

Wat is CSS, en drie manieren om het toe te voegen
Syntax en selectors (element, class, id, groeperen, descendant)
Kleuren (naam, hex, rgb())
Tekststyling: font-family, font-size, font-weight, line-height, text-align
Google Fonts
Eenheden: px, %, rem
Het box model: content, padding, border, margin
box-sizing: border-box
border-radius
Viewport meta tag
Mobile-first denken
Flexibele afbeeldingen
Media queries en breakpoints
Pseudo-classes: :hover, :focus, :active
CSS-variabelen (:root, var())

Sessie 3: Layout

display: block, inline, inline-block, none
position: static, relative, absolute, fixed, sticky
Cascade en specificity
Flexbox: flex-direction, justify-content, align-items, flex-wrap, gap, flex: 1
Introductie CSS Grid
Wanneer Flexbox, wanneer Grid

Deel 3: JavaScript

Sessie 4: JavaScript-basis

Wat is JavaScript
JS koppelen (<script>, defer)
console.log en de Console-tab
Variabelen: let, const
Datatypes: string, number, boolean
Template literals
Operators (rekenen, vergelijken, logisch), === versus ==
if / else if / else
Loops: for, while

Sessie 5: Functions en de DOM

Functions: parameters en return
Arrow functions
Arrays: push(), length, index, for...of
De DOM
Elementen selecteren met querySelector
Wijzigen: .textContent, .style, .classList (add, remove, toggle)
Events en addEventListener: click, input, submit, mouseover