Dit is een combinatie website, je ziet een voorbeeld van het project en wat je allemaal gaat leren/ doen deze periode.
In dit project ga je samen met je teamgenoten 1 website maken. De website bestaat uit een aantal onderdelen die je of samen of alleen maakt.
De algemene pagina's, de huisstijl en de layout die maak je uiteraard samen. In dit project ga je te werk met Bootstrap 5 voor het opmaken van je pagina's. Als de huisstijl en algemene pagina's eenmaal gemaakt zijn, ga je binnen je eigen huisstijl jouw eigen onderdeel bouwen.
Elk onderdeel heeft vervolgens 3 categorieen. Die pagina's maak je ook statisch, de namen en data van de categorieeen kies jezelf. Er komen dus 3 losse pagina's bij. Elke pagina wordt vervolgens gevuld met informatie die je via een API met JSON data gaat ophalen met JavaScript en de Fetch methode.
Voor dit project werk je met de lessen HTML/CSS, JavaScript een website maken. Deze keer ga je dit met een team van 3 studenten de site maken. De site bestaat uit 2 hoofddelen.
Week | HTML/CSS | JavaScript | Project |
---|---|---|---|
1 | Introductie Bootstrap, class & containers |
Wat is een object MBO-SD 2.10, 2.10.1, 2.10.2 |
GIT Samenwerken, onderwerpen bespreken, sitemap, wireframe, mockup en huisstijl maken |
2 | Grid/ rows en cols | Property shorthand en makeObject functie MBO-SD 2.10.3 |
Maken van de algemene pagina's en layout, maken van de juiste eigen CSS |
3 | Image/ responsive image |
JSON: Stringify en parse
MBO-SD 4.3 en 4.3.1 |
Afbouwen van de voorkant/ eigen pagina's. Zorgen dat je contact pagina met JS gecontroleerd wordt |
4 | Alerts en kleuren | Object methoden en this MBO-SD 2.10.4 |
Popup maken op de contact pagina na invullen van formulier, bouwen van je eigen onderwerp pagina in de aparte map |
5 | Tussentijdse toets | Tussentijdse toets | Samen met je team afbouwen van de eerste pagina's (je hebt er nu als het goed is 6 en 3 onderwerp mappen) |
6 | Listgroup en icons | Werken met API en JavaScript Fetch MBO-SD 4.5 |
Maak in de eerste categorie pagina de fetch aan naar de API URL die erbij hoort, verwerk de data op jouw pagina |
7 | Nav en NavBar | Oefenen en herhalen | Herhaal het werk van vorige week voor de volgende 2 pagina's |
8 | Oefenen en herhalen | Oefenen en herhalen | Laatste hand aan jouw project |
8 | Eindtoets | Eindtoets | Presentaties |