Welkom op mijn webcatalogus website

Dit is een combinatie website, je ziet een voorbeeld van het project en wat je allemaal gaat leren/ doen deze periode.

Project webcatalogus

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.

voorbeeld van deze website
HTML, CSS en JavaScript project

Wat ga je doen?

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.

Onderdelen van de website

Gezamenlijk te maken

  • Je maakt samen met je team een eigen huisstijl, layout en mockup.
  • Je maakt samen een index.html (home) pagina
  • Je maakt een contactpagina met formulier (contact.html)
  • Je maakt een informatie pagina waarin je jezelf en je teamgenoten voorstelt (about_us.html)
  • De layout wordt gemaakt met Bootstrap en is responsive
  • Uiteraard maken jullie mockups, wireframes en een huisstijl document
  • Jullie werken tijdens het project met de SCRUM principes

Elk teamlid maakt daarnaast een eigen onderwerp pagina

  • Er zijn meerdere onderwerpen onder andere:
    • Sport (Formule 1, NBA & voetbal)
    • Muziek (Artietsen, Events & Genres))
    • Games (Events, Gamers & Games)
  • Je maakt een eigen map aan voor jouw onderwerp (bv sport)
  • In deze map plaats je een eigen index.html die werkt met jullie eigen huisstijl
  • Daarna maak je voor elke categorie een pagina aan
  • Maak voor 1 categorie pagina de layout helemaal in HTML/CSS, als je dat hebt gedaan kan je onderdelen aanpassen/ vervangen met JavaScript
  • Op de deze categorie pagina's haal je de informatie via de MBO-SD API binnen en verwerk je die met JavaScript code
  • Je werkt continue met elkaar en met GIT door het veel te committen/ pushen en te mergen
  • Er zijn geen studenten die twee keer hetzelfde onderwerp hebben binnen een project!
  • Je zorgt zelf voor een leuke opmaak/ creative uiting op jouw pagina zodat wij goed kunnen zien dat het jouw werk is

Wat ga je leren?

Je gaat te werk met HTML/CSS (Bootstrap), JavaScript (objecten en Fetch) en in de project lessen ga je alles samen brengen, ontwerpen en maken.
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 Eindtoets Eindtoets Presentaties
What will you learn today

What will you learn today - II