Pas de basics van CSS toe op jouw visitekaartje.
Deze deeltaak hoort bij sprint 1 Your Tribe. Dit is een deeltaak die je individueel uitvoert.
In het college S01W1-04-CSS-Basics wordt behandeld hoe je CSS Selectoren en properties kan toepassen om een bestaand visitekaartje aan te passen.
Deze deeltaak hoort bij de leertaak:
Je leert hoe je kan experimenteren met (nieuwe) CSS features en daarmee (on)mogelijkheden van CSS beter kennen.
Deze deeltaak gaat over deze fases van de DLC: ontwerpen en bouwen
In de workshop CSS Basics heb je een aantal inspirerende voorbeelden gezien van wat mogelijk is met CSS. Ontwerp en maak een nieuwe versie van je visitekaartje en probeer hierbij, net als bij de voorbeelden is gedaan, out-of-the-box te denken.
- Maak een nieuwe schets van je visitekaartje met een aantal css properties erin die je vandaag hebt gezien (typo, transition, transform, position, pseude-element .. )
- Maak een breakdownschets voorbeeld en schrijf op hoe je de vormgeving met css kan maken
In de bouwfase werk je jouw gekozen schets, zo goed mogelijk, uit in HTML, CSS en eventueel JavaScript. Doe dit aan de hand van de breakdownschets.
- Open de code van je visitekaartje in je code editor
- Bekijk onderstaande bronnen en zoek uit welke CSS properties je nodig hebt om jou schets uit te kunnen werken
- Pas deze CSS properties aan of voeg ze toe aan de CSS stylesheet
- Varieer in de CSS selectoren die je gebruikt (probeer CSS classes te voorkomen)
- MDN Styling Text
- MDN Background
- MDN Box Model
- MDN Position
- Transform, Transition & Animation
- CSS diner
- MDN selectoren
- Tips & Trics using pseudo-classes
- Creative button styles with pseudo
- Creative Link Effects
Deze opdracht is done als:
- je hebt in de wiki van je visistekaartje-repository een breakdown schets opgenomen
- je hebt in de code van van je visistekaartje-repository meerdere CSS selectoren en properties toegepast en uitgelegd