Cursus HTML5 en CSS3 Gevorderd
In deze cursus leer je naast HTML5 alles over CSS3 Layout. Wat mediaqueries zijn en hoe je hiermee webpagina’s goed kunt vertonen op elk soort beeldscherm. CSS3 positionering, responsive afbeeldingen en de magie van de “display” eigenschap van CSS3.
Maar vooral twee nieuwe CSS3 modules die de webdesigner eindelijk in staat stellen elk gewenst design om te zetten in een website. Alle beperkingen die er voorheen bestonden in het maken van layouts zijn hiermee opgelost.
CSS Grid biedt een compleet layout systeem gebaseerd op een combinatie van horizontale en vertikale vlakken, dat onafhankelijk van de volgorde van de content kan worden opgezet. Hiermee kan de inhoud van een webpagina op elke gewenste plaats worden gezet.
Flexbox is een iets eenvoudiger systeem en werkt of horizontaal, of vertikaal, eendimensionaal dus. Dit kan gebruikt worden in onderdelen van een Grid layout, zoals een header of footer, voor meer simpele layouts, of voor de layout van onderdelen binnen een pagina.
CSS Grid en Flexbox werken in alle moderne browsers.
Welke voorkennis heb je nodig?
Om deze cursus te volgen is basiskennis van HTML5 & CSS3 nodig, bijvoorbeeld via de cursus HTML5 & CSS3 Basis.
Wat leer je in deze cursus?
In deze cursus leer je eerst geavanceerdere onderwerpen zoals filters, transities en animaties, en de werking van mediaqueries. Daarna hoe je een site layout kunt maken met CSS Grid. Daarna leer je hoe je met Flexbox onderdelen van het grid kunt lay-outen, of onderdelen van de pagina. Zo is het met Flexbox eenvoudig om kolommen van gelijke hoogte te maken (onafhankelijk van de inhoud), of elementen vertikaal te positioneren, iets wat voorheen enkel met onhandige hacks of de verouderde tabellen mogelijk was.
De opzet van de sites die we maken in de cursus volgt het bekende “mobile-first” systeem van webdesign, met een eenvoudige “fallback” zodat oudere browsers die de nieuwe modules niet ondersteunen de pagina’s toch goed zullen vertonen.
Voor wie is deze cursus bedoeld?
Deze cursus is voor iedereen die professioneel en nog beter wil leren werken met HTML en CSS code.
Wat is een logisch vervolg op deze cursus?
Na deze cursus kun je je verder technisch specialiseren via één van de cursussen web development, of bijvoorbeeld één van onze grafische cursussen.
- HTML5 & CSS Gevorderd
- Meerdere achtergronden en randen
- Transities en animaties
- Filters
- Responsive afbeeldingen
- De “display” eigenschap
- Positionering
- Gecombineerde selectors
- Media Queries
- CSS Grid Layout Module
- Structuur van CSS Grid
- Rijen en kolommen definieren
- Grid eigenschappen
- Grid lijnen, tracks, cellen en gebieden
- Nieuwe eenheden: fraction
- Uitlijning van het grid en de grid items
- Eigenschappen van de grid items
- CSS Flexible Box Layout Module
- Structuur van CSS Flexbox
- De flex container en items
- Container eigenschappen
- Flex direction
- Flex flow
- Flex wrap
- Verticale en horizontale uitlijning
- Eigenschappen van flex items
- Volgorde aanpassen
- Groeien en krimpen van items bepalen
1
Startdatum en locatie
Mocht er geen geschikte datum tussen zitten, neem dan contact op voor de mogelijkheden.
| Start: | Locatie: | Alle lesdagen: |
| do 04 nov | Utrecht | , , |
| vr 14 jan | Rotterdam | , , |
| vr 14 jan | Amsterdam | , , |
| vr 18 feb | Utrecht | , , |
Deze cursus werd onder andere gevolgd door:
