Webdevelopment
Introductie
Welkom bij het eerste hoofdstuk van webdevelopment! Deze week maak je kennis met de basisprincipe...
Wat is webdevelopment?
Webontwikkeling of te wel 'webdevelopment' is het proces van het creëren en onderhouden van websi...
Ontwikkelomgeving opzetten
Stap 1: Installeer een Teksteditor Een teksteditor is een programma waarmee je code kunt schrijv...
Eerste stappen met HTML
De Basisstructuur van een HTML-document Alle HTML-documenten beginnen met een basisstructuur. Hi...
Opdracht: Maak je eigen Webpagina
Stap 1: Maak een Nieuw HTML-bestand Open je teksteditor. Maak een nieuw bestand. Sla het bes...
Opdracht: Uitbreiden van je Webpagina
Wat te doen? Voeg een extra paragraaf toe waarin je vertelt over je favoriete vakken op scho...
Afronding Introductie
In dit hoofdstuk heb je het volgende geleerd: Wat webontwikkeling is en het verschil tussen fr...
HTML en Introductie tot CSS
Je hebt je eerste stappen gezet in webontwikkeling en je eigen webpagina gemaakt met HTML. In dit...
HTML: Semantische Elementen
Wat zijn Semantische HTML-elementen? Semantische elementen geven betekenis aan je content. Ze be...
Inleiding tot CSS
Wat is CSS? CSS (Cascading Style Sheets) is een stylesheet-taal die wordt gebruikt om de present...
Opdracht: Stijl je webpagina met CSS
Deze opdracht gaat verder met de bestanden van het project uit het vorige hoofdstuk. Stap 1: Maa...
Styling van Tekst, Kleuren en Achtergronden
Hieronder zijn een aantal voorbeelden aangegeven van de basis mogelijkheden van CSS opmaak. Teks...
Opdracht: Personaliseer je Webpagina
Wat te doen? Gebruik Classes en IDs om specifieke elementen te stylen. Experimenteer met Kleu...
Afronding HTML en Introductie tot CSS
In dit hoofdstuk heb je het volgende geleerd: Het belang van semantische HTML-elementen en hoe...
CSS Layouts en Flexbox
Je hebt nu een goede basis in HTML en CSS, en je webpagina begint vorm te krijgen. In dit hoofdst...
CSS Box Model
Wat is het CSS Box Model? In CSS wordt elk element op een webpagina beschouwd als een rechthoeki...
Flexbox
Wat is Flexbox? Flexbox, of de Flexible Box Layout Module, is een CSS3-layoutmodel dat het eenvo...
Opdracht: Gebruik van Flexbox
Stap 1: Structureren van je HTML Pas je index.html aan om een flex container en flex items te he...
Oefeningen
Oefening 1: Maak een Flexbox Layout voor je Footer Wat te doen? Maak van je <footer> een flex...
Afronding CSS Layouts en Flexbox
In dit hoofdstuk heb je het volgende geleerd: Het CSS Box Model: Begrip van margins, borders, ...
CSS Grid en Responsive Design
Je hebt nu een solide basis in HTML en CSS, en je bent bekend met Flexbox voor het creëren van fl...
Introductie tot CSS Grid
Wat is CSS Grid? CSS Grid Layout, vaak gewoon Grid genoemd, is een tweedimensionaal grid-systeem...
CSS Grid Eigenschappen
Definiëren van Kolommen en Rijen Gebruik de eigenschappen grid-template-columns en grid-template...
Opdracht: Layout Creëren met CSS Grid
Stap 1: HTML Structuur Aanmaken Maak een HTML bestand genaamd grid.html aan om de grid layout to...
Responsive Design met Media Queries
Wat zijn Media Queries? Media queries in CSS stellen je in staat om stijlregels toe te passen op...
Oefeningen
Oefening 1: Maak je Website Volledig Responsief Wat te doen? Pas media queries toe om je webs...
Afronding CSS Grid en Responsive Design
Je hebt geleerd hoe je CSS Grid kunt gebruiken om geavanceerde en responsieve layouts te maken. M...