Webdesign en Layout met CSS

Cursusduur

03:49:40

Niveau

Beginner

deel deze cursus:

Share on facebook
Share on linkedin
Share on pinterest
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!

Cursusprogramma

  • Introductie
    • Algemene cursusinformatie
    • De Webeditor Brackets
  • Starten met 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
    • 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
    • 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 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)
  • 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