Webdesign en Layout met CSS

Deze cursus biedt:

• 24-7 Toegang tot de online cursus ePub’s maken met InDesign (58 video’s)
• Downloadbaar bronmateriaal bij video’s
• Nederlandstalig onderwijs
• Certificaat na afronding

Webdesign met CSS
Met CSS 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.

CSS blijft in ontwikkeling en biedt een groot aantal CSS-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS 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.

Doel van de cursus
In deze online basiscursus leer je de grondbeginselen van CSS (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld, maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Doelgroep van deze cursus
Wil jij zelf de vormgeving van HTML-pagina’s bepalen met CSS dan is deze cursus absoluut een must.

Vereiste voorkennis en vaardigheden
Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van HTML-pagina’s.

Inhoudsoverzicht van instructievideo’s
58 video’s | Totale videoduur is 03:28:01
Docent: Belinda Kampf

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