De cursus in het kort:
Leer in deze basiscursus meer over 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.
Ga aan de slag met CSS of een andere programmeercursus!
Leer onbeperkt met Soofos Plus
- Toegang tot deze én 200+ andere Nederlandse cursussen
- Blijf jezelf ontwikkelen en leer nieuwe vaardigheden
- Leer onbeperkt voor €19 p/m (maandelijks opzegbaar)
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 | ||
Reviews
Andere cursisten bekeken ook
Cursus Starten met Unity
€34,95€24,95 Levenslange toegang
€34,95€24,95 Levenslange toegangIn winkelmandDe snelste manier om een website te maken met WordPress 2020
€199€67 Levenslange toegang€199€67 Levenslange toegangIn winkelmand
Online Cursus WordPress (met Gutenberg)
€99€49 Levenslange toegang€99€49 Levenslange toegangIn winkelmand
helder!!!
goed cursus duidelijk uitleg
Zeer goede cursus met tabellen vervangen door flexbox layout en/of cssgrid
Dag Belina,
Ik ben nu bezig met twee cursussen te maken in het nederlands die gaan over Flexbox Layout en CSS Grid. Deze ben ik nu aan het maken. Binnenkort komen ze hier te voorschijn.
Je kunt tabellen perfect vervangen door flexbox layouts, want flexbox kan je zowel als een rij als een kolom gebruiken. Het nieuwere systeem zou het van de toekomst worden in webdesign is de CSS Grid (Dat noemt men ook Flexgrid)
Uitgebreid uitleg van css3
Een aanvulling op de cursus basis html/css.
Een aanrader!.
html css
veel informatie echt leerzaam.
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.