Bootstrap Herhaling

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Bootstrap 4

Herhaling

Leerdoelen

- Na deze les ben je voorbereid op de Bootstrap toets.

- Na deze les weet je hoe je portfolio beoordeeld wordt. 

Wat gaan we doen?

- Voorbereiden op de toets door vragen te beantwoorden.

- Vragen beantwoorden

- Voorbeeld portfolio laten zien

- Beoordelingsformulier Portfolio

- Wedstrijd: Wireframe in groepen

- Huiswerk opdracht

- Vragen? 

Hoe ver ben jij met de Bootstrap opdrachten?

1. Ik heb alles af.
2. Ik ben bijna klaar.
3. Ik ben nog bezig.
4. Ik ben nog niet begonnen.

Uit hoeveel kolommen bestaat het GRID systeem in Bootstrap?

1. 10
2. 6
3. 12
4. 2

Hoe zit de kolom eruit wanneer je 4 kolommen wilt maken in het Bootstrap GRID systeem?

1. col-md-2
2. col-md-3
3. col-md-4
4. col-md-12

Welke twee Bootstrap classes zie je hier?

Wat is het verschil tussen een id en class?

Wat is een badge?

Wat doet de class: container?

1. Vult de hele breedte van de browser
2. Zorgt voor witruimte aan de linker en rechter kant
3. Zorgt ervoor dat de browser responsieve is
4. Heeft geen functie

Nu je de vragen beantwoord hebt:
Ga jij een voldoende halen voor de Bootstrap toets?

1. Ja, ik snap alles.
2. De theorie zal goed gaan, voor praktijk moet ik nog oefenen.
3. Als ik aankomende week ga leren zal ik het halen.
4. Ik heb er geen vertrouwen in.

Laten zien:

- Voorbeeld Portfolio

- Beoordelingsformulier Portfolio

Wedstrijd: Wireframe

Opdracht in groepen: Breakout rooms.

Jullie krijgen 30 minuten om een wireframe te maken voor de volgende case.

Na de 30 minuten presenteert iedere groep, 5 minuten zijn wireframe. 

De docent kiest de beste wireframe.

Wireframe: Case

Samen in je team ontwerp je een wireframe voor de nieuwe website: Triton.

Sportschool Triton is net geopend en wil graag een website. In de website kun je abonnementen, sportattributen en voedingssupplementen kopen.

Maak samen een wireframe voor Triton. Beschrijf bij de wireframe goed over welke Bootstrap elementen (classes) het gaat.

Let op: Jullie mogen zelf bepalen wat voor sportschool het is.

Jullie krijgen 30 minuten om een wireframe met beschrijving te maken.

Wat was een wireframe ook alweer?

Schets van een applicatie. Voor voorbeelden zie: https://www.lucidchart.com/pages/nl/wat-zijn-website-wireframes

Voor inspiratie voor een applicatie zie: https://www.wphandleiding.nl/beste-wordpress-fitness-themas-2017/ 

Vervolg: Wedstrijd: Wireframe

Presenteren van de Wireframes.

Gewonnen

Welke Wireframe heeft gewonnen?

Prijs:

Het winnende Wireframe is de Wireframe die als huiswerkopdracht nagemaakt wordt in Bootstrap.

Kijk goed naar de onderwerpen

- GRID                                             - alert

- jumbotron                                 - nav/navabar

- card                                              - image

- list-Group                                  - table

Tip: Bekijk de code van het voorbeeld portfolio.

Huiswerk

- Namaken van de Wireframe in Bootstrap. 

- Portfolio: Aankomende les (uurtje), presenteren van je portfolio.

Bekijk hiervoor goed het beoordelingspunten en verwerk deze zo goed mogelijk in je portfolio.

Hebben jullie nog vragen?