Vormgeven 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 online 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 cursus “Leer de basis van HTML en CSS’ te volgen.

 

Wat biedt deze online cursus website website designen en vormgeven CSS?

Leer hoe je met CSS jouw webpagina compleet van uiterlijk kunt laten veranderen

Meer dan 40+ video lessen

Volledig Nederlands gesproken

24/7 toegang tot al het materiaal

Inclusief oefenbestanden

 

Over de Instructeur

Profielfoto
Belinda Kampf
Mijn naam is Belinda Kampf. Ik ben al jaren actief in de grafische sector en weet alles van de programma’s waarmee jij grafisch kunt ontwerpen. Na lang zelf actief te zijn geweest als grafisch ontwerper geef ik nu voornamelijk les over alles wat met design te maken heeft. Na veel offline les gegeven te hebben, heb ik nu van de belangrijkste kennis gebundeld in online cursussen. Met deze kennis kun je zelf snel aan de slag. Met behulp van video's en oefenbestanden kun je op je eigen tempo leren door te doen. Ik hoop ook jou enthousiast te krijgen en help je met veel plezier op weg in de grafische sector.

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

0

beoordelingen
  • 5 Sterren0
  • 4 Sterren0
  • 3 Sterren0
  • 2 Sterren0
  • 1 Sterren0

Er zijn nog geen reviews geschreven voor deze cursus. Wees de eerste die er een schrijft!

VOLG DEZE CURSUS

75 (incl. BTW)In winkelmandje

    Geef cursus cadeau
  • 75 (incl. BTW)
  • Cursus Certificaat
  • Levenslange toegang
  • 65 lessen
  • 4 uren, 19 minuten
  • Nederlands gesproken
  • Leer op alle apparaten
  • 14 dagen geld terug garantie
10 cursisten volgen nu deze cursus
top
  © 2018 Soofos B.V.