Responsive websites bouwen met Bootstrap 5 - Framework


Van grafisch design tot responsive website
#200604
#Opleiding #Informatica
NIEUW

Introductie

Bootstrap 5 wordt steeds meer gebruikt als CSS framework (gratis open source framework) om snel en efficiënt moderne responsive websites te bouwen. De stijgende populariteit van Bootstrap 5 heeft voornamelijk te maken met het makkelijk gebruik van alle hulpmiddelen die binnen het framework vlot beschikbaar zijn. Daarnaast speelt ook de onderhoudbaarheid van de gebouwde responsive websites hierin eveneens een zeer belangrijke rol. Dit zijn de voornaamste reden waarom Bootstrap 5 door steeds meer developers gebruikt wordt.

Het Bootstrap 5 framework bevat sjablonen gebaseerd op HTML5, CSS3 en FLEXBOX voor typografie, formulieren, knoppen, navigatie, maar ook JavaScript-extensies. Kortom het “Bootstrap-framework” werd ontwikkeld met als doel responsive webontwikkeling te vereenvoudigen en hierin zijn de oprichters wonderwel in geslaagd! Vanaf Bootstrap 3 werd de visie “Mobile first” en “flat design” toegepast. Daarenboven is Bootstrap een opensource framework dat zeer eenvoudig beschikbaar is via GitHub, waardoor de code voor (agile) developers (teams) volledig beschikbaar en aanpasbaar is. Daarenboven kan Bootstrap eveneens geïntegreerd worden in verschillende CMS systemen zoals Drupal of Joomla, waardoor de content in eigenbeheer blijft en Bootstrap instaat voor de responsive functionaliteit van de website! Je merkt dat er meer dan één reden is om Bootstrap 5 in overweging te nemen als hét framework dat je best kunt inzetten voor het bouwen van al jouw responsive websites.

Omschrijving

In deze opleiding leert u “from scratch” tot een gevorderd niveau responsive websites te bouwen gebruikmakend van Bootstrap 5. U leert “Live Real-World-projecten” te maken met het nieuwste Bootstrap 5 CSS-framework.

Naast CSS maakt bootstrap ook gebruik van SCSS (of ook Sass, Syntactically Awesome Stylesheet) . SCSS/Sass is een stijlsheet-taal die op een meer gestructureerde wijze gebruik maakt van dezelfde symantiek als CSS maar tov CSS meer mogelijkheden biedt. Met SCSS/Sass kan u variabelen, geneste regels, mixins, functies en meer gebruiken, en dit met volledig CSS-compatibele syntaxis. SCSS/Sass helpt om grote stylesheets overzichtelijk te houden en maakt het gemakkelijk om het ontwerp binnen en tussen projecten te delen. Tijdens de opleiding maken wij dan ook de sprong van CSS naar SCSS/Sass.

Aan de hand van een rode draad oefening doorheen de opleiding leert u een volledig operationele responsive website te bouwen en te publiceren. Hierbij krijgt u gaandeweg inzicht in de 3 verschillende methodes hoe responsive websites kunnen gebouwd worden.

Deze opleiding is een echte aanrader voor grafisch designers die hun kennis wensen te verruimen - vertrekkend vanuit een grafisch ontwerp – richting front end software development. Ook IT Professionals zonder grafisch achtergrond kunnen probleemloos aansluiten bij deze opleiding.

Samengevat is "Het ontwerpen van reponsive websites met Bootstrap 5" een zeer leuke creatieve hands-on opleiding die uw carrière richting Front-end Developer ongetwijfeld een serieuze boost zal geven!

Voor wie is deze opleiding bestemd?

  • Grafisch vormgevers, designers, (IT) professionals met ambitie om interactieve responsive websites te bouwen (front-end software development)
  • Front-end software developer in spé

Voorkennis

  • Voorkennis van JavaScript is niet vereist
  • Een grafische voorkennis is niet vereist
  • Kennis van de basisprincipes HTML CSS is wel vereist

Methodologie

De verhouding tussen  theorie en praktijk bedraagt 35% - 65% in deze opleiding. Het praktijkgedeelte bestaat voornamelijk uit demo's door de docent, gevolgd door handson oefeningen die de deelnemers elk individueel op hun computer uit voeren.

Programma

MODULE 1: INSTALLATIE BOOTSTRAP FRAMEWORK

In module 1 leer je wat Bootstrap 5 Framework is en de basisstructuur van de Bootstrap 5 Basic-webpagina. Daarnaast maak je kennis 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 leer je 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 leer je over de hoofdinhoud van Bootstrap 5. Hier zullen we het hebben over typografie en semantiek. M.a.w. naast HTML dien je 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 leer je 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. Je 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, waardoorje 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 leer je 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.