Dit ga je leren:

Starten met programmeren in CSS.
Werken met het boxmodel en grid.
Een responsieve webpagina te maken.
Verschillende elementen vormgeven.

Wat ga je leren in deze online basiscursus CSS?

In deze online basiscursus leer je de grondbeginselen van CSS (Cascading Style Sheets). Met deze programmeertaal bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe CSS-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste CSS-selectors.

 

Wat is CSS?

CSS, oftewel Cascading Style Sheets, geeft je de mogelijkheid om de vormgeving van webpagina’s te programmeren. Deze stijlbladen maken het mogelijk om de vormgeving en styling vast te leggen in een apart document, zodat deze op een webpagina ingeladen kan worden. In principe wordt deze dus als een laag over een kale webpagina heen gelegd, zodat deze er mooi of beter uitziet.

 

In deze basiscursus behandelen we onder andere:

 Een introductie in het webdesign en CSS.

Starten van het schrijven van deze programmeertaal.

Werken met het boxmodel en haar eigenschappen.

Het maken van een responsive layout.

Het responsive maken met mediaquerie en de flexbox.

Werken met afbeeldingen en responsiviteit.

Fontgroottes, lettertypes en de vormgeving van tekst.

Kleuren en kleurschema’s uitkiezen.

Vormgeving van lijsten en de achtergrond.

Werken met Pseudo class en element.

 

Responsive design en layout

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met media-queries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

 

Tekst en afbeeldingen vormgeven

Cascading Style Sheets bieden een groot aantal CSS-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. Deze programmeertaal is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

 

Welke voorkennis heb je nodig?

Om hiermee aan de slag te gaan is het aan te raden dat je verstand hebt van HTML. Wij bevelen je aan om de online basiscursus HTML5 te volgen, gegeven door de instructrice van deze cursus. Deze twee cursussen vullen elkaar perfect aan, dus het is zeker de moeite waard voor jou om beide te volgen!

 

Begin vandaag nog en leer programmeren in CSS!

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

Hoofdstuk 1: Introductie
1.1 – Introductie webdesign en layout met cssPROEFLES 00:02:00
1.2 – De Webeditor Brackets 00:03:00
Hoofdstuk 2: Starten met CSS
Oefenbestanden – Hoofdstuk 2 00:01:00
2.1 – Wat is CSSPROEFLES 00:05:00
2.2 – CSS in werking inline, intern- en extern stijlblad 00:05:00
2.3 – CSS schrijven 00:02:00
2.4 – De reset CSS versus Normalize 00:04:00
2.5 – De css-selectors (html-tag,id, class) 00:05:00
2.6 – De pseudo-class selectors 00:03:00
Hoofdstuk 3: De box
Oefenbestanden – Hoofdstuk 3 00:01:00
3.1 – Het boxmodel (block-level & inline elementen) 00:02:00
3.2 – De boxeigenschappen (margin, padding & border) 00:05:00
3.3 – Vormgeven van de box (box-sizing) 00:04:00
3.4 – Collapsing margins 00:03:00
3.5 – Boxeigenschappen voor inline elements 00:02:00
3.6 – Boxeigenschappen voor inline block elements 00:03:00
Hoofdstuk 4: Responsive layout met css-grid
Oefenbestanden – Hoofdstuk 4 00:00:01
4.1 – Uitleg van het css-gridPROEFLES 00:03:00
4.2 – Creëren van grid ,-columns & -rows (grid-template) 00:04:00
4.3 – Layouten met gridlijnen(grid-column & -row) 00:06:00
4.4 – Layouten met gridareas (grid-area-template) 00:05:00
4.5 – Kolomwit en rijwit toepassen (grid-gap) 00:03:00
Hoofdstuk 5: Responsive met mediaquerie en flexbox
Oefenbestanden – Hoofdstuk 5 00:01:00
5.1 – Uitleg van css-responsive design (@media)PROEFLES 00:04:00
5.2 – Responsive design met mediaqueries (min-width) 00:06:00
5.3 – Uitleg van flexbox 00:03:00
5.4 – Verticaal layouten met flexbox 00:04:00
5.5 – Horizontaal layouten met flexbox 00:04:00
Hoofdstuk 6: Responsive met afbeeldingen
Oefenbestanden – Hoofdstuk 6 00:01:00
6.1 – Vector- versus pixelafbeeldingen 00:03:00
6.2 – Afbeeldingen responsive maken met css 00:06:00
6.3 – Afbeelding en box-eigenschappen vormgeven 00:05:00
6.4 – Randen vormgeven om afbeelding (border & -radius) 00:04:00
6.5 – Tekstomloop met Float 00:04:00
Hoofdstuk 7: Fontgrootte en lettertypes - Font-properties
Oefenbestanden – Hoofdstuk 7 00:01:00
7.1 – Font-size bepalen met pixels, em of remPROEFLES 00:05:00
7.2 – Font-size opgeven met rem 00:05:00
7.3 – Lettertype bepalen met Font-family (websave fonts) 00:04:00
7.4 – Google webfonts toepassen in css 00:04:00
7.5 – Font-weight, font-style en font-variant 00:04:00
7.6 – Interlinie bepalen (lineheight) 00:02:00
7.7 – Shorthand notation voor font-properties 00:04:00
Hoofdstuk 8: Teksten vormgeven - Text-properties
Oefenbestanden – Hoofdstuk 8 00:01:00
8.1 – Text-indent: Tekst in laten springen 00:02:00
8.2 – Text-align: Tekst uitlijnen (CSS3 text-align-last, text-justify) 00:02:00
8.3 – Text-transform: Hoofd en kleine letters toepassen 00:02:00
8.4 – Text-decoration: Onderstrepen van teksten en links 00:05:00
8.5 – Tekst van schaduw of gloed voorzien (Shadow) 00:02:00
Hoofdstuk 9: Kleuren en kleurschema's kiezen
Oefenbestanden – Hoofdstuk 9 00:01:00
9.1 – CSS-kleuren hexadecimaal, rgb & hsl (color) 00:05:00
9.2 – Kleurenschema samenstellen (colorscheme) 00:03:00
9.3 – Kleurenschema definiëren met variabele (variable)PROEFLES 00:06:00
Hoofdstuk 10: Vormgeven van lijsten
Oefenbestanden – Hoofdstuk 10 00:01:00
10.1 – Soort lijst bepalen met list-style-type 00:03:00
10.2 – Illustratie als opsommingsteken met list-style-image 00:04:00
10.3 – Toepassen van list-style-position & boxeigenschappen 00:03:00
10.4 – Shorthand notation voor list-style eigenschappen 00:01:00
10.5 – Lijst vormgeven als horizontaal menu 00:04:00
Hoofdstuk 11: Vormgeven van achtergrond, background
Oefenbestanden – Hoofdstuk 11 00:01:00
11.1 – Background-color toepassen 00:05:00
11.2 – Background-image toepassen 00:04:00
11.3 – Background-repeat toepassen 00:03:00
11.4 – Background-position toepassen 00:03:00
11.5 – Background-attachment toepassen 00:02:00
11.6 – Shorthand notation voor background-properties 00:02:00
Hoofdstuk 12: Pseudo class en element
Oefenbestanden – Hoofdstuk 12 00:01:00
12.1 – Toepassing van Pseudo class & element 00:02:00
12.2 – Pseudo-element first-letter & first-line 00:03:00
12.3 – Pseudo-element before & after 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!

© 2019 - Soofos B.V.