terug naar lessen overzicht

Zelfstudie 5: Week 2 opdracht media album

In deze zelfstudie serie:
checkmark simple
Portfolio opdracht media album: deel 2
checkmark simple
Portfolio opdracht media album: deel 3
checkmark simple
Portfolio opdracht media album: deel 4
checkmark simple
Portfolio opdracht media album: deel 5
checkmark simple
Portfolio opdracht media album: deel 6
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

Portfolio opdracht media album: deel 1

Volg de video en codeer mee

In deze video les leggen we de basis van ons HTML bestand.

Portfolio opdracht media album: deel 2

HTML Figure

Een <figure> tag is een wrapper voor meestal een afbeelding en de caption van deze afbeelding. Echter kan het ook gebruikt worden voor codeblocks, audio en meer.
Het gebruik van een figure tag is semantic juist echter gebruiken veel developers gewoon een div met een class name image oid.

Wanneer een figure tag? Wanneer alleen de img tag?
Een figure tag gebruik je bij belangrijke afbeeldingen, audio etc. De afbeelding is belangrijk voor de content en zonder deze afbeelding zal de flow van de pagina verstoord worden.
Alleen een img tag zonder figure tag is voor afbeeldingen die minder belangrijk zijn en meer decoratief.

figcaption
De figcaption is een omschrijving van de afbeelding, audio of iets anders.

code snippet: html figure

Tekst en andere content in kolommen

We hebben natuurlijk gezien met Flexbox dat je daarmee heel makkelijk content in kolommen kan zetten. Als je echter een masonary grid wil bouwen met flexbox dan wordt dit een stuk lastiger (niet onmogelijk).

voorbeeld: masonry grid

Een makkelijke manier om dit te realiseren is met CSS columns en CSS gaps.
Dit wordt voornamelijk voor brede paragrafen gebruikt, maar werkt ook goed bij andere el-menten.

code snippet: columns

Portfolio opdracht media album: deel 3

Volg de video en codeer mee

In deze video maken we een lightbox!

Portfolio opdracht media album: deel 4

Video

Een video heeft een eigen tag, namelijk <video></video>. Daarbij heeft het 2 erg belangrijke attributen:  de source en de con-trols. Zonder controls kan de gebruiker de video niet starten pauzeren etc. Zonder de source weet de browser niet welke video er geladen moet worden. De source kan tussen de openings en sluitings tag geplaatst worden of in de openings tag. De controls attribute wordt in de openings tag geplaatst.

Portfolio opdracht media album: deel 5

Audio

Audio heeft net als video een eigen tag: <audio></audio> en werkt ook met een source en controls.

Portfolio opdracht media album: deel 6

Volg de video en codeer mee

In deze video doen we de laatste wijzigingen aan ons media album. Wil je meer foto's, video's of audio bestanden toevoegen? Dat mag natuurlijk!

*Er zijn geen links bij deze video reeks.
icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze discord: HTML CSS JS beginners course

portfolio-cursus

logo - discord

#code-cafe

100+ leden