Responsieve websites bouwen met HTML5 en CSS3 - eLearning

Leg een stevige basis in moderne webontwikkeling met HTML5 en CSS3 – de kerntechnologieën achter elke website op het internet.

Deze cursus is bedoeld om je te helpen vanaf nul visueel aantrekkelijke, responsieve en gebruiksvriendelijke webpagina’s te maken.

Je begint met de basisprincipes van de HTML-structuur en gaat geleidelijk over op geavanceerde stylingtechnieken met CSS3, waaronder Flexbox, Grid, animaties en principes van responsief ontwerp. Door middel van praktische oefeningen en praktijkgerichte projecten leer je hoe je websites van professionele kwaliteit ontwerpt en bouwt die naadloos werken op alle apparaten.

Aan het einde van deze cursus heb je het vertrouwen om moderne weblay-outs te bouwen en ben je klaar om de volgende stap te zetten op weg naar een carrière als front-endontwikkelaar.

Doelgroep

• Aspirant-webontwikkelaars
• Beginners in front-end-ontwikkeling
• UI/UX-ontwerpers die hun ontwerpen willen coderen
• Studenten die een carrière in webontwikkeling overwegen
• Professionals die overstappen naar technische functies
• Iedereen die geïnteresseerd is in het bouwen van websites vanaf nul

Vereisten

• Geen eerdere programmeerervaring vereist
• Basisvaardigheden op computergebied
• Interesse in webdesign en -ontwikkeling

Leerdoelen

• Begrijp verschillende soorten HTML-invoerelementen en hoe je deze kunt gebruiken om interactieve webformulieren te bouwen
• Leer hoe je formulierinvoer valideert met HTML om de nauwkeurigheid van gegevens en de gebruikerservaring te verbeteren
• Structureer webcontent effectief met behulp van semantische HTML-tags voor betere leesbaarheid en toegankelijkheid
• Pas CSS-stijlen op een cascaderende manier toe om te bepalen hoe regels worden geprioriteerd en weergegeven op een webpagina
• Gebruik CSS-pseudo-elementen om het ontwerp te verbeteren en stijleffecten toe te voegen zonder extra HTML-markup
• Werk met Flexbox om flexibele, responsieve lay-outs te maken en de uitlijning en spatiëring van elementen efficiënt te beheren

Cursusinhoud

Inleiding tot webontwikkeling

• Wat is HTML
• Wat is CSS
• De omgeving instellen
• Hello World!
• VS Code gebruiken met Live Reload
• Emmet en online tools gebruiken
• Chrome Developer Tools gebruiken

Inleiding tot HTML

• HTML-elementen en -tags
• Enkele en gepaarde tags
• Structuur van een HTML-pagina
• Kop- en alinea-tags
• Attributen in HTML
• Afbeeldingen
• Links - Intern en extern
• Lijsten
• Tabellen
• Het style-attribuut
• Kleuren in HTML
• Semantische HTML5-tags
• HTML5-audio- en videotags
• Basis HTML-tags en -attributen
• Afbeeldingstag en -attributen
• Links - Intern en extern
• Lijsten - Geordend en ongeordend
• Tabellen in HTML
• Het style-attribuut
• Kleuren in HTML
• Semantische HTML5-elementen
• HTML-audio- en video-elementen

Formulieren en invoervelden

• De form-tag
• De label-tag gebruiken
• De HTML-input-tag
• Select en TextArea
• Knoppen
• Datalist
• Een contactformulier maken
• Eenvoudig formulierelement
• Labels en invoervelden
• Basis-HTML-tags en -attributen
• Select-lijsten en opties
• E-mail, wachtwoordinvoer en knoppen
• Datalists in HTML

Inleiding tot CSS

