Labo 06 – CSS Frameworks (Bootstrap)

Doelen van de oefening

• Begrijpen wat een CSS Framework is en waarvoor het gebruikt wordt.
• Onderzoeken welke componenten het gekozen CSS Framework (Bootstrap) bevat.
• Begrijpen wat JavaScript doet zonder zelf JavaScript te schrijven.
• Implementeren van een plug-and-play bibliotheek zoals baguetteBox.
• Aan de hand van documentatie een framework of bibliotheek correct kunnen gebruiken.
• Begrijpen wat functional CSS en OOCSS zijn en hoe deze methodes werken.
• Herhaling: op basis van screenshots een correcte, semantische en gevalideerde HTML-pagina bouwen.

Ga naar de oplossing

Beschrijving

In dit labo maakten we kennis met CSS Frameworks, met een focus op Bootstrap. We leerden hoe je snel layouts opbouwt met het grid-systeem en hoe je bestaande componenten zoals navigatiebalken, cards en carrousels correct implementeert.

Daarnaast maakten we gebruik van de JavaScript-bibliotheek baguetteBox om een afbeeldingsgalerij te bouwen zonder zelf JavaScript te schrijven. Ook werd er stilgestaan bij het verschil tussen functional CSS en OOCSS aan de hand van een kleine oefening.

Indienen & evaluatie

• De kleine oefening werd gecontroleerd tijdens het labo.
• De Bootstrap-website werd ingediend via Toledo vóór vrijdag 20u.
• Dit labo telt mee voor de permanente evaluatie.
• Zoals elke week werd een labo-verslag toegevoegd aan het portfolio.
• De evaluatie van de Bootstrap-website gebeurde op basis van layout, carrousel, baguetteBox, en correcte HTML met semantische tags.

Geraadpleegde links

• Bootstrap officiële documentatie
• baguetteBox.js
• MDN Web Docs

Reflectie