Webdesign & Layout met css (2019)

Type product
Niveau

Webdesign & Layout met css (2019)

House of Media
Logo van House of Media

Tip: meer info over het programma, prijs, en inschrijven? Download de brochure!

Beschrijving

Cursus CSS

In deze basiscursus leer je de grondbeginselen van CSS. Met CSS, Cascading Style Sheets, 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. Hierdoor 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.

Tekst en afbeeldingen vormgeven met CSS

CSS 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 blij…

Lees de volledige beschrijving

Veelgestelde vragen

Er zijn nog geen veelgestelde vragen over dit product. Als je een vraag hebt, neem dan contact op met onze klantenservice.

Nog niet gevonden wat je zocht? Bekijk deze onderwerpen: (X)HTML & CSS, Webdesign, Programmeren (algemeen), NodeJS en Front-end web development.

Cursus CSS

In deze basiscursus leer je de grondbeginselen van CSS. Met CSS, Cascading Style Sheets, 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. Hierdoor 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.

Tekst en afbeeldingen vormgeven met CSS

CSS 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

Je leert hoe je vormgeving verbindt aan de inhoud van een webpagina met behulp van CSS.  Je leert teksten vormgeven, hoe je kleuren aanduidt, lijsten vormgeeft en achtergrondafbeeldingen kunt toepassen. De focus in deze cursus ligt op het vormgeven van de teksten van een webpagina.

Doelgroep

Wil je webpagina’s gaan vormgeven, heb je al enige kennis van HTML dan is deze basiscursus een goed vervolg.

Toelatingseisen: Voorkennis van HTML is vereist

Lesvorm: Zelfstandig leren in een online studieomgeving.

Lesmateriaal: Toegang tot instructievideo's en downloadbaar bronmateriaal.

Cursusduur: 1 jaar.

Deze cursus biedt:

  • 24-7 Toegang de online cursus Basiskennis CSS (+53 video’s)
  • Downloadbaar bronmateriaal bij video’s
  • Nederlandstalig onderwijs
  • Certificaat na afronding

Studeer en leer in je eigen tijd en tempo

In deze cursus werk je zelfstandig wanneer het jou uitkomt en in je eigen tempo. De online cursus bestaat uit duidelijke instructievideo’s en downloadbare bestanden waarmee je het geleerde kunt oefenen en eigen kunt maken. Onze video’s zijn Nederlandstalig en ondertiteld. Je hebt 24-7 toegang tot jouw persoonlijke online studieomgeving.

Inhoudsoverzicht van instructievideo’s

53 video’s | Totale videoduur is 03:38:14
Docent en auteur: Belinda Kampf

Starten met CSS

  • Wat is CSS
  • CSS in werking
  • De versies van CSS
  • CSS schrijven, de syntax
  • De reset CSS

CSS stijlen en stijlbladen

  • De inline style
  • Het interne stijlblad
  • Het externe stijlblad
  • CSS-overerving

De CSS selectors

  • HTML-selectors
  • Attribute class- selector
  • Attribute id- selector
  • Pseudo class selector

Starten met reset en css stijlblad

  • Browser gestuurde vormgeving overschrijven met reset.css
  • Extern stijlblad aanmaken en koppelen

Tekst vormgeven met CSS

  • Font-family: Lettertype opgeven
  • Praktische toepassing van fonts in webdesign
  • Font-size: Corpsgrootte bepalen in pixels
  • Theorie: Font-size, corpsgrootte bepalen in em
  • Praktijk: Corpsgrootte bepalen in em

Font Properties vormgeven

  • Font-weight bepalen
  • Font-style bepalen
  • Font-variant bepalen
  • Tekst kleuren met ‘color’
  • Google webfonts toepassen in webpagina
  • Shorthand notation voor font-properties

Kleuren en kleurschema’s kiezen

  • Kleur kiezen in Adobe Photoshop
  • Kleurenschema samenstellen

Text Properties vormgeven

  • Text-transform: Hoofd en kleine letters toepassen
  • Text-decoration: Onderstrepen van teksten en links
  • Text-indent: Tekst in laten springen
  • Text-align: Tekst uitlijnen (CSS3 text-align-last, text-justify)
  • Letter-spacing / word-spacing

Overige tekstopties

  • White-space
  • Line-height: Interlinie bepalen voor tekst
  • Text-shadow (CSS3)

Vormgeven van lijsten

  • List-style-type voor ongenummerde lijsten ‘ul’
  • List-style-position voor ongenummerde lijsten ‘ul’
  • List-style-image voor ongenummerde lijsten ‘ul’
  • Opsommingstekens voor geordende lijsten ‘ol’
  • Shorthand notation voor list-style eigenschappen

Vormgeven van achtergrond, background

  • Background-color toepassen
  • Background-image toepassen
  • Background-repeat toepassen
  • Background-position toepassen
  • Background-attachment toepassen
  • Repeat-x en repeat-y
  • Shorthand notation voor background-properties
  • Afbeeldingen verticaal opmaken, vertical-align

Pseudo classes en elementen

  • Links vormgeven met de pseudo-classes
  • De pseudo class first-child
  • Taal anders vormgeven met pseudo class ‘lang’
  • Pseudo-element first-letter & first-line
  • Pseudo-element before & after

Blijf op de hoogte van nieuwe ervaringen

Er zijn nog geen ervaringen.

Deel je ervaring

Heb je ervaring met deze cursus? Deel je ervaring en help anderen kiezen. Als dank voor de moeite doneert Springest € 1,- aan Stichting Edukans.

Er zijn nog geen veelgestelde vragen over dit product. Als je een vraag hebt, neem dan contact op met onze klantenservice.

Download gratis en vrijblijvend de informatiebrochure

(optioneel)
(optioneel)
(optioneel)
(optioneel)

Heb je nog vragen?

(optioneel)