Labo 06 - CSS-Frameworks (Bootstrap)
Doelen van de opdracht:
- Onderzoeken welke componenten het gekozen framework bevat
- Inzicht krijgen in de werking van JavaScript zonder zelf te coderen
- Een plug-and-play bibliotheek zoals baguetteBox implementeren
- Een bibliotheek of framework gebruiken op basis van documentatie
- Begrijpen wat functional CSS en OOCSS zijn en hoe ze werken
- Op basis van een screenshot een correcte, semantische HTML-pagina bouwen
- Begrijpen wat een CSS-framework is
Beschrijving
In dit labo leer je werken met een CSS-framework zoals Bootstrap.
Je bouwt een responsive website op basis van screenshots en gebruikt componenten zoals een navigatiebalk, carrousel en galerij met BaguetteBox.
Daarnaast oefen je het toepassen van functional CSS en OOCSS en leer je documentatie gebruiken om frameworks correct te implementeren.
Gerelateerde links
De websites die geholpen hebben bij het maken van deze oefening: Mozilla, W3C-validator.Reflectie
- Wat ging goed?
- De footer mooi centreren op de pagina.
- De tekst bij de card van de adoptiemogelijkheden plaatsen.
- Waar twijfel je aan?
- Het implementeren van de hero-sectie. Zorgen dat alles gecentreerd bleef.
- De cards laten schalen bij verschillende schermresoluties.
- De BaguetteBox juist gebruiken, alles geplaatst waar nodig.
- Wat was moeilijk?
- Het logo links en de tekst rechts zetten in de nav.
- De carrousel automatisch en handmatig laten werken.