Web Fundamentals

Weergave

Labo 5: flexbox, kaarten en modern CSS ​

Opnieuw een apart oefenproject binnen je portfolio, in projecten/labo05/oplossing/.

Dit labo moet niet af zijn op het einde van de les. Werk door tot waar je raakt, en maak de rest thuis af tegen zondag.

gitlab

Commit na elke stap, met een commit message die zegt wat je gedaan hebt.
push ook regelmatig je commits naar gitlab!

📝 Voor je verslag

Een paar opdrachten stellen een vraag. Die staan gemarkeerd met 📝. Je antwoord komt in je verslag op projecten/labo05/index.html, zoals bij de vorige labo's.

Doelstellingen ​

Na dit labo kan je:

  • een project van nul opzetten met normalize, een vast startbestand en een container CORE_3.3 CORE_3.6
  • je kleuren bewaren in custom properties, op :root en lager CORE_3.5
  • een flex container maken en de ruimte tussen items regelen met gap CORE_5.4
  • de vrije ruimte verdelen met flex-grow en een item wegduwen met margin: auto CORE_5.4
  • de volgorde van flex items wijzigen zonder je HTML aan te passen CORE_5.4
  • een titel visueel verbergen en beschikbaar houden voor hulpsoftware CORE_7.2 CORE_7.4
  • een containing block maken en een element erbinnen absoluut positioneren CORE_5.3
  • de hele oppervlakte van een kaart klikbaar maken CORE_5.3 CORE_7.2
  • een stylesheet schrijven met CSS nesting CORE_3.1
  • een transition schrijven op de state die blijft EXT_1

Voorbereiding ​

Start een nieuw project in projecten/labo05/oplossing/.

  • zorg voor een index.html en een styles.css
  • pas je lang attribuut aan
  • geef je document de title Labo 05

Stap 1: de HTML ​

Schrijf zelf de volledige HTML.

  • een header met daarin een nav met vier same page links: Voorbereiding, Columns, Nav, Cards
  • een main met een h1 en vier sections, elk met een eigen titel
  • een footer
  • je .container binnen je header, je main en je footer
html
<link rel="stylesheet" href="https://unpkg.com/@csstools/normalize.css">
<link rel="stylesheet" href="styles.css">

Volgorde is belangrijk. Cascade!

Je lettertype host je zelf, zoals in labo 3. Hergebruik dat van toen, of download er een nieuw.

Stap 3: de CSS ​

Schrijf dit opnieuw, uit het hoofd, en kijk pas achteraf na in labo 4.

  • corrigeer de box-sizing van alle elementen en van alle ::before en ::after pseudo-elementen
  • maak een :root selector met:
    • je font-family, inclusief fallback
    • line-height van 1.6
    • scroll-behavior op smooth
    • twee custom properties: --bg: oklch(0.99 0.003 325) en --primary: oklch(0.25 0.01 325)
    • gebruik die twee voor de achtergrondkleur en de tekstkleur
  • maak een body selector en zet de margin op 0
  • maak een .container:
    • max-width van 80rem
    • links en rechts gecentreerd
    • 1rem ruimte links en rechts

Gebruik logical properties.

Spieken mag, overtypen niet

Je hebt dit in labo 4 al gemaakt, dus kijken mag. Typ het wel zelf opnieuw. Dit startbestand gebruik je de rest van het semester en op je examen, en het moet in je vingers zitten.

Stap 4: de nav in je header ​

Maak je header-nav opnieuw op, ook uit het hoofd:

  • de links naast elkaar, zonder bolletjes
  • een groter klikbaar oppervlak
  • de tekstkleur erft over van de header
  • geen onderlijning, enkel hier

Controlepunt 1

Toon je startbestand en je header aan je labodocent. Je .container werkt op een breed en op een smal scherm, en je nav is bruikbaar met de tab-toets.

Oefening 1: Columns ​

Voeg deze HTML toe onder de titel Columns:

html
<div class="row">
    <div></div>
    <div></div>
</div>

Schrijf een .row class die:

  • twee kolommen naast elkaar zet
  • 2rem ruimte laat tussen de kolommen
  • elke kolom 1rem padding geeft
  • elke kolom een dashed border van 1px geeft, in een kleur naar keuze
  • ervoor zorgt dat de eerste kolom twee keer zo veel van de beschikbare ruimte inneemt als de tweede

De twee kolommen, de linkse twee keer zo breed

De kolommen hebben geen class. Selecteer ze vanuit .row, en gebruik nesting.

De selectoren die ik gebruikt heb

Probeer

Maak je venster smal. De kolommen worden samen te smal om leesbaar te zijn.

📝 Voor je verslag: met welke property laat je ze onder elkaar springen, en vanaf welke breedte gebeurt dat?

Oefening 2: Nav ​

Voeg deze HTML toe onder de titel Nav:

html
<nav aria-labelledby="nav_id">
    <h3 class="visually-hidden" id="nav_id">Navigatieoefening</h3>
    <ul>
        <li><a href="#">Portfolio of Someone</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Nothing</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

"Portfolio of Someone" is ook een link.

De h3 is nodig om een axe-validatiefout te vermijden: je hebt nu twee nav-elementen op dezelfde pagina en die moeten uit elkaar te houden zijn.

De titel verbergen ​

Verberg de h3 visueel met de .visually-hidden class uit de cheat sheet.

Probeer

📝 Voor je verslag: wat is een .visually-hidden class, waarvoor dient ze, en waarin verschilt ze van display: none en visibility: hidden?

De opmaak ​

Het eindresultaat van oefening 2

  • zet de links naast elkaar en laat ze wrappen op een smal scherm
  • geef de vier rechtse links een achtergrondkleur en een contrasterende tekstkleur
  • "Portfolio of Someone" blijft links staan en houdt de kleuren van de pagina, in het vet
  • bij :hover en :focus-visible wisselen de twee kleuren om
  • zet daar een natuurlijk ogende transition op, op zowel de tekstkleur als de achtergrondkleur

Drie dingen om zelf uit te zoeken:

  1. Hoe duw je met ÊÊn property op het eerste list-item de vier andere naar rechts? Je hebt daar geen justify-content voor nodig.
  2. Definieer de twee kleuren als custom properties op de nav zelf, niet op :root. Zie scope en overerving.
  3. Zorg dat er niets verandert aan de nav in je header.

De selectoren die ik gebruikt heb, de .visually-hidden niet meegerekend

💡 Let op je selector

Wil je het eerste list-item aanpassen, of de link in het eerste list-item? Dat is niet dezelfde selector.

Controlepunt 2

Tab door je hele pagina terwijl je labodocent kijkt. Op elk moment is zichtbaar waar je bent, de overgang is vloeiend, en je header-nav is onaangeroerd.

Oefening 3: Cards ​

Voeg deze HTML toe onder de titel Cards:

html
<ul class="cards">
    <li>
        <div class="content">
            <h3>Card title 1</h3>
            <p>Card text Lorem ipsum dolor sit amet.</p>
            <a href="#">Read more about title 1</a>
        </div>
        <img src="https://picsum.photos/350/150?1" alt="">
    </li>
    <li>
        <div class="content">
            <h3>Card title 2</h3>
            <p>Card text Lorem ipsum dolor sit amet.</p>
            <a href="#">Read more about title 2</a>
        </div>
        <img src="https://picsum.photos/350/150?2" alt="">
    </li>
    <li>
        <div class="content">
            <h3>Card title 3</h3>
            <p>Card text Lorem ipsum dolor sit amet.</p>
            <a href="#">Read more about title 3</a>
        </div>
        <img src="https://picsum.photos/350/150?3" alt="">
    </li>
    <li>
        <div class="content">
            <h3>Card title 4</h3>
            <p>Card text Lorem ipsum dolor sit amet.</p>
            <a href="#">Read more about title 4</a>
        </div>
        <img src="https://picsum.photos/350/150?4" alt="">
    </li>
</ul>

De afbeeldingen zijn willekeurig en kunnen bij elke refresh anders zijn.

