Webdesign cursusoverzicht

Basisbeginselen van webontwikkeling

HTML inleiding: Basisstructuur en fundamenten van HTML.
Elementen & Attributen: Kerncomponenten van HTML.
HTML-structuur, nesting: Opbouw en organisatie van HTML-elementen.
Mappenstructuur

HTML elementen en structuur

Het img-element, afbeeldingen koppelen en stylen: Uitgebreide uitleg over het gebruik van afbeeldingen in HTML, inclusief het koppelen van afbeeldingen, toepassen van responsieve ontwerptechnieken en het gebruik van <figure> en <figcaption> voor het toevoegen van context en bijschriften bij afbeeldingen.
Het a-element, links en koppelingen maken: Navigatie en hyperlinks in HTML.
Het div-element: Algemene container voor HTML-elementen.
Het span element: Inline container voor tekst en elementen.
Semantische elementen: Betekenisvolle HTML-tags voor betere structuur en toegankelijkheid.
HTML tabellen: Essentieel voor het presenteren van gestructureerde data.
Inbedden van media: Integreren van video's en andere media in webpagina's.
HTML lijsten: Geordende en ongeordende lijsten in HTML.

CSS: styling en layout

Wat is CSS: Basisbegrip van CSS en zijn rol in webontwikkeling.
CSS toevoegen aan een HTML: Methoden om CSS te integreren in HTML-documenten.
Class en ID Attributen: Het gebruik van classes en id’s om specifieke HTML-elementen te selecteren.
CSS Selectors: Verschillende manieren om HTML-elementen te selecteren voor styling.
Eenheden in HTML en CSS: Het belang van meten en schalen in webdesign.
CSS Eigenschappen voor Tekst: Het stylen van tekst in HTML met CSS.
Externe Lettertypen: Integreren van aangepaste lettertypen in webontwerp.
CSS Kleurdefinities: Hoe kleuren te definiëren en toe te passen in CSS.
Block, Inline en Inline-Block Elementen: Begrip van verschillende display-eigenschappen in CSS.
Het CSS Box Model: Het fundamentele concept voor layout en ontwerp in CSS.
Border, Margin en Padding: Het bepalen van ruimte en grenzen in CSS-layout.
Background-image: Achtergrondafbeeldingen gebruiken in CSS voor visueel aantrekkelijke layouts.
CSS Gradients: Leer kleurverlopen gebruiken voor achtergronden, overlays en visuele accenten.
CSS Position: Het gebruik van verschillende positioneringsmethoden in CSS.
Basis Flexbox: Flexibele lay-out ontwerpen met CSS Flexbox.
Hero-secties opmaken: Grote headersecties ontwerpen met achtergrondafbeeldingen, overlays en typografie.
Pseudo Classes: Dynamische stijlen toepassen zoals :hover en :focus.
Pseudo-elementen: Extra stijlelementen toevoegen met ::before en ::after.
Variabelen: Herbruikbare waarden instellen met CSS Custom Properties.
CSS Clamp: Responsieve waarden instellen met een minimum, flexibele tussenwaarde en maximum.
CSS-animaties: CSS-animaties met transform en transition.

Bij webontwikkeling gebruik je niet enkel HTML, CSS en JavaScript, maar ook hulpmiddelen die je workflow versnellen en je projecten overzichtelijk houden. Hieronder vind je een verzameling best practices en tools die je in elk project kan toepassen.

Ontwikkelingshulpmiddelen en best practices

1. Basiskennis web & tools

Hoe het Internet werkt: Technische en operationele aspecten van het internet, inclusief IP-adressen, routing en protocollen.

2. Visual Studio Code

Visual Studio Code downloaden en configureren: Downloaden en instellen van de code-editor.
Een nieuw project starten in VS Code: Uitleg over het openen van een projectmap, en het aanmaken en koppelen van HTML- en CSS-bestanden.
VS Code slimmer maken met extensies: Aanbevolen uitbreidingen zoals Live Server, Path Intellisense en Prettier voor een vlottere workflow.
Werken met IntelliSense in VS Code: Automatische suggesties voor HTML, Bootstrap-klassen en eigen CSS-klassen/ID’s.
Werken met relatieve paden: Hoe bestanden in dezelfde map, submappen of bovenliggende mappen correct te linken.

3. Praktische webontwikkeling

Google Fonts implementeren: Leer hoe je Google Fonts gebruikt voor aantrekkelijke en leesbare typografie.
Afbeeldingen klaarmaken voor web: Optimalisatie van afbeeldingen voor online gebruik.
Search Engine Optimalisatie: Technieken om de zichtbaarheid van websites in zoekresultaten te vergroten.
.htaccess bestand: Instellingen en configuraties voor Apache-webservers.
XAMPP – PHP installeren: Lokale serveromgeving voor PHP-ontwikkeling.
CodePen: Online tool voor front-end ontwikkeling.

4. Werken met de server

Terminal: Introductie tot de terminal en basiscommando’s in Linux.
VS Code → Raspberry Pi (upload & testen): Projectmap kopiëren naar de klasserver en testen in de browser.

Bootstrap

Basiscursus Bootstrap: Bootstrap CSS framework.