Skip to content

Latest commit

 

History

History
94 lines (58 loc) · 4.73 KB

INSTRUCTIONS.md

File metadata and controls

94 lines (58 loc) · 4.73 KB
Raw

The Client - Layout in CSS

Een oefening in document layout met CSS.

Context

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

Doel van deze opdracht

In onderstaande afbeelding zien 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.

9 basic en 9 advanced layouts

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.

Werkwijze

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.

Analyseren

Je onderzoekt kort welke layout je nu gaat maken en denkt alvast na over hoe je dat zou kunnen doen.

Aanpak

  1. (Alleen de eerste keer) Fork deze repository naar jouw eigen GitHub account;
  2. Kies een layout die aan de beurt is;
  3. Bepaal de stappen die je neemt bij ontwerpen, bouwen, integreren en testen. Met andere woorden, lees de hele instructie even door.

Ontwerpen

Maak een snelle schets welke je gebruikt om de layout te implementeren.

Aanpak

  1. 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).
  2. Maak een breakdown schets en zet er wat hints bij over hoe je de vlakverdeling met CSS kunt bereiken.
  3. Teken het grid met een afwijkende kleur in jouw breakdown.
  4. Schrijf in de breakdown wat het header, nav, main en footer element is;
  5. Voeg een foto van de breakdown toe aan de wiki, geef de pagina de naam van de betreffende layout.

Materiaal

Bouwen

Implementeer de layout in het <style></style> element in de head van het betreffende html document.

Aanpak

  1. Definieer het grid (hint: grid-template-areas);
  2. Pas het grid toe op jouw document elementen (hint: grid-area);
  3. Check doorlopend jouw aanpassingen in de browser (baby-steps approach).

Integreren

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.

Aanpak

  1. Voer in GitHub een commit message in, gebruik de naam van de layout die je zojuist geïmplementeerd hebt;
  2. Verstuur de commit naar GitHub door te pushen;
  3. 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;
  4. Neem in je wiki een direct linkje naar de betreffende layout op.

Testen

Test in een browser of de versie die je net online gezet hebt ook via GitHub pages werkt.

Aanpak

  1. Open jouw repository via de directe link;
  2. Check of alles werkt;
  3. Vergelijk jouw implementatie even met een klasgenoot;
  4. Schrijf heel kort op wat je opviel bij het testen.

Definition of Done

Focus sprint 2 - De focus in deze sprint ligt op het maken van een opdracht voor een opdrachtgever en het presenteren van het resultaat. Kennismaken met het vakgebied, communiceren en presenteren. Hoe kom je over bij je opdrachtgever. Durfen.

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;

Als je klaar bent laat je deze deeltaak afzonderlijk checken door een docent, je doet dus een checkpoint op alléén deze deeltaak. Je kunt op elk moment een checkpoint doen en hoeft niet te wachten op een/ de laatste vrijdag.