Het eindresultaat van oefening 3

Volg de drie stappen uit de theorie en werk daarop verder tot je dit resultaat hebt. Je raakt er niet met de slides alleen en zal moeten opzoeken.

  • haal de browser defaults van de lijst weg
  • 2rem tussen de kaarten, en laat ze wrappen
  • elke kaart een flex-basis van 18rem
  • de afbeelding bovenaan, zonder je HTML aan te passen
  • de hele kaart klikbaar

Pas je HTML niet aan

De h3 staat in je HTML boven de afbeelding, en daar hoort hij. Je documentstructuur blijft zoals ze is.

Afwerking ​

  • border-radius van .5em op elke kaart
  • box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1)
  • een zwaardere schaduw bij :hover, met een transition ertussen
  • de afbeelding neemt de volle breedte van de kaart in

💡 De afbeelding steekt buiten de afgeronde hoek

border-radius snijdt de inhoud niet af. Zoek op welke property dat wel doet.

Probeer

Voeg aan ÊÊn kaart een tweede link toe, naar een andere bestemming. Klik erop.

Los het op zoals in de theorie.

Extra uitdaging ​

Vrij werk, en nodig voor een hoge score op je portfolio.

Laat er bij :hover een gekleurd vlak over de kaart schuiven, dat van een cirkel naar een rechthoek groeit en de afbeelding eronder laat doorschemeren.

Beweeg met je muis over de kaarten hieronder, of tab er met je toetsenbord naartoe.

Technieken die je daarvoor kan gebruiken: een ::before of ::after pseudo-element, mix-blend-mode, scale, border-radius, een transition met twee properties en een delay, z-index om de versiering achter het tekstvlak te houden, :has() om ook op focus te reageren, en nesting om het leesbaar te houden.

Zoek op wat je nodig hebt. Niet alles hiervan is in de les gegeven.

đŸĢŖ

Je devtools werken ook op deze site.

Valideren en indienen ​

Valideren ​

  1. W3C Markup Validation Service: nul errors
  2. axe DevTools: geen meldingen, contrast inbegrepen
  3. Tab door je pagina: de focus is overal zichtbaar, en elke kaart heeft ÊÊn tabstop

Controlepunt 3

Toon je gevalideerde pagina op je eigen adres, met je kolommen, je nav en je kaarten.

Thuis: je portfolio ​

Neem over in je eigen portfolio:

  • je kleuren als custom properties
  • de kaarten op je projectenpagina, met een kaart per labo
  • je link-states met transition, op alle links

⚠ī¸ Natuurlijk allemaal aangepast aan je eigen stijl!

Probeer

Zet je header op position: sticky met top: 0, zodat je navigatie blijft hangen bij het scrollen. Let op je z-index.

Verslag ​

Schrijf je verslag op projecten/labo05/index.html, in de vaste opbouw: doelen, link naar je oplossing, omschrijving, gerelateerde links, en de antwoorden op elke vraag die met 📝 gemarkeerd staat...

Indienen ​

Alles staat online tegen zondag om 20u, op je eigen adres, en in je GitLab-project.

Als er iets misgaat ​

Mijn kaarten staan nog onder elkaar. display: flex staat op de li in plaats van op de ul. De flex container is de ouder.

Mijn afbeelding gaat niet naar boven. order werkt alleen op een flex item. Staat de li zelf wel op display: flex?

Mijn link bedekt de hele pagina in plaats van de kaart. De li mist position: relative, dus het pseudo-element zoekt een containing block hogerop. Zie positioning.

Mijn pseudo-element is nergens te zien. content: "" ontbreekt.

Mijn tweede link in de kaart is niet klikbaar. Selecteer hem met a:not(.overlay-link) en geef hem position: relative Ên een z-index. z-index doet niets op een element met position: static.

Mijn transition doet niets bij het weggaan van de muis. De transition staat op :hover in plaats van op de gewone state.

De nav in mijn header is mee veranderd. Je selector is te breed. Nest je nav-regels binnen main, of zie specificity.