Tijdens deze SRP week gaan we aan de slag met de frontend basics van het vak. Het is oké als je nog niet veel van frontend af weet, maar wel belangrijk dat je gemotiveerd bent om ermee aan de slag te gaan!
Gedurende deze week zal je samen met een duo aan de slag gaan met een door jullie
gekozen case.
Tijdens het werken aan deze case ligt de focus op de volgende onderdelen:
- Leer de basics van GitHub, en werken in team
- Hoe je het beste je code kan refactoren
- UX & UI principles in code implementeren
Voorafgaand aan de SRP-week vragen we je een heel kort formulier in te vullen waarop je aangeeft hoe je je eigen niveau inschat. Zo kunnen we goede duo's maken!
Hier kun je het formulier vinden
Verder heb je de volgende dingen nodig:
- GitHub account
- Code editor geïnstalleerd op je laptop
- Git geïnstalleerd op je laptop - Dat kan hier
Na deze SRP-week kun jij:
- Jouw weg vinden in het git systeem
- UX & UI principles implementeren in code & beschrijven in je readme
- Gestructureerde code opleveren, met bijbehorende code comments
Na deze week lever je de volgende onderdelen op:
- Link naar GitHub repository, met minimaal 2 collaborators
- Live link naar gemaakte opdracht
- Kijk hier hoe dat makkelijk kan via GitHub pages!
- Zip file met alle code
- Readme met documentatie
- Kijk hier voor tips & een voorbeeld readme!
Deliverables kunnen worden gemaild naar: lisa.oude.elferink@hva.nl (we kunnen geen slots aanmaken op DLO)
De cijfers krijgen jullie vrijdagmiddag na de presentaties 😄
Je hebt je SRP/P-punt gehaald als:
- Je aanwezig bent geweest bij alle check-ups
- Je de deliverables op tijd hebt opgeleverd
- Je je eindproduct hebt gepresenteerd
- 9:30 - Introductie SRP week & kiezen case
- 10:30 - GitHub 101
- 13:00 - Werken in duo's aan opdracht
- 15:00 tot 16:30 - Check-up in duo's
- 9:30 - 'College' over UI Principles
- 11:00 - Werken in duo's aan opdracht
- 15:00 tot 16:30 - Check-up in duo's
- Verplichte vrije dag :)
- 9:30 - 'College' over code refactoring
- 11:00 - Werken in duo's aan opdracht
- 14:00 - Extra klassikaal vragenmoment
- 15:00 tot 16:30 - Check-up in duo's
- 9:30 - Afronden opdracht in duo's
- 14:00 - Deadline eindopdracht
- 14:00 tot 16:00 - Presentaties (concept + live link)
Let op: bij elke case werk je in een duo: je hoeft dus niet alles alleen te doen
Ongeacht welke case je kiest, werk je altijd met HTML, CSS en JS.
Bij deze case ga je een To Do app maken. In deze To Do app moet de gebruiker minimaal het volgende kunnen doen:
- Een to do lijst aanmaken
- Een to do item aanmaken
- Een to do item afvinken
Hierbij verwerk je & beschrijf je in je readme de volgende Principles of User Interface Design:
- 04 - Keep users in control
- 05 - Direct manipulation is best
- 08 - Provide a natural next step
- 16 - A crucial moment: the zero state
Bij deze case ga je een fake-it-till-you-make-it style webshop maken: je hoeft niets echt te kunnen bestellen, maar alles moet wel lijken alsof het werkt. Deze overview pagina moet minimaal de volgende onderdelen bevatten:
- 12 verschillende producten
- Filter
- Toevoegen aan winkelmandje (+1, product hoeft niet echt in je mandje te zitten)
Hierbij verwerk je & beschrijf je in je readme de volgende Principles of User Interface Design:
- 07 - Keep secondary actions secondary
- 08 - Provide a natural next step
- 09 - Appearance follows behaviour
- 10 - Consistency matters
Bij deze case ga je een landingspagina maken voor een product naar jouw keuze. Deze pagina promoot het door jou gekozen product, zoals een auto, fiets, telefoon - alles kan. Deze landingspagina moet minimaal de volgende onderdelen bevatten:
- 5 onderdelen over het product (beschrijving, waar te koop, etc.) exclusief header en footer
- Animaties (extra uitdaging: on scroll)
Tip: kies een bestaande website uit en bouw deze (verbeterd) na
Hierbij verwerk je & beschrijf je in je readme de volgende Principles of User Interface Design:
- 06 - One primary action per screen
- 07 - Keep secondary actions secondary
- 08 - Provide a natural next step
- 11 - Strong visual hierarchies work best