38e ict-praktijkdag #ictdag38

Inhoud

Inleiding

Soms hebben we (snel) een webpagina nodig voor een project. Een opendeurdag, wafelverkoop, een MOS-project, een portfolio ... Hiervoor kun je dan een leuke template downloaden en deze aanpassen naar eigen content en smaak.

Bootstrap is een verzameling hulpmiddelen voor het maken van professioneel ogende websites. Het is gratis en open source. Het bevat sjablonen gebaseerd op HTML en CSS voor typografie, formulieren, knoppen, navigatie en andere interfaceonderdelen. Het bevat ook JavaScript-extensies. Het Bootstrap-framework is bedoeld om webontwikkeling te vereenvoudigen.

Het is gemaakt voor mensen van alle niveaus, apparaten van alle vormen, en projecten van alle soorten en maten.

Inhoud

Wil je jouw professionele webvaardigheden een flinke boost geven? Dan is deze nascholing iets voor jou! Leer hoe je effectief gebruik maakt van het Bootstrap framework om strakke en responsieve websites te ontwerpen. Of je nu een doorgewinterde ontwikkelaar bent of net begint, deze training biedt waardevolle inzichten die je niet wilt missen. Bereid je voor op een inspirerende nascholing vol ontdekkingen en praktische toepassingen.

We maken kort kennis met het ontstaan van Bootstrap, wat/waar downloaden en hoe integreren we dit in onze webpagina. We maken kennis met het grid systeem en leren de voornaamste elementen gebruiken. We experimenteren met een aantal herbruikbare componenten en leren deze ‘on the fly’ aan te passen via onze browser.

Responsive grid systeem

Voor de verschillende schermafmetingen moet een website zich automatisch kunnen aanpassen. Het “Responsive grid systeem" zorgt voor de verschillende weergaven. Bootstrap heeft een grid systeem dat de volgende 4 afmetingen ondersteunt: zeer kleine schermen (smartphones), kleine schermen (tablets), middelgrote schermen (bijvoorbeeld laptops) en grote schermen (desktop-pc’s).

Standaard componenten

Meer dan een dozijn herbruikbare componenten van Bootstrap kunnen we gebruiken:

• eenvoudige HTML-elementen
• responsive grid systeem
• typografie
• lijsten
• iconen
• knoppen & dropdowns
• tabellen
• formulieren
• badges
• alerts
• navigatie
• afbeeldingen
• media objecten
• en nog veel meer...

Alle HTML-elementen krijgen door Bootstrap een professioneel uiterlijk.

Resultaat

Na deze sessie weet je:

• hoe je het Bootstrap moet integreren in je website;
• hoe je basis typografie-elementen kunt toevoegen;
• hoe je HTML-elementen kunt integreren en aanpassen;
• hoe je via het grid systeem een webpagina responsive maakt;
• wat media queries zijn en hoe je ze kunt gebruiken.

Na deze sessie kun je:

• met behulp van Bootstrap een eigen responsive website bouwen;
• voor een project op school snel een mooie website opzetten;
• leerlingen helpen bij hun project met professionele webpagina's;
• en veel meer natuurlijk...

Voorkennis

Verplichte kennis

• Basiskennis van computergebruik en internet
• Basiskennis HTML
• Basiskennis CSS
• Basiskennis websites ontwerpen

Lesmateriaal

Syllabus

Hand-outs van presentatie

Voorbeelden & opdrachten

Sites

Bootstrap

MDN Web Docs