Je gaat verder werken aan jouw eerste versie van het visitekaartje door te experimenteren met toffe CSS features.
Deze leertaak hoort bij sprint 1 "Your Tribe". Dit is een experiment taak die je individueel gaat uitvoeren.
Het Web is constant in beweging en dat geldt ook voor de ontwikkeling van CSS. Experimenteren met nieuwe features (of je verdiepen in reeds bestaande features) is een belangrijke competentie van een Frontender!
Maak jij een 3D versie van je visitekaartje? Of regel je een dark-mode theme met blend modes? Duik je in een van de nieuwe browser API's en waag je je naast CSS aan JavaScript? Bij deze leertaak mag je out-of-the-box denken en (nieuwe) CSS features uitproberen.
- Experimenteren met (nieuwe) CSS features
- De (on)mogelijkheden van CSS beter leren kennen
Volg de fases van de Development lifecycle om jouw visitekaartje gestructureerd te herontwerpen, aan te passen en op Github te publiceren.
Deze opdracht gaat over alle fases van de DLC analyseren, ontwerpen, bouwen, integreren en testen.
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.
Aanpak
- Lees de instructies van deze leertaak zorgvuldig door.
- Bekijk de verschillende fases van de Development Lifecycle en wat je per fase gaat doen.
- Bespreek wat je aan werk verwacht en maak aantekening.
In de ontwerpfase neem je ontwerpbeslissingen en zorg je dat je precies weet wat je moet gaan bouwen.
Aanpak
- In de workshop Trucjes met CSS 1 heb je een aantal inspirerende voorbeelden gezien van wat mogelijk is met CSS. Ontwerp een nieuwe versie van je visitekaartje en probeer hierbij, net als bij de voorbeelden is gedaan, out-of-the-box te denken.
- Maak een aantal schetsen aan de hand van het template.
- Na bovenstaande stappen zorgvuldig doorlopen te hebben weet je ongeveer wat je gaat bouwen. Je kunt nu goed voorbereid door naar de volgende fase.
Hieronder staan de in de workshop getoonde voorbeelden voor als je nog even rustig wil kijken. Je kan natuurlijk ook zelf zoeken naar inspirerende voorbeelden; google bijvoorbeeld op 'Cool CSS tricks 2021'...
In de bouwfase realiseer je de beslissingen uit de ontwerpfase in HTML, CSS en JS.
Aanpak
- Fork deze repository en clone de code naar je computer met de Github-desktop app
- Werk in de geforkte repository van deze leertaak
Pas in de code van jouw visitekaartje slimme CSS selectoren toe. Heb jij al classes toegepast? Probeer alle classes in je code te vervangen met slimme selectoren.
- Heb je een mooi ontwerp gemaakt van jou visitekaartje op basis van een van de inspirerende voorbeelden? Onderzoek hoe het voorbeeld is gemaakt door het lezen van de tutorial als dat er bij zit, of als er geen tutorial is door gebruik te maken van de DevTools van je browser. Maak het voorbeeld voor jouw visitekaartje.
- Heb je zelf iets ontworpen en kan je niet terugvallen op een voorbeeld, dan zal je zelf moeten bedenken/uitzoeken hoe je dat met CSS kan bouwen. Met de in de workshop behandelde CSS features en onderstaande bronnen kan je al een heel eind komen!
In de integratiefase voer je de aanpassingen door zodat iedereen ze kan zien. Je gaat jouw aanpassing op het visitekaartje publiceren op internet!
Aanpak
- Doorloop dezelfde stappen als bij de duplicate leertaak om jouw code te publiceren.
- Als het goed is gegaan kan je binnen enkele momenten jouw visitekaartje bekijken via de URL: https://username.github.io/fdnd-visitekaartje-experiment/.
In de testfase controleer je of jouw aanpassingen werken zoals bedoeld. Laat jouw visitekaartje testen door een paar klasgenoten en jouw docent. Noteer wat ze er van vinden. Ben je tevreden met het resultaat? Zo niet herhaal dan bovenstaande stappen.
Aanpak
- Laat jouw visitekaartje aan een aantal klasgenoten zien
- Noteer feedback
- Ga terug naar de analysefase voor een volgende ronde verbeteringen
Je bent klaar als je nieuwe CSS features hebt toegepast op je visitekaartje en de je nieuwe versie is gepubliceerd en getest.