Bootstrap is niet alleen een frame waarmee je een website responsive kan maken. In de Bootstrap code zijn ook veel elementen gemaakt die standaard voorkomen binnen een website. Denk hierbij aan buttons, invulformulieren, sliders, labels en nog veel meer. In deze opdracht ga je een aantal van deze elementen verkennen en toevoegen aan jouw eigen Ticket Time website.
Tijdsduur training: 4 uur school, 4 uur thuis
Voordat je met de opdracht begint, volg de onderstaande instructievideo’s.
- Bootstrap Buttons / Download oefenbestand
- Bootstrap Forms / Download oefenbestand
- Bootstrap Tooltip / Download oefenbestand
- Bootstrap Carousel / Download oefenbestand
Voor alle Front-end codes gebruik je www.w3schools.com. Specifiek over Bootstrap www.w3schools.com/bootstrap
Opdracht:
Voor deze opdracht ga je een onepage website maken waar de bezoeker tickets kan kopen voor jouw event. Denk hierbij aan een festival, schoolfeest, gameevent, make-up gala, etc., etc. Je mag dit event zelf kiezen of verzinnen. Het doel van deze website is het volledig informeren van de bezoeker over jouw event en de mogelijkheid geven om een ticket te boeken. Deze onepage is zoals vanzelf sprekend responsive voor alle devices en is volledig qua inhoud; afbeeldingen zijn goed, waar/wanneer is het event, wat kost het, wat kan je doen, kan je parkeren, hoe kom ik er.. Er is veel informatie, let op dat jouw website compleet is. Bezoekers moeten door jouw website zin krijgen om naar het event te gaan!
Op deze website zijn een aantal vereiste elementen, hoe en waar is aan jou:
- Bootstrap buttons
- Inschrijf formulier
- Tooltip
- Carousel
Beoordelingscriteria (minimaal)
- De website werkt goed voor de Desktop, Tablet en Smartphone.
- Gebruikte afbeeldingen zijn relevant, juist gecomprimeerd, in proportie en hebben de juiste extenties (JPG, GIF of PNG).
- De content van de websites is relevant en geen Lorem Ipsum.
- Content is compleet, afbeeldingen, waar en wanneer, prijs.
- Bezoeker moet ticket kunnen boeken en relevant informatie in kunnen vullen.
- Alle afbeeldingen en links werken.
- Alle pagina’s zijn foutloos (HTML-validatie).
- De site staat online in jouw 2e jaar portfolio.
- Alle vereiste elementen komen terug.
- Website is een onepage.
- Geen gebruik van template, maar zelf gemaakt.
- Bootstrap 4 is gebruikt
Beoordelingscriteria (maximaal)
- Alle bovenstaande onderdelen zijn perfect uitgevoerd.
- Collapse is toegevoegd perfect uitgevoerd op jouw website.
- Controlling menus with ScrollFix/Affix perfect uitgevoerd op jouw website.
- Eigen classes aangemaakt voor vormgeving en relevant gebruikt.