Web Fundamentals

Weergave

Labo 4: container, nav en links ​

Opnieuw een apart oefenproject binnen je portfolio, in projecten/labo04/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/labo04/index.html, zoals bij de vorige labo's.

Doelstellingen ​

Na dit labo kan je:

  • box-sizing: border-box toepassen en uitleggen wat het verandert CORE_3.3
  • een page container maken met max-width, margin-inline en padding-inline CORE_3.6
  • uitleggen waarom de container binnen je landmarks staat en niet errond CORE_3.6
  • een navigatielijst opmaken en het klikbare oppervlak van een link vergroten CORE_4.2
  • uitleggen waarom verticale padding op een inline element niets lijkt te doen CORE_3.3
  • links opmaken in al hun toestanden, met een zichtbare focus CORE_4.2 CORE_7.1
  • pseudo-classes, combinators en attribute selectors gebruiken CORE_3.2
  • herbruikbare classes schrijven en ze stapelen CORE_3.2
  • afmetingen kiezen in rem, % en dvw/dvh CORE_3.5
  • herkennen wanneer verticale marges samenvallen CORE_3.3

Voorbereiding ​

Maak de map projecten/labo04/oplossing/ met daarin index.html en styles.css.

De HTML ​

Schrijf zelf de HTML die nodig is om het resultaat uit figuur 0 te krijgen. Pas je lang aan en geef de pagina de title Labo 04.

De pagina zonder CSS, zoals de browser ze standaard toont

💡 Cheat sheet

Drie weken geleden heb je dit al eens gedaan. Lukt het niet meteen zonder spieken?
Lees dan zeker de cheat sheet nog eens na.

De CSS ​

html
<link rel="stylesheet" href="https://unpkg.com/@csstools/normalize.css">
<link rel="stylesheet" href="styles.css">

Neem je :root en je body over uit labo 3. Je lettertype mag je hergebruiken, of je downloadt er een nieuw. Zelf hosten, uiteraard!

Zet daar box-sizing bovenop.

Weet voor je doet

Zorg dat je weet wat die selector doet en waarom dat nodig is!

css
*, *::before, *::after {
    box-sizing: border-box;
}

De container ​

Schrijf een .container class die drie dingen doet:

  • max-width van 90rem
  • links en rechts gecentreerd, ook op een breder scherm
  • 1rem ruimte links en rechts, ook op een smaller scherm

Gebruik logical properties.

Zet de class daarna in je HTML

  • binnen je header
  • binnen je main
  • en binnen je footer.

Geef je header een achtergrondkleur en een tekstkleur, en je footer een donkere achtergrond.

Breed scherm, de container stopt op 90rem

Smal scherm, de padding houdt de tekst van de rand

Controlepunt 1

Maak je browservenster breder en smaller terwijl je labodocent kijkt. De achtergrondkleur van je header loopt door tot de schermrand, de inhoud blijft gecentreerd, en de tekst plakt nooit tegen de rand.

Probeer

Zet de .container class eens op de header zelf in plaats van erbinnen, en kijk wat er met de achtergrondkleur gebeurt.

📝 Voor je verslag: waarom zet je die class binnen je landmarks?

De nav ​

De lijst resetten ​

Een ul heeft browser defaults: padding, margin en list-style. Haal die alle drie weg voor de lijst in je nav.

Opgelet! Enkel voor de lijst in je nav.

De andere lijsten op je pagina houden hun bolletjes.

Je zal dus een combinator moeten gebruiken

Een groter klikbaar oppervlak ​

Je nav-links zijn nu maar zo groot als hun tekst. Dat is een erg klein oppervlak om op te klikken, en op een telefoon is het bijna onmogelijk.

Geef alle links in de nav padding:

  • 1rem boven en onder
  • 2rem links en rechts

Links en rechts werkt. Boven en onder niet!
Hoe komt dat? Met welke property op de a-tag los je het op? Zie het box model.

Voor: de padding links en rechts staat er, boven en onder niet

Na: je header is hoger geworden en je links staan uit elkaar

📝 Voor je verslag:

Waarom doet die verticale padding niets, en met welke property los je het op? Zie het box model.

💡 touch target

Maak altijd de link zélf groter met padding en pas eventuele achtergrondkleuren rechtstreeks op de link toe. Zo vergroot je de touch target.

Kleur en onderlijning ​

Links hebben ook defaults: blauw, paars als je ze bezocht hebt, en onderlijnd.

  • zorg dat de links in je nav hun tekstkleur overerven van de header
  • haal de onderlijning weg (none), enkel in de nav

Overal elders blijft de onderlijning staan

In 99% van de gevallen is een onderlijning een heel goed idee, want anders ziet je bezoeker niet wat klikbaar is. In een nav mag ze weg, omdat de plaats al zegt dat het links zijn.

Uitlijnen ​

Een nav-link (nav a) heeft nu 2rem padding links. De rest van je pagina heeft die niet. Nu staan links en tekst dus niet netjes onder elkaar.

De nav is niet uitgelijnd met de hoofdinhoud

