HTML CSS Bootstrap (DEV-HTML)

Wil je snel responsive websites bouwen? Leer in deze training hoe je met HTML, CSS en Bootstrap gestructureerde, mobielvriendelijke webpagina’s maakt met Flexbox, Grid en interactieve componenten.

Wil je leren hoe je professionele, responsive websites bouwt? In deze driedaagse training ontdek je hoe je HTML, CSS en Bootstrap gebruikt om gestructureerde, mobielvriendelijke webpagina’s te ontwikkelen. Je leert semantische HTML, geavanceerde CSS-technieken en hoe je met Bootstrap sneller en efficiënter webinterfaces creëert.

Wat leer je in deze training?

HTML-structuur – Semantische elementen, formulieren en tabellen.
CSS-opmaak – Flexbox, Grid, animaties en responsieve ontwerpen.
Bootstrap-framework – Grid-systeem, componenten en utility classes.
Webdevelopment-tools – Werken met browser DevTools, Emmet en Live Server.
Accessibility & best practices – ARIA-labels, contrastcontroles en SEO-optimalisatie.

Deze training is perfect voor beginners, designers en marketeers die webdevelopment willen beheersen. Met praktijkgerichte opdrachten en moderne tools bouw je functionele en visueel aantrekkelijke websites. De training bevat Engelstalig lesmateriaal en wordt gegeven door een Nederlandstalige docent.

Virtueel beschikbaar

Iedere maand starten

Erkende certificaten

Door heel Nederland

Voor wie

Programma

Dag 1: HTML Basis en CSS Introductie

Werkomgeving opzetten: VS Code, browserdeveloper tools (Chrome DevTools).
HTML5-semantiek: <!DOCTYPE html>, <header>, <nav>, <section>, <article>, <footer>.
Elementen: tekst (<h1>-<h6>, <p>), lijsten (<ul>, <ol>, <li>), media (<img>, <video>).
Formulieren: <form>, <input>-types (text, email, checkbox), <button>, validatie.
CSS-basis: selectors (class, id), box model (margin, padding, border), kleuren (hex, rgb).

Dag 2: Geavanceerde CSS en Responsive Design

Flexbox: display: flex, justify-content, align-items, flex-direction.
CSS Grid: grid-template-columns, grid-gap, fr-eenheden.
Responsive technieken: media queries (@media (max-width: 768px)), mobile-first vs desktop-first.
Transities en animaties: transition, @keyframes, transform (rotate, scale).
CSS-variabelen: :root, var(--primary-color).

Dag 3: Bootstrap Framework en Afronding

Bootstrap installatie: CDN-link, npm of download.
Grid-systeem: container, row, col-* (breakpoints: sm, md, lg, xl).
Componenten: navbar, cards, carousel, modals, dropdowns.
Utilities: spacing (mt-3), kleuren (bg-primary, text-white), flex utilities (d-flex).
Customizen: Sass-variabelen overschrijven, themekleuren aanpassen.

Programma: