Wat leer je in deze online cursus?

Dankzij het zogeheten boxmodel ben je staat om tekst, afbeeldingen en overige media exact te positioneren en vorm te geven zoals je dat wenst. Hiermee bepaal je de layout van de webpagina. Je leert de boxeigenschappen op de juiste manier in te zetten en te benutten. Elke webpagina wordt opgebouwd uit speciaal hiervoor in het leven geroepen html5-elementen (header, nav, aside, footer en div). In deze cursus leer je alle mogelijke vormen van layout te creëren.

Soms moeten elementen zich natuurlijk gedragen in de ‘flow’, maar soms wil je de positie en het gedrag van elementen exact kunnen bepalen. CSS biedt hiervoor specifieke position-stijlopdrachten. Leer hoe je een webpagina-layout maakt in flexibele kolommen maar ook hoe je kaders op vaste posities kunt zetten.

 

Opbouw van de cursus

In 41 lessen leer jij aan de hand van video’s en oefenbestanden hoe je dit allemaal doet. Je krijgt les van Belinda Kampf, zij heeft meer dan 10 jaar ervaring in de IT en geeft al jaren les op het gebied van IT en grafisch design. Benieuwd hoe een les eruit ziet? Bekijk dan de proefles bovenaan de pagina of bekijk een van de gratis lessen in het cursus overzicht.

 

Benodigde voorkennis

Om aan deze cursus deel te nemen is het belangrijk dat je al enige basiskennis van HTML en CSS hebt, want we gaan direct aan de slag. Dus ben je nieuw in deze materie dan raad ik je aan om eerste de cursus “Leer de basis van HTML en CSS’ te volgen.

 

Wat biedt deze online cursus website bouwen en desigen met HTML & CSS?

Leer zelf website maken en vormgeven met HTML & CSS

Meer dan 65+ video lessen

Volledig Nederlands gesproken

24/7 toegang tot al het materiaal

Inclusief oefenbestanden

 

Over de Instructeur

Profielfoto
Belinda Kampf
Mijn naam is Belinda Kampf. Ik ben al jaren actief in de grafische sector en weet alles van de programma’s waarmee jij grafisch kunt ontwerpen. Na lang zelf actief te zijn geweest als grafisch ontwerper geef ik nu voornamelijk les over alles wat met design te maken heeft. Na veel offline les gegeven te hebben, heb ik nu van de belangrijkste kennis gebundeld in online cursussen. Met deze kennis kun je zelf snel aan de slag. Met behulp van video's en oefenbestanden kun je op je eigen tempo leren door te doen. Ik hoop ook jou enthousiast te krijgen en help je met veel plezier op weg in de grafische sector.

Bekijk meer cursussen van Belinda Kampf →

Cursusoverzicht

0. Introductie
0.1 – Introductie & Oefenmateriaal 00:02:00
1. De Box
1.1 – De box PROEFLES 00:03:00
1.2 – Hulpmiddelen in de browser gebruiken 00:04:00
1.3 – Firefox uitbreiden met addons 00:02:00
1.4 – Vormgeven met of zonder reset.css 00:08:00
1.5 – Vormgeven met padding, border en margin 00:07:00
1.6 – Collapsing margins 00:04:00
1.7 – Collapsing margins bij nested elements 00:06:00
1.8 – Boxeigenschappen voor inline elements 00:04:00
1.9 – Boxeigenschappen voor inline block elements 00:02:00
2. Bassiskennis weblayout
2.1 – Layouten in HTML 4 00:04:00
2.2 – Uitleg van weblayout in HTML 5 00:03:00
2.3 – Layout bouwen in HTML 5 met header, nav, aside, footer & div 00:02:00
2.4 – Statische (fixed) layout maken en positioneren met float 00:08:00
2.5 – Kolommen bijeenhouden met behulp van omsluitende div 00:04:00
2.6 – Webpagina layout centreren met omsluitende div PROEFLES 00:04:00
3. Zwevende elementen met float en clear
3.1 – Driekoloms layout maken met float en clear 00:05:00
3.2 – Het clearen van floatende elementen 00:05:00
3.3 – Clear left en right 00:06:00
4. Statische en/of flexibele layouts maken
4.1 – Statische layout vormgeven met boxeigenschappen 00:06:00
4.2 – Adaptive (fluid) layout maken met procenten 00:07:00
4.3 – Adaptive (fluid) layout maken met procenten en absolute maten 00:03:00
5. Werken met kolommen
5.1 – Float combineren met natural flow (2 kolommen) 00:06:00
5.2 – Float combineren met natural flow (3 kolommen) 00:11:00
5.3 – Boxeigenschappen isoleren door nesten (2 kolommen) 00:08:00
5.4 – Boxeigenschappen isoleren door nesten (3 kolommen) 00:04:00
5.5 – De hoogte van kolommen 00:08:00
5.6 – Kolommen met gelijke hoogte creëren 00:03:00
5.7 – Overflow beheersen PROEFLES 00:04:00
6. Positioneren met CSS-eigenschap Position
6.1 – Positioneren met position : relative 00:07:00
6.2 – Praktische toepassing voor position : relative 00:05:00
6.3 – Positioneren met position : absolute 00:04:00
6.4 – Praktische toepassing voor position : absolute 00:11:00
6.5 – Positioneren met position : fixed 00:06:00
6.6 – Praktische toepassing voor position : fixed 00:06:00
6.7 – Z-index PROEFLES 00:06:00
7. Layouten met inline en block elementen
7.1 – Uitleg van soorten elementen inline, block & inline-block 00:04:00
7.2 – Boxeigenschappen van inline elementen 00:07:00
7.3 – Inline elementen isoleren met class 00:04:00
7.4 – Inline element creëren met b, i, strong, em, mark & span 00:07:00
7.5 – Boxeigenschappen van standaard inline-block elementen 00:07:00
7.6 – Inline element omzetten naar block element 00:05:00
7.7 – Block element omzetten naar inline element 00:09:00

Reviews

4

4
2 beoordelingen
  • 5 Sterren0
  • 4 Sterren2
  • 3 Sterren0
  • 2 Sterren0
  • 1 Sterren0
  1. Goed te volgen

    4

    Alles wordt stapsgewijs uitgelegd. Ook goed dat er meerdere situaties worden toegelicht. Het is wel handig (zoals de docente ook aangeeft in de omschrijving) om al basiskennis te hebben.

  2. 4

    Ik vond dit een leuke aanvulling na de basiscursus html5 en css. Het is een verdieping en je leert leuke trucjes om de webpagina op te leuken en te verfijnen.

VOLG DEZE CURSUS

75 (incl. BTW)In winkelmand

    Geef cursus cadeau
  • 75 (incl. BTW)
  • Cursus Certificaat
  • Levenslange toegang
  • 43 lessen
  • 3 uren, 51 minuten
  • Nederlands gesproken
  • Leer op alle apparaten
  • 14 dagen geld terug garantie
16 cursisten volgen nu deze cursus
top
  © 2018 Soofos B.V.