Dit ga je leren:
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!
Leer onbeperkt met Soofos Plus
Deze cursus is gratis te volgen door abonnees van Soofos Plus.
Probeer 7 dagen gratis- Onbeperkte toegang tot 200+ Nederlandse cursussen
- Probeer 7 dagen volledig gratis
- Maandabonnement vanaf €19 per maand
Over de Instructeur
Belinda Kampf
Bekijk meer cursussen van Belinda Kampf →
Cursusoverzicht
| Hoofdstuk 1: Introductie | |||
| 1.1 – Introductie webdesign en layout met css | PROEFLES | 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 CSS | PROEFLES | 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-grid | PROEFLES | 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 rem | PROEFLES | 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
Andere cursisten bekeken ook
De 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
Top cursus!
Als ‘starter’ had ik weinig weet van design of programmeren. Voor mijn gevoel heb ik nu een mooie eerste stap gezet. Deze cursus neemt je stap voor stap, compleet en zeer goed navolgbaar mee in de ‘wereld’ van CSS. Ik heb deze cursus gevolgd na het afronden van de basiscursus HTML / CSS. Persoonlijk vond ik deze volgorde erg prettig. De basiscursus HTML / CSS nam me nog net wat meer mee vanaf te start. Ik vond deze cursus CSS een mooi vervolg daarop. Zowiezo vind ik de cursussen van Belinda Kamph een aanrader bij Soofos.
Heel leerzame opfrissing cursus
Hallo,
Voor mij was de cursus een goede aanrader als je veel bezig bent met het ontwerpen en ontwikkelen van websites. Ik heb uit deze cursus heel wat dingen die nieuw waren kunnen bijleren, maar het meeste was al gekend toen ik nog studeerde want ik heb een bachelor elektronica ICT heb gedaan en tijdens mijn freelance opdrachten.
Ik maak meestal gebruik van pinegrow editor professional waarin je visueel als met code je website kan maken.
Ik had graag meer uitbreiding gehad van alle mogelijkheden van flexgrid layout en CSS grid maar ik zoek dan het meeste op in w3schools want dat is het platform waar je verder dingen mee kan experimenteren.
Het is heel duidelijk en kort en bondig uitgelegd met veel praktijkervaring en dat gaf mij een super goed gevoel. Ik ga deze cursus af en toe nog eens bekijken.
Wat voor mij nieuw is is over de uitleg van variabelen en tools om met kleurenpaletten te werken.
Een meerwaarde zou zijn een ganse website als eindopdracht naar voorbrengen om zo de kennis van de cursist te testen
prima!
leerzame cursus!