CSS

Waar HTML zorgt voor de inhoud van een website, bepaalt CSS hoe deze website er uit komt te zien. Met Cascading Style Sheets voeg je opmaak toe aan je website. Je bepaalt onder andere de lettertypes, kleuren, afmetingen, achtergronden, randen en marges van eerder gemaakte HTML elementen. Bovenal gebruik je CSS om de positionering van je elementen te bepalen.

Ruim de helft van alle websitebezoeken vindt tegenwoordig plaats via mobiele apparaten zoals een smartphone of tablet. Het is dus van essentieel belang dat moderne websites hierop zijn afgestemd. Moderne CSS3 biedt verschillende mogelijkheden om dat voor elkaar te krijgen zoals flexbox en het grid model in combinatie met media queries. Tegenwoordig kan CSS zelfs gebruikt worden om animaties toe te voegen aan een pagina.

Met kennis van CSS (en HTML) zal je in staat zijn om een door een designer gemaakt ontwerp in Figma, Photoshop, of een ander grafisch programma nauwkeurig om te zetten naar een echte webpagina.


Deze cursus bestaat uit:

  • 15 lessen
  • 106 onderwerpen
  • 98 opdrachten
Lessen overzicht
1 Inleiding CSS 6 opdrachten meer informatie
Inleiding CSS, Soorten van CSS, Syntaxis van CSS, CSS toepassen, Cascading, Kleuren in CSS, Teksten in CSS, Lijsten in CSS, Inspector
2 Selectors 1 6 opdrachten meer informatie
Selectors, Classes, Id's, Id v.s. class, Meerdere selectors, Genestelde selectors, Pseudo-classes
3 Box model 7 opdrachten meer informatie
Inleiding box model, Display, Content box, Container, Margin box, Padding box, Border box, Box-sizing
4 Typografie 6 opdrachten meer informatie
Tekstgroottes, Ems & rems, Line-height, Letter-spacing, Text-transform, Text-shadow, Google Fonts, Lokale custom fonts, Quotes
5 Flexbox 6 opdrachten meer informatie
Inleiding flexbox, Flexbox instellen, Uitlijning main axis, Wrappen, Gaps, Proporties, Volgorde, Uitlijning cross axis
6 Illustraties 6 opdrachten meer informatie
Schaalbare media, Object-fit, Filters, Opacity, Shadows, Clip-path
7 Grid 8 opdrachten meer informatie
Inleiding grid, Kolommen & rijen, Grid uitlijnen, Items uitlijnen, Fracties, Overspanning, Template areas, Herhalingen, Dynamische grids
8 Achtergronden 7 opdrachten meer informatie
Background-image, Background-repeat, Background-position, Background-size, Sprites, Gradients, Blending
9 Posities 8 opdrachten meer informatie
Inleiding posities, Static, Relative, Absolute, Fixed, Z-index, Sticky, Menubalken
10 Selectors 2 7 opdrachten meer informatie
Descendant combinator, Child combinator, Adjacent sibling combinator, General sibling combinator, Attribute selectors, Pseudo-classes, Pseudo-elements, Specificity
11 Transformaties 6 opdrachten meer informatie
Inleiding transformaties, Verplaatsen, Schalen, Roteren, Hellen, Matrices, Perspectief, 3D transformaties (1), 3D transformaties (2)
12 Animaties 7 opdrachten meer informatie
Transitions, Meerdere transitions, Acceleratie & vertraging, Animations, Animation properties, Uitgebreidere keyframes
13 Media queries 7 opdrachten meer informatie
Responsive designs, Media types, Media features, Uiteenlopende schermgroottes, Desktop first of mobile first, Meerdere stylesheets, Extra media features
14 Variabelen 4 opdrachten meer informatie
Variabele waarden, Counters, Custom Properties, Calculaties
15 Eindopdracht CSS 7 opdrachten meer informatie
Eindopdracht CSS