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:
- 16 lessen
- 122 onderwerpen
- 114 opdrachten
| Lessen overzicht | |||
|---|---|---|---|
| 1 | Inleiding CSS | 7 opdrachten |  |
| Inleiding CSS, Soorten van CSS, Syntaxis van CSS, CSS toepassen, Cascading, Kleuren in CSS, Teksten in CSS, Lijsten in CSS | |||
| 2 | Selectors 1 | 6 opdrachten | |
| Selectors, Classes, Id's, Id v.s. class, Meerdere selectors, Genestelde selectors, Hyperlinks in CSS | |||
| 3 | Box model | 6 opdrachten | |
| Inleiding box model, Display, Content box, Container, Margin box, Padding box, Border box, Border-radius, Box-sizing | |||
| 4 | Typografie | 7 opdrachten | |
| Tekstgroottes, Ems & rems, Line-height, Letter-spacing, Text-transform, Text-shadow, Google Fonts, Lokale custom fonts, Quotes | |||
| 5 | Flexbox | 7 opdrachten | |
| Inleiding flexbox, Flexbox instellen, Uitlijning main axis, Wrappen, Gaps, Proporties, Volgorde, Uitlijning cross axis | |||
| 6 | Illustraties | 7 opdrachten | |
| Schaalbare media, Object-fit, Filters, Opacity, Shadows, Clip-path | |||
| 7 | Grid | 8 opdrachten | |
| Inleiding grid, Kolommen & rijen, Grid uitlijnen, Items uitlijnen, Fracties, Overspanning, Template areas, Herhalingen, Dynamische grids | |||
| 8 | Achtergronden | 8 opdrachten | |
| Background-image, Voorgrond of achtergrond?, Background-repeat, Background-position, Background-size, Sprites, Linear gradients, Radial gradients, Blending | |||
| 9 | Posities | 8 opdrachten | |
| Inleiding positions, Static, Relative, Absolute, Fixed, Z-index, Sticky, Menubalken | |||
| 10 | Selectors 2 | 8 opdrachten | |
| Descendant combinator, Child combinator, Adjacent sibling combinator, General sibling combinator, Attribute selectors, Pseudo-classes, Pseudo-elements, Specificity | |||
| 11 | Transformaties | 6 opdrachten | |
| Inleiding transformaties, Verplaatsen, Schalen, Roteren, Hellen, Matrices, Perspectief, 3D transformaties (1), 3D transformaties (2) | |||
| 12 | Animaties | 7 opdrachten | |
| Transitions, Meerdere transitions, Acceleratie & vertraging, Animations, Animation properties, Uitgebreidere keyframes | |||
| 13 | Media queries | 7 opdrachten | |
| Responsive designs, Media types, Media features, Uiteenlopende schermgroottes, Desktop first of mobile first, Meerdere stylesheets, Extra media features, Container queries | |||
| 14 | Variabelen | 7 opdrachten | |
| Variabele waarden, Counters, Custom properties, Calculaties, Viewport units, Variabele viewports, Min & max, Clamping | |||
| 15 | Scrollen | 8 opdrachten | |
| Overflow, Tekst afbreken, Scroll chaining, Scrollbalk stylen, scrollbar en -webkit-scrollbar, Browser consistentie, Scroll snap, Snap points uitlijnen, Swipen optimaliseren | |||
| 16 | Eindopdracht CSS | 7 opdrachten | |
| Eindopdracht CSS | |||