Zet de linkermarge van de lijst (nav ul) op -2rem. De twee heffen elkaar op.

De nav is uitgelijnd

Hover en focus-visible ​

Geef je nav-links een lichtere achtergrondkleur zodra je er met de muis over gaat of er met de tab-toets op belandt. Schrijf dat in één regel, met een grouped selector.

css
nav a:hover,
nav a:focus-visible {
    /* ... */
}

Test met je tab-toets.

De derde link, met de muis erboven

Dezelfde nav na één keer tab

Controlepunt 2

Navigeer met de tab-toets door je hele pagina terwijl je labodocent kijkt. Op elk moment is zichtbaar waar je bent.

Probeer

Geef alle links op je pagina een eigen :focus-visible met een duidelijke outline, bijvoorbeeld outline: 4px dotted. Tab daarna nog eens door je pagina. Wat doet shift-tab?

Geavanceerde selectoren ​

Het tweede item in je nav ​

Geef het tweede item in je nav een andere achtergrondkleur en een andere tekstkleur, met :nth-child().

Het tweede item met een eigen achtergrond- en tekstkleur

Probeer

Doe hetzelfde met :nth-child(odd) en :nth-child(even) op de lijstitems in je hoofdinhoud. Inspecteer met je browser devtools, staat :nth-child(odd) zoals jij ze geschreven hebt?

De laatste paragraaf in je footer heeft een ondermarge, en die geeft je een streep in de achtergrondkleur onderaan je pagina.

De ondermarge van de laatste paragraaf, als een streep onder je footer

Zet de marge van het laatste element in je footer op 0, met een combinator en een pseudo-class.

Je footer loopt door tot de onderkant van de pagina

De paragraaf na een titel ​

Zorg dat elke paragraaf die direct op een h2 volgt cursief wordt. De paragrafen verderop in de sectie blijven staan zoals ze zijn.

De eerste paragraaf onder de titel staat cursief

Geef elke link die mozilla in zijn href heeft een achtergrondkleur met een alfawaarde.
Zoek op MDN hoe je op een deel van een attribuutwaarde selecteert.

Alleen de link naar mozilla.org krijgt een achtergrond

Herbruikbare classes ​

highlight ​

Maak een class .highlight die tekst vet en cursief maakt. Hang ze aan minstens twee span-elementen in je hoofdinhoud.

box-sizing staat vet en cursief, de rest van de regel blijft gewoon

Probeer

Kijk waar .highlight nu in je HTML staat. Krijg je diezelfde opmaak ook met een element selector, bijvoorbeeld strong of em?

Wanneer kies je een class, en wanneer een semantisch element?

Een modifier ​

Maak een class .container--narrow met een max-width van 40rem, en hang ze naast.container aan het element in je main:

html
<div class="container container--narrow">

Je hoofdinhoud op 40rem, je header en footer nog altijd op 90rem

Utility classes ​

Maak vier classes die elk één ding doen:

css
.m-1 { /* margin 1rem */ }
.m-2 { /* margin 2rem */ }
.p-1 { /* padding 1rem */ }
.p-2 { /* padding 2rem */ }

Zet ze op een paar elementen in je hoofdinhoud, en stapel ze: class="m-1 p-2".

💡 Deze manier van werken heet utility classes, of functional CSS.

Dat komt later nog aan bod wanneer we spreken over CSS libraries en frameworks.

Inheritance en specificity ​

Zet een span met class highlight in je footer. Zorg dat .highlight zich daar anders gedraagt dan in je hoofdinhoud:

  • niet vet
  • niet cursief
  • een tekstkleur met genoeg contrast tegen je donkere footer

De class in je HTML blijft highlight. Je schrijft alleen CSS bij.

ELOICT in de footer: geen vet, geen cursief, een eigen kleur

Het box model ​

Margin collapsing ​

Geef je h2-elementen een margin-bottom van 3rem en je paragrafen een margin-top van 2rem.

Meet daarna in het Layout panel van je devtools hoeveel ruimte er tussen een h2 en de paragraaf eronder zit.

📝 Voor je verslag: hoeveel ruimte zit er tussen, en hoe komt dat?

Afmetingen die meeschalen ​

Geef je main een padding boven en onder die meeschaalt met het venster, met dvh en dvw. Vergroot en verklein daarna je browservenster.

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

Verslag ​

Schrijf je verslag op projecten/labo04/index.html, in de vaste opbouw: doelen, link naar je oplossing, omschrijving, gerelateerde links, de antwoorden op van 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 container doet niets. Staat de class op het element, en heeft dat element ook echt ruimte om smaller te worden? Meet het na in het Layout panel.

Mijn header heeft witte randen links en rechts. De .container staat op de header zelf in plaats van erbinnen.

Mijn nav-links overlappen de rest. Verticale padding op een inline element. Zie een groter klikbaar oppervlak.

Mijn tweede nav-link loopt tot tegen de schermrand. Dat komt van de negatieve marge bij uitlijnen.

Axe klaagt over contrast in mijn footer. Je tekstkleur erft van :root en je achtergrond is donker. Zet een eigen color op je footer.