Labo 6 - CSS-Frameworks (Bootstrap)
Doel van de opgave
- Begrijpen wat een CSS Framework is.
- Onderzoeken welke componenten het gekozen CSS Framework bevat.
- Begrijpen wat JavaScript doet zonder het zelf te moeten schrijven.
- Implementeren van een plug-and-play bibliotheek zoals baguetteBox.
- Aan de hand van documentatie een bibliotheek of framework kunnen gebruiken.
- Begrijpen wat functional CSS en OOCSS zijn en hoe ze werken.
- HERHALING: je kan op basis van een screenshot een correcte, semantische en gevalideerde HTML-pagina bouwen.
Beschrijving
In deze opdracht was het de bedoeling om een website te maken met behulp van Bootstrap, waarbij we verschillende componenten hebben geïmplementeerd zoals een navigatiebalk, hero-sectie, adoptie-cards, een galerij met baguetteBox, een carrousel en een footer. Daarnaast moesten we een productcard twee keer stylen: één keer met functional CSS en één keer met OOCSS, zonder een framework te gebruiken. De focus lag op het correct namaken van een bestaande website op basis van screenshots, het responsive maken van de pagina, en het toepassen van verschillende technieken om zowel functionaliteit als design netjes te implementeren. Hierbij heb ik geleerd hoe je componenten structureert, hoe CSS-frameworks en plug-and-play bibliotheken werken, en hoe je een layout flexibel laat meeschalen op verschillende schermgroottes.
Gebruikte links
Reflectie
De kleine opdracht met de productcard was goed te doen en verliep vlot. Het Bootstrap-gedeelte van de opdracht daarentegen vond ik erg moeilijk, omdat ik hier nog nooit eerder mee had gewerkt. Ik heb hiervoor veel moeten opzoeken en raadplegen, zodat ik de componenten correct kon gebruiken en de layout responsive kon maken. Voor het gebruik van baguetteBox heb ik vooral de PowerPoint gebruikt, wat goed hielp om de galerij correct te implementeren.