Dit ga je leren:
Wat leer je in de cursus website vormgeving met CSS?
CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt. Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.
Wat leer je in deze cursus webdesign met CSS?
CSS is opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:
Backgrounds & Borders
Text Effects
2D/3D Transformations
Animations
Natuurlijk wordt er in deze cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen. Daarnaast gaan we uitgebreid kijken naar tabellen. Tabellen zijn bedoeld om teksten en gegevens te ordenen en goed gestructureerd te publiceren. Je leert op welke manier je de tabel, de kolommen en de rijen kunt vormgeven. Maar ook welke vormgeving je kunt verbinden aan de content als afbeeldingen en teksten.
Opbouw van de cursus
In 65 lessen leer jij aan de hand van video’s en oefenbestanden hoe je CSS toepast op jouw web projecten. Je krijgt les van Belinda Kampf, zij heeft meer dan 10 jaar ervaring in de IT en geeft al jaren les op het gebied van IT en grafisch design. Benieuwd hoe een les eruit ziet? Bekijk dan de proefles bovenaan de pagina of bekijk een van de gratis lessen in het cursus overzicht.
Benodigde voorkennis
Om aan deze cursus deel te nemen is het belangrijk dat je al enige basiskennis van HTML en CSS hebt, want we gaan direct aan de slag. Dus ben je nieuw in deze materie, dan raad ik je aan om eerste de basiscursus HTML en CSS te volgen.
Wat biedt deze online cursus website vormgeving met CSS?
Leer hoe je met CSS jouw webpagina compleet van uiterlijk kunt laten veranderen
Meer dan 40+ videolessen
Volledig Nederlands gesproken
24/7 toegang tot al het materiaal
Inclusief oefenbestanden
Over de Instructeur
Belinda Kampf
Bekijk meer cursussen van Belinda Kampf →
Cursusoverzicht
| 0. Introductie | |||
| 0.1 – Introductie & Oefenbestanden | 00:02:00 | ||
| 0.2 – CSS3 en browserverschillen oplossen met prefix | PROEFLES | 00:04:00 | |
| 1. Borders | |||
| 1.1 – Border-radius en hoekafronding | 00:07:00 | ||
| 1.2 – Slagschaduw naar binnen of buiten | 00:05:00 | ||
| 1.3 – Multiple border-shadow | 00:03:00 | ||
| 1.4 – Randdecoratie | 00:04:00 | ||
| 1.5 – Border-image maken in Adobe Illustrator | 00:05:00 | ||
| 1.6 – Eigen patroon toepassen als border-image | PROEFLES | 00:03:00 | |
| 2. Backgrounds CSS2 | |||
| 2.1 – Background-color, -image en -repeat | 00:03:00 | ||
| 2.2 – Background-attachment | 00:05:00 | ||
| 2.3 – Background-position | 00:04:00 | ||
| 2.4 – Achtergrondafbeelding voor teksten | 00:04:00 | ||
| 3. Backgrounds CSS3 | |||
| 3.1 – Background-size: Formaat bepalen | 00:04:00 | ||
| 3.2 – Background-size: Cover & contain | 00:03:00 | ||
| 3.3 – Background-attachment: Fixed & scroll | 00:02:00 | ||
| 3.4 – Background-origin en background-clip | 00:04:00 | ||
| 3.5 – Multiple backgrounds | PROEFLES | 00:03:00 | |
| 3.6 – Shorthand notation voor achtergrondafbeelding | 00:03:00 | ||
| 3.7 – Shorthand notation voor multiple backgrounds | 00:03:00 | ||
| 4. Gradients | |||
| 4.1 – Gradients, verlopen maken en toepassen | 00:03:00 | ||
| 4.2 – Transparante verlopen maken | 00:03:00 | ||
| 4.3 – Herhalend radiaal verloop maken | 00:02:00 | ||
| 4.4 – Online gradient generator | 00:04:00 | ||
| 5. Text effects | |||
| 5.1 – Text-shadow | 00:03:00 | ||
| 5.2 – Text shadow: Online generator | 00:01:00 | ||
| 5.3 – Wordwrap | 00:01:00 | ||
| 6. 2D Transformations | |||
| 6.1 – 2D Transform: Rotate | 00:04:00 | ||
| 6.2 – 2D Transfrom: Skew & Scale | PROEFLES | 00:02:00 | |
| 6.3 – 2D Transform: Origin | 00:04:00 | ||
| 6.4 – 2D Transform: Translate | 00:02:00 | ||
| 6.5 – 2D Transform: Matrix | 00:08:00 | ||
| 7. 2D Transitions | |||
| 7.1 – Pseudo-classes gebruiken voor transitions | 00:04:00 | ||
| 7.2 – Transition-property & -duration | 00:04:00 | ||
| 7.3 – Transition-timing-function & -delay | 00:02:00 | ||
| 7.4 – Transition-timing function: Cubic-bezier | 00:05:00 | ||
| 7.5 – Bouncing-effect met translate & cubic-bezier | 00:04:00 | ||
| 7.6 – Bouncing-effect met position & cubic-bezier | 00:05:00 | ||
| 7.7 – Collage animatie met transition en transform | 00:07:00 | ||
| 7.8 – Transition prefixes en online generators | 00:04:00 | ||
| 8. Animations | |||
| 8.1 – Hoe werkt de animation? | PROEFLES | 00:02:00 | |
| 8.2 – Animation toepassen met “from” en “to” | 00:06:00 | ||
| 8.3 – Animation met “position” en “scale” | 00:02:00 | ||
| 8.4 – Animation met “cubic-bezier” | 00:04:00 | ||
| 8.5 – Animation met “iteration-count” & “direction” | 00:03:00 | ||
| 8.6 – Keyframe animation: procenten 0 tot 100 | 00:09:00 | ||
| 8.7 – Browserondersteuning van CSS controleren | 00:03:00 | ||
| 8.8 – CSS prefixes schrijven | 00:06:00 | ||
| 9. Cheatsheets & online generators | |||
| 9.1 – Cheatsheet gebruiken | 00:05:00 | ||
| 9.2 – Extern animatie stijlblad maken, koppelen & toepassen | 00:04:00 | ||
| 9.3 – Online animation generators | 00:06:00 | ||
| 10. Tabel eigenschappen vormgeven met CSS | |||
| 10.1 – Tabel voorbereiden met reset.css | 00:09:00 | ||
| 10.2 – Border, border-collapse & border-spacing | 00:05:00 | ||
| 10.3 – Cel-spacing en border-collapse | 00:03:00 | ||
| 10.4 – Table-layout en breedtes bepalen | 00:03:00 | ||
| 10.5 – Empty cels verbergen | 00:03:00 | ||
| 10.6 – Caption-side | 00:03:00 | ||
| 11. Tabeltekst vormgeven met CSS | |||
| 11.1 – Tabeltekst opmaken met “em” | 00:08:00 | ||
| 11.2 – Tabeltekst opmaken met “rem” | 00:02:00 | ||
| 11.3 – Tekst in tabel vormgeven | 00:05:00 | ||
| 12. Overige tabelopmaak met CSS | |||
| 12.1 – Afstanden creëren met padding | 00:05:00 | ||
| 12.2 – Vormgeven met background | 00:03:00 | ||
| 12.3 – Tabel vormgeven met border-properties | 00:06:00 | ||
| 12.4 – Afbeelding positioneren in tabel | 00:02:00 | ||
| 12.5 – Pseudo-class first-, last- & only-child | PROEFLES | 00:04:00 | |
| 12.6 – Pseudo-class even, odd & formule | 00:05:00 | ||
Informatieve lessen
Ook bij deze cursus veel dingen geleerd die ik nog niet wist. Dacht altijd dat de animatie alleen mogelijk waren met javascript.
Ik ga de cursus binnenkort nog een keer doornemen.