Een oefening in document layout met CSS.
Deze leertaak hoort bij sprint 2 the client. Dit is een deeltaak die je individueel uitvoert en waarmee je bewijslast verzameld.
In het college S02W02 Flow en Layout wordt verteld over layout en grids, deze deeltaak behandeld verschillende typen layouts en is bedoeld als robuuste oefening in het maken van layouts.
“Wax on right hand. Wax off left hand. Wax on, wax off. Breathe in through nose, out through mouth. Wax on, wax off. Don't forget to breathe. Very important.” - Mr. Miyagi
In onderstaande afbeelding zie je 18 verschillende layouts die je met CSS kunt maken. Negen daarvan zijn basic layouts welke je met grid-template-areas en grid-area goed kunt realiseren. Naast deze basic layouts zijn er ook negen advanced layouts waarvoor je iets meer trucage uit je mouw moet schudden.
Waarom zou je dit doen? Omdat je oefent met veel verschillende layouts met de vier basis document elementen. Na het succesvol implementeren van alle bovenstaande layouts heb je altijd een soort spiekbriefje om naar terug te kijken als je een layout maakt.
Omdat deze deeltaak bestaat uit 18 kleine taken doorloop je telkens de development lifecycle. Misschien had je al vaker het idee dat je dit telkens in het klein doet bij elke grotere opdracht.
Deze opdracht gaat over alle fases van de DLC: analyseren, ontwerpen, bouwen, integreren en testen.
Je onderzoekt kort welke layout je nu gaat maken en denkt alvast na over hoe je dat zou kunnen doen.
- (Alleen de eerste keer) Fork deze repository naar jouw eigen GitHub account;
- Kies een layout die aan de beurt is;
- Bepaal de stappen die je neemt bij ontwerpen, bouwen, integreren en testen. Met andere woorden, lees de hele instructie even door.
Maak een snelle schets welke je gebruikt om de layout te implementeren.
- Onderzoek met behulp van CSS-Tricks hoe je de layout zou kunnen maken in CSS (Grid voor de basic layouts, misschien wat Flexbox bij de advanced layouts).
- Maak een breakdown schets en zet er wat hints bij over hoe je de vlakverdeling met CSS kunt bereiken.
- Teken het grid met een afwijkende kleur in jouw breakdown.
- Schrijf in de breakdown wat het header, nav, main en footer element is;
- Voeg een foto van de breakdown toe aan de wiki, geef de pagina de naam van de betreffende layout.
Implementeer de layout in het <style></style> element in de head van het betreffende html document.
- Definieer het grid (hint: grid-template-areas);
- Pas het grid toe op jouw document elementen (hint: grid-area);
- Check doorlopend jouw aanpassingen in de browser (baby-steps approach).
Voer een commit uit op jouw GitHub met de layout die je zojuist geïmplementeerd hebt. Op deze manier kan je altijd terug naar een versie waarvan je weet dat alles in orde was.
- Voer in GitHub een commit message in, gebruik de naam van de layout die je zojuist geïmplementeerd hebt;
- Verstuur de commit naar GitHub door te pushen;
- Beschrijf in de wiki hoe je het implementeren van deze layout hebt aangepakt (bijvoorbeeld: ik heb met grid-template-area…). Beschrijf ook wat er heel goed ging en wat lastig was;
- Neem in je wiki een direct linkje naar de betreffende layout op.
Test in een browser of de versie die je net online gezet hebt ook via GitHub pages werkt.
- Open jouw repository via de directe link;
- Check of alles werkt;
- Vergelijk jouw implementatie even met een klasgenoot;
- Schrijf heel kort op wat je opviel bij het testen.
Deze opdracht is done als:
- De 9 basis layouts en/of 9 advanced layouts zijn geïmplementeerd;
- Alle breakdown schetsen voor de layouts in je wiki zijn opgenomen;
- Bij elke schets staat een korte uitleg hoe je code werkt.
- Al je werk te bekijken is via GitHub pages;