• De style-tag gebruiken
• HTML-elementen targeten
• Geneste HTML-elementen targeten
• Externe stylesheets gebruiken
• CSS-stijlen overschrijven
• Veelgebruikte CSS-eigenschappen
• CSS-eenheden
• Het CSS-boxmodel
• Meer CSS-eigenschappen
• CSS-pseudoklassen
• Het style-element gebruiken
• HTML-elementen targeten in CSS
• Geneste HTML-elementen targeten
• Externe stylesheets gebruiken
• Opmaak met externe stylesheets

Geavanceerde CSS

• CSS-positionering - Statisch, Relatief en Absoluut
• CSS-positionering - Vast en Sticky
• CSS-pseudo-elementen ::Before en ::After
• CSS-variabelen
• Aangepaste lettertypen in CSS
• Externe stylesheets importeren

Overgangen en animaties

• Wat zijn CSS-overgangen
• Basisovergangen en CSS-eigenschappen
• CSS-animaties en -eigenschappen
• Keyframes definiëren

Responsief webdesign

• Media Queries
• Wat is CSS Flexbox
• Rijen en kolommen maken
• Meer Flexbox-eigenschappen
• Wat is CSS Grid Layout
• Rijen en kolommen in Grid
• Cellen toewijzen
• Grid-sjabloongebieden
• Een responsieve afbeeldingengalerij bouwen
• Media Queries
• CSS Flexbox-eigenschappen
• Geavanceerde Flexbox-eigenschappen
• CSS Grid
• CSS Grid-eigenschappen
• Grid-gebieden in CSS Grid

FAQ

Is er nog ander lesmateriaal naast de video's die je in je eigen tempo kunt bekijken?

Absoluut! De on-demand leerervaring gaat verder dan video's en biedt een volledig meeslepende leeromgeving, inclusief:

• LEREN: Interactieve e-books, herhalingsquizzen en praktijkgerichte casestudy's om concepten te versterken
• BEOORDELEN: Diagnostische, module- en eindtoetsen om je voortgang bij te houden
• OEFENEN: Praktische oefeningen met realistische simulaties en Cloud Labs
• INZICHTEN VERKRIJGEN: realtime analyses en rapporten die je leervooruitgang, uitdagingen en aanbevolen onderwerpen om te herhalen belichten, zodat je de belangrijkste vaardigheden onder de knie krijgt

Kan ik deze cursus volgen naast mijn fulltime baan?

Ja! Deze cursus is ontworpen voor maximale flexibiliteit. Aangeboden in een online formaat dat je in je eigen tempo kunt volgen, stelt het je in staat om te leren en je vaardigheden te verbeteren wanneer het jou uitkomt, waardoor het gemakkelijk te combineren is met je fulltime baan.

Wat leer ik in deze cursus?

Je leert hoe je moderne, responsieve websites bouwt met HTML5 voor de structuur en CSS3 voor de styling, inclusief geavanceerde lay-outtechnieken zoals Flexbox en Grid.

Is deze cursus geschikt voor beginners?

Ja, de cursus is ontworpen voor complete beginners zonder eerdere programmeerervaring.

Kan ik na het voltooien van deze cursus echte websites bouwen?

Ja, je zult in staat zijn om volledig functionele en responsieve websites te ontwerpen en te bouwen.

Bevat de cursus training in responsief ontwerpen?

Ja, je leert hoe je websites kunt maken die zich aanpassen aan verschillende schermformaten met behulp van moderne CSS-technieken.

Welke praktische vaardigheden zal ik opdoen?

Je leert hoe je webpagina's structureert, lay-outs opmaakt, formulieren maakt en responsieve en interactieve ontwerpen bouwt.

Belangrijkste kenmerken

• Cursus en materiaal in het Engels
• Beginners- tot gemiddeld niveau
• Meer dan 7 uur aan on-demand video's
• 34 begeleide praktische oefeningen
• 8 automatisch beoordeelde toetsen
• 3 opdrachten
• 60 herhalingsquizzen
• Meer dan 20 uur aanbevolen studietijd
• 1 jaar toegang tot het leerplatform
• Certificaat van voltooiing inbegrepen