Responsive websites bouwen met Bootstrap 5 - Framework

MODULE 1: INSTALLATIE BOOTSTRAP FRAMEWORK

In module 1 leert u wat Bootstrap 5 Framework is en leert u de basisstructuur van de Bootstrap 5 Basic-webpagina. Daarnaast zal u kennismaken met 3 mogelijke installaties voor Bootstrap. In deze eerste module zullen we de eerste en de eenvoudigste installatie om het Bootstrap framework te gebruiken - nl. het Content Delivery Network (CDN) - toepassen.

De andere installatieopties zullen naarmate we in de andere modules vorderen aanvullend besproken en toegepast worden:

• Downloaden van het Bootstrap Framework
• Bootstrap installeren via NPM: Node Package Manager van Node.js

MODULE 2: RESPONSIVE DESIGN MET BREAKPOINTS

In module 2 leert u de “breakpoints” in het Bootstrap 5-rastersysteem, de beschikbare soorten containers en tot slot ook hoe het Bootstrap 5-grid voor meerdere apparaten te gebruiken zoals smartphone, tablet of desktop. In deze module staat - met andere woorden - het leren omgaan met een responsive design gebruikmakend van het Bootstrap Framework centraal.

MODULE 3: TYPOGRAFIE EN SEMANTIEK

In module 3 leert u over de hoofdinhoud van Bootstrap 5. Hier zullen we het hebben over typografie en semantiek. M.a.w. naast HTML dient u de correcte HTML5 opmaak te gebruiken volgens de laatste standaarden van het web.

MODULE 4: FORMULIEREN MET BOOTSTRAP

In module 4 komen formulieren en formulierbesturingselementen in Bootstrap 5 uitgebreid aan bod. Eerst starten wij met een eenvoudig inlogformulier opgemaakt met Bootstrap 5-form componenten en formulierbesturingselementen. Vervolgens komen gaandeweg de meer geavanceerde methodes aan bod om aangepaste en ingebouwde CSS te impliceren. Vervolgens leert u ook de lay-out van formulieren in te stellen en vorm te geven binnen de Bootstrap 5-pagina.

MODULE 5: BOOTSTRAP COMPONENTEN

In MODULE 5 komen de componenten in Bootstrap 5 op basis van heel wat praktijkvoorbeelden aan bod. U leert hoe caroussels (sliders) te maken en aan te passen, cards, breadcrumps, knoppen, ... Kortom alle onderdelen van de componenten worden tegen het licht gehouden.

MODULE 6: SCSS/SASS

In module 6 komt het schrijven van  SCSS aanbod. Dit is nodig om de volgende stap te kunnen nemen in het bootstrap Framework.  Hier leren we Bootstrap op een professioneel niveau te gebruiken, nl. de upgrade om SCSS te leren schrijven i.p.v. CSS. SCSS is een nested metalanguage die op een meer gestructureerde wijze gebruikt maakt van dezelfde symatiek als CSS maar meer mogelijkheden biedt en - zoals eerder gezegd - vooral duidelijker gestructureerd is.

Dit wil zeggen dat Bootstrap de mogelijkheid heeft om gebruik te maken van SCSS bestanden.  We schakelen dus een niveau hoger en leren geen CSS meer schrijven maar SCSS. Met SCSS kunnen we CSS beter gestructureerd schrijven.  Daarnaast leren we hoe SCSS uiteindelijk terug naar CSS wordt gecompileerd. Wanneer we op dit niveau zitten dan is het mogelijk om tevens gebruik maken van, variabelen, nesting, MIXINS en inheritance die het Bootstrap framework eveneens 'in huis' heeft.

MODULE 7: THEME KIT

In module 7  leren wij hoe een eigen theme kit samen te stellen. Dit is het hoogst mogelijke niveau (“entiteit”) binnen het bootstrap framework. Een theme kit is eigenlijk een soort project-template om snel en efficiënt een bootstrap project “from scratch” op te starten waarin voorafgaand steeds terugkerende keuzes reeds gemaakt werden (die in elk project terugkomen) en die nu via deze project-template eigenlijk “geautomatiseerd (voorafgaand ingevuld)” werden, waardoor u veel sneller “up and running” bent om een project op te starten via het Bootstrap Framework.

MODULE 8: SITE ONLINE

In module 8 wordt het volledig proces en alle elementen die nodig zijn om een site online te zetten uitvoerig besproken. Aan de hand van de rode draad oefening leert u een bootstrap project als een afgewerkte site online te publiceren.

MODULE 9: GEZAMENLIJKE OEFENINGEN EN REAL LIFE PROJECTEN

Module 9 behandelt alle oefeningen die we gedurende de andere modules samen hebben afgewerkt als één geheel te publiceren.  Via een helicopter view bekijken wij dus alle voorgaande modules "grensoverschrijdend" en hoe deze modules met elkaar verbonden zijn om op deze wijze een compleet project - waarbij bvb verschillende front end developers elk een bepaalde module hebben ontwikkeld - als één werkende totaaloplossing te publiceren.