Ontwerpen van Je Eerste Website met HTML5 en CSS3
Learning objective
Ontwerpen van Je Eerste Website met HTML5 en CSS3
Learning objective
Leerdoelen
Aan het einde van de les kun je een eenvoudige website maken met HTML5 en CSS3.
Wat weet je al over HTML5 en CSS3?
Introductie tot HTML5
HTML5 is de nieuwste versie van HTML en biedt nieuwe elementen voor meer semantische webpagina's.
Structuur van een HTML5-pagina
<!DOCTYPE>, <html>, <head>, en <body> vormen de basisstructuur.
Introductie tot CSS3
CSS3 maakt het mogelijk om de stijl en lay-out van webpagina's te definiëren.
Selectoren en Eigenschappen
CSS-selectoren bepalen welke HTML-elementen worden gestyled; eigenschappen definiëren de stijl.
Opmaak met CSS3
Gebruik kleuren, lettertypen en marges om de stijl van de website te bepalen.
HTML5-elementen: Headers
Gebruik <header> om het kopgedeelte van een pagina te definiëren.
HTML5-elementen: Artikels en Secties
<article> en <section> helpen bij het structureren van inhoud.
HTML5-elementen: Voeten en Voetteksten
<footer> definieert het voettekstgedeelte van een pagina.
HTML5-elementen: Navigatie
<nav> wordt gebruikt voor navigatielinks op een webpagina.
Interactiviteit met CSS3
Gebruik pseudo-klassen zoals :hover voor dynamische effecten.
Lay-outtechnieken: Flexbox
Flexbox zorgt voor flexibele en responsieve lay-outs.
Lay-outtechnieken: Grid
CSS Grid biedt een rastergebaseerde lay-out voor complexe ontwerpen.
Media Queries voor Responsiviteit
Media queries passen stijlen aan op basis van schermgrootte.
Praktische Opdracht: HTML5
Maak een eenvoudige pagina met een header, artikel, en footer.
Praktische Opdracht: CSS3
Stijl de HTML5-pagina met kleuren en lettertypen.
Praktische Opdracht: Lay-out
Gebruik Flexbox of Grid om de pagina-indeling aan te passen.
Toepassen van Media Queries
Pas stijlen aan voor verschillende schermformaten met media queries.
Feedback en Reflectie
Bespreek wat goed ging en wat verbeterd kan worden.
Vervolgstappen
Verken verder met JavaScript voor interactiviteit en dynamiek.
Schrijf 3 dingen op die je deze les hebt geleerd.
Schrijf 2 dingen op waarover je meer wilt weten.
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.