Samenvatting Labo 06 - CSS-Frameworks

Doelstellingen

  • Begrijpen wat een CSS-framework is en waarvoor het gebruikt wordt.
  • Correct gebruik maken van Bootstrap classes en componenten.
  • Inzicht krijgen in het bootstrap grid-systeem.
  • Begrijpen wat JavaScript doet binnen een CSS-framework.
  • Werken met documentatie om een framework correct te gebruiken.
  • Inzicht verwerven in functional CSS en OOCSS.

Beschrijving van de oefening

In dit labo lag de focus op het werken met CSS-frameworks, meer bepaald Bootstrap. Aan de hand van screenshots van een website op verschillende schermgroottes (desktop, tablet en mobiel) moest een responsieve website zo nauwkeurig mogelijk nagemaakt worden.

Daarnaast werd gewerkt met externe JavaScript-bibliotheken zoals BaguetteBox en bootstrap componenten zoals een navigatiebalk en carrousel.

Wat was belangrijk?

  • Correct gebruik van het Bootstrap grid-systeem (rows en columns).
  • Responsief gedrag van de layout op verschillende schermgroottes.
  • Correct implementeren van Bootstrap componenten.
  • Integratie van een JavaScript-bibliotheek zonder zelf JS te schrijven.
  • Gebruik van semantische HTML en geldige structuur.
  • Het verschil begrijpen tussen functional CSS en OOCSS.

Wat had ik nodig?

  • Bootstrap CSS en JavaScript
  • BaguetteBox Javascript-bibliotheek.
  • HTML5 semantische elementen.
  • CSS kennis (functional CSS en OOCSS).
  • Browser DevTools.
  • Bootstrap DevTools.

Gerelateerde Links

Reflectie

Beschrijf wat je goed gedaan hebt:

  • Bootstrap grid correct toegepast.

    Responsieve layout werkte goed op alle schermgroottes.

    Carrousel en BaggueteBox werkten correct.

    Website kwam visueel heel sterk overeen met de screenshots.

Beschrijf wat moeilijk was:

  • Correcte kolomverdelingen bepalen voor verschillende schermgroottes.

    Bootstrap classes efficiënt combineren zonder overbodige CSS.

    Afstemming tussen layout en semantische HTML.