3311. Bouw responsive websites met Bootstrap

Bootstrap maakt webontwikkeling sneller & gemakkelijker

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

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 website ontwerpen is ook zeker nodig!

 

Lesmateriaal

Hand-outs van presentatie

Sites

Bootstrap

ATOM

Interessant voor

  • Leerkracht - Docent
  • Pedagogische ICT-coördinator
  • Technisch ICT-coördinator
  • Pedagogisch begeleider
Uit:
  • Alle onderwijstypes

Thema's

  • Systeembeheer
  • Website

Tijdstip

Dag 3 Tijdslot 3 (5 mei 13:00 - 15:00)
Kostprijs: € 39
Er zijn 20 plaatsen waarvan er 8 bezet zijn.

Vorm

Online hands-on workshop

Bereid je goed voor!

Installeer ZEKER op voorhand:

  • Firefox OF Chrome
  • Notepad++
  • Visual Studio Code (+ installeer 2 extensions => Mithril Emmet & Live Server Ritwick Dey)
  • Een programma om software te unzippen (Winzip, 7-zip)

 

Installeer de nodige software vooraf (zie hierboven). We willen geen tijd verliezen met deelnemers die niet in orde zijn met de lesvoorbereiding.

 

Herstart je computer voor je deelneemt aan de ICT-praktijkweek en werk bij voorkeur via een netwerkkabel, zo is je verbinding optimaal.

Test video en geluid. Hou je webcam open, zodat de spreker je kan zien. We streven naar optimale interactie en betrokkenheid.  

Zorg voor een groot / tweede scherm of extra laptop, zodat je in je ene browser(tabblad) het evenement kan bijwonen en de spreker kan zien, terwijl je in je andere browser(tabblad) of in een andere toepassing de instructies uitvoert tijdens deze hands-on workshop.

Veel leerplezier!

Lesgever

Stijn Willekens
Lees meer over de expertise van Stijn.

Korte titel : Websites bouwen: Bootstrap #TI

Deze pagina werd al 1151 keer bekeken