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.
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).
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.
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!
Project files
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:
portfolio-cursus