terug naar cursusinformatie

Uitleg van het css-grid

Uit de cursus: Webdesign en Layout met CSS

Introductie

Introductie webdesign en layout met CSS
Algemene cursusinformatie
De Webeditor Brackets

Starten met CSS

Wat is CSS 
CSS in werking inline, intern- en extern stijlblad
CSS schrijven
De reset CSS versus Normalize
De css-selectors (html-tag,id, class)
De pseudo-class selectors

De box

Het boxmodel (block-level & inline elementen)
De boxeigenschappen (margin, padding & border)
Vormgeven van de box (box-sizing)
Collapsing margins
Boxeigenschappen voor inline elements
Boxeigenschappen voor inline block elements

Responsive layout met css-grid

Uitleg van het css-grid
Creëren van grid ,-columns & -rows (grid-template)
Layouten met gridlijnen(grid-column & -row)
Layouten met gridareas (grid-area-template)
Kolomwit en rijwit toepassen (grid-gap)

Responsive met mediaquerie en flexbox

Uitleg van css-responsive design (@media)
Responsive design met mediaqueries (min-width)
Uitleg van flexbox
Verticaal layouten met flexbox
Horizontaal layouten met flexbox

Responsive met afbeeldingen

Vector- versus pixelafbeeldingen
Afbeeldingen responsive maken met css
Afbeelding en box-eigenschappen vormgeven
Randen vormgeven om afbeelding (border & -radius)
Tekstomloop met Float

Fontgrootte en lettertypes – Font-properties

Font-size bepalen met pixels, em of rem
Font-size opgeven met rem
Lettertype bepalen met Font-family (websave fonts) 
Google webfonts toepassen in css
Font-weight, font-style en font-variant 
Interlinie bepalen (lineheight)
Shorthand notation voor font-properties

Teksten vormgeven – Text-properties

Text-indent: Tekst in laten springen
Text-align: Tekst uitlijnen (CSS3 text-align-last, text-justify)
Text-transform: Hoofd en kleine letters toepassen
Text-decoration: Onderstrepen van teksten en links
Tekst van schaduw of gloed voorzien (Shadow)

Kleuren en kleurschema’s kiezen

CSS-kleuren hexadecimaal, rgb & hsl (color)
Kleurenschema samenstellen (colorscheme)
Kleurenschema definiëren met variabele (variable)

Vormgeven van lijsten

Soort lijst bepalen met list-style-type
Illustratie als opsommingsteken met list-style-image
Toepassen van list-style-position & boxeigenschappen
Shorthand notation voor list-style eigenschappen
Lijst vormgeven als horizontaal menu 

Vormgeven van achtergrond, background

Background-color toepassen
Background-image toepassen
Background-repeat toepassen
Background-position toepassen
Background-attachment toepassen
Shorthand notation voor background-properties

Pseudo class en element

Toepassing van Pseudo class & element
Pseudo-element first-letter & first-line
Pseudo-element before & after
Webdesign en Layout met CSS
€ 75

Leer hoe je met CSS de layout en de vormgeving van een webpagina bepaalt.
Webdesigner
€ 175

Leer websites bouwen met behulp van HTML, CSS, en Joomla of Wordpress!

Neem een “All you can learn” lidmaatschap en krijg toegang tot deze en nog veel meer cursussen!

Ga naar de lidmaatschappen