Breakdown schets
In de workshop Breakdown schets van woensdag 2/9/2027 wordt uitgelegd wat een breakdown schets is en hoe je dat kan maken.
Een breakdown schets is een wireframe met annotaties voor de HTML, CSS en/of JS. Het is een methode die frontenders vaak gebruiken om te onderzoeken wat voor techniek nodig is om een ontwerp te realiseren in code.
Door blokken in de schets te tekenen voor de HTML, de CSS properties te annoteren en ideeën voor de JS kom je er achter wat voor "problemen" je gaat tegenkomen. Dan kan je inspiratie en code-voorbeelden bekijken om te onderzoeken hoe je iets technisch zou kunnen oplossen.
Je gaat een breakdown schets maken van het ontwerp dat je maandag hebt bedacht. Dit is het uitgangspunt van het ontwerp dat je gaat maken!
- Teken de schets van maandag netjes na met een zwarte pen.
- Teken met een rode pen om alle “content” onderdelen een rechthoekig blok en schrijf het HTML element erbij. Als je niet weet welk element je nodig hebt, kun je dit gaan onderzoeken. Kijk bij de HTML reference van MDN, vraag aan je tafel of aan een docent.
HTML elementen zijn allemaal rechthoekig in de browser.
Als je HTML elementen met CSS alleen een border kleur geeft, dan kun je dit zien:
- Teken vervolgens een blok voor de containers en schrijf de HTML elementen erbij.
Een lijst met links bestaat uit <a> in een <li> in een <ul>
-
Maak een issue aan in jouw repository, geef het bijvoorbeeld de titel “Nieuwe HTML voor nieuw ontwerp” en voeg een foto van je breakdown schets toe.
-
Tag daarna in het issue een docent uit jouw squad, zodat die feedback kan geven op jouw schets.
Om iemand te taggen typ je
@met de GitHub handle:
GitHub handles van jouw docenten:
| Squad 1k | |
|---|---|
| Koop | @KoopReynders |
| Joost | @joostf |
| Krijn | @KrijnHoetmer |
| Sanne | @shooft |
| Suus | @suustenvoorde |
Begin met coderen van je nieuwe ontwerp. Gooi de bestaande HTML in de <body> weg en gebruik je breakdown schets als uitgangspunt om nieuwe HTML te schrijven.
💡 Met HTML structureer je je pagina, dus het klopt dat het er in eerste instantie nog niet “mooi” uit ziet. No worries. Bij FDND leren we je gelaagd bouwen, volgens het principe van Progressive Enhancement. Het belangrijkst is een goed HTML fundament, waarop je de volgende lagen kunt bouwen.
De volgende laag is stijl, CSS, waar je gisteren een korte introductie in hebt gehad. Probeer vandaag zelfstandig verder te gaan met de bronnen van gisteren en vandaag, om je HTML met CSS te stylen. Gebruik de juiste selectors om properties en values aan je HTML te hangen. Geen probleem als nog niet alles wat je bedacht hebt ook echt lukt. We gaan hier de komende weken nog genoeg mee aan de slag. Als je hulp wilt, kun je ook altijd een docent taggen via een GitHub issue.
Vergeet niet je werk via GitHub te integreren en te testen als het live staat.
Dit zijn goede bronnen om te gebruiken om HTML te leren en onderzoeken: