HTML, CSS & JavaScript Basics

Duur

3 sessies van 2–3 uur

Vorm

Online

Investering

$75 / SRD 2.850

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

3 sessies en 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)
Meerdere pagina's aan elkaar linken met een navigatie

Deel 2: CSS en Bootstrap

Sessie 2: Layout en styling met Bootstrap

Wat is CSS, en drie manieren om het toe te voegen (inline, internal, external)
Wat is Bootstrap en waarom gebruik je een framework
Bootstrap toevoegen via CDN (CSS en JS bundle) en een eigen style.css daarnaast
Syntax en selectors (element, class, id, groeperen, descendant)
Cascade en specificity (kort): wanneer overschrijft je eigen CSS Bootstrap
Kleuren (naam, hex, rgb())
Eenheden: px, %, rem
Het box model: content, padding, border, margin
Google Fonts toevoegen en instellen via font-family in style.css
Kleur utilities: text-primary, bg-light, bg-dark
Mobile-first denken
Bootstrap breakpoints (sm, md, lg, xl, xxl) en de onderliggende media queries
Flexibele afbeeldingen: img-fluid
Bootstrap grid: container, container-fluid, row, col (12 kolommen)
Responsive kolommen: col-12 col-md-6 col-lg-4, en gutters (g-3, gx-*, gy-*)
Flexbox utilities: d-flex, flex-column, justify-content-*, align-items-*, flex-wrap, gap-*, flex-fill
Tonen en verbergen per schermgrootte: d-none, d-md-block
Wanneer grid, wanneer flex utilities
Positionering: position-relative, position-absolute, fixed-top, sticky-top
Componenten: navbar (met hamburgermenu), buttons, cards
Pseudo-classes: :hover, :focus, :active (eigen aanpassing in style.css)
Afsluitende oefening: responsive pagina met navbar, hero, drie cards en footer, met eigen kleurenschema en Google Font

Deel 3: JavaScript

Sessie 3: 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)
if / else if / else
Loops: for, while
Functions: parameters en return
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

HTML, CSS & JavaScript Basics

Wat u leert

Volledig programma

Deel 1: HTML

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

Deel 2: CSS en Bootstrap

Sessie 2: Layout en styling met Bootstrap

Deel 3: JavaScript

Sessie 3: JavaScript-basis

Voorbereiding op de workshop

Een goede laptop

Een IDE installeren

Klaar om te beginnen?

Vragen over deze workshop?