Ontwerp en maak met je squad een squadpagina met HTML, CSS en Javascript.
Deze leertaak hoort bij sprint 1 "Your Tribe". Dit is een leertaak die je in een team uitvoert.
In het S01W2-01-Squadpage wordt stap voor stap behandeld wat je moet doen.
Bij deze leertaak hoort de deeltaak:
Op fdnd.nl komen alle visitekaartjes van de studenten te staan, op deze website kijken potentiele opdrachtgevers. In de squadpagina komen alle visitekaartjes samen. Ontwerp en maak samen met je teamgenoten de squadpagina
- Samenwerken in een team
- In een team de dev-lifecycle toepassen
- Een definitieve squadpagina maken waarin alle visitekaartjes van de squad samen komen
Deze taak wordt behandeld in het bijhorende college. Deze opdracht gaat over alle fases van de development-lifecycle analyseren, ontwerpen, bouwen, integreren en testen.
Volg onderstaand fases om jouw squadpage gestructureerd te ontwerpen, aan te passen en op Github te publiceren.
In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren en formuleer je een aantal uitgangspunten waar je ontwerp aan moet voldoen.
- Lees de instructies van deze leertaak zorgvuldig door
- Bekijk de verschillende fases van de Development Lifecycle en wat je per stap gaat doen
- Vul met jouw team een teamcanvas in om een goed vertrekpunt voor jouw teamproject te hebben
- Bespreek met jouw team wat je aan werk verwacht en verdeel het werk. Tip: gebruik hiervoor issues op GitHub
Bij de start van de ontwerpfase weet je wat het doel en het resultaat van je project zijn. In de ontwerpfase neem je ontwerp- beslissingen en zorg je dat je precies weet wat je moet gaan bouwen.
Nu wordt het tijd om te kijken hoe het resultaat eruit zou kunnen zien.
Dit is een belangrijk moment in het project. (Voor veel opdrachtgevers geldt dat ze nu pas duidelijk krijgen hoe het resultaat eruit zal zien. En dat is een moment waarop veel opdrachtgevers veel duidelijker kunnen aangeven wat ze wel en niet willen.)
- Verzamel inspiratie voor overzichtspagina's door desktop research uit te voeren met jouw Squad (doen we samen)
- Maak een abstracte schets van het ontwerp van de squad page. schets hierbij de verschillende sections (hoofdstukken) van de pagina.
- Maak vervolgens per section een breakdownschets van elementen van de betreffende section
- Bedenk welke HTML elementen van toepassingen zijn om de schets uit te kunnen werken in HTML
- Verwerk de HTML elementen in de schets, met verwijzingen naar de betreffende section
In de bouwfase realiseer je de beslissingen uit de ontwerpfase in HTML, CSS en JS.
Op basis van je ontwerpschets ga je bedenken hoe je je ontwerp in code kan bouwen. Je zet je project op in Github en kopieert de repository naar jouw computer. Je begint met de content in HTML, voegt CSS toe voor de vormgeving en JS voor de interactie.
- Werk aan de hand van de breakdownschets de pagina uit in HTML
- Geef vervolgens de pagina vorm met CSS
- Clip over CSS font en text properties
- Typography for developers
- HTML element reference
- How to section your HTML
- What the Flexbox clips
- FlexBox Froggy
- A guide to Flexbox
- Making Modern Layouts with CSS Grid | Grid Basics
- CSS Grid Garden
- Learn how to use CSS Media Queries in less than 5 minutes
In de integratiefase voer je de aanpassingen door zodat iedereen ze kan zien.
- 'Push' jouw aanpassingen naar Github (en publiceer via Github pages)
In de testfase controleer je of jouw aanpassingen werken zoals bedoeld. Dit kan een technische-test zijn, maar ook een test met gebruikers of een presentatie bij de opdrachtgever om te bespreken of de opdracht goed is.
- Laat jullie squadpagina aan iedereen zien
- Noteer feedback
- Ga terug naar de analysefase voor een volgende ronde verbeteringen
Deze opdracht is done als:
- Je hebt gewerkt volgens de verschillende fases van de development-lifecycle
- je hebt als team het proces (ontwerpbeslissingen, schetsen, inzichten en testresultaten) gedocumenteerd in de Wiki
- de squad page staat op Github en heeft een live url