Opdracht: Proeven van CSS

Om alles rond CSS mooi samen te vatten en op te oefenen gaan we zelfstandig aan de slag met een paar opdrachten. Hierbij gelden een paar afspraken:

• Ga naar W3Schools – CSS Tutorial en hou het gedurende deze opdrachten open zodanig dat je een referentie hebt en bij onduidelijkheden het op jouw gemak kan overlopen.
• Raadpleeg ook jouw eigen projecten die je tot nog toe gemaakt hebt.
• Google-Fu eerst, vraag daarna aan collega, en als niemand in jouw groep het weet vraag aan docent.
• Onthoud: Art is never finished, it is only ever abandoned

👩‍💻 Opdracht: My Blog (Vervolg)

Je hebt jouw blog gemaakt maar je krijgt weinig hits. Om dit op te lossen ga je het eerst aantrekkelijker maken via CSS.

1. Ga naar W3Schools – CSS Tutorial en hou het gedurende deze oefening open zodanig dat je een referentie hebt en bij onduidelijkheden het op jouw gemak kan overlopen
2. Maak in jouw projectmap ‘my-blog’ een map ‘css’
3. Maak in jouw ‘css’ map een bestand ‘style.css’
4. Voeg in al jouw HTML documenten een link naar jouw stylesheet (hint: link element in jouw head element)
5. Zorg dat je al jouw styles voor al jouw webpagina’s binnen jouw style.css definieert (geen inline styles gebruiken)
6. Geef jouw body een achtergrondkleur
7. Geef jouw header een verschillende achtergrondkleur
8. Geef jouw section elementen een verschillende achtergrondkleur en een border met gekleurde stippeltjes
9. Geef jouw footer nog een verschillende achtergrondkleur
10. Gebruik een class selector om al jouw blog-posts een achtergrondkleur en een gekleurde, vaste border te geven
11. Zorg dat al jouw teksten in ‘sans-serif’ lettertype zijn
12. Maak dat al jouw navigatie lijst items naast elkaar komen te staan via de display property (hint: zoek achter “W3Schools HTML Block and Inline Elements”)
    • Zorg dat er geen kogel punten (bolletjes) meer aanwezig zijn voor lijst items binnen jouw navigatie balk (hint: list-style-type)
    • Lees over margins, padding en box model, en zorg vervolgens dat jouw navigatie lijst items voldoende ruimte rond hun hebben (speel met margin, padding, width en height, en gebruik desnoods een border om het te visualiseren)
13. Zorg ervoor dat jouw hyperlinks een nieuw kleurtje krijgen (hint: zoek achter “W3Schools Anchor Pseudo-classes”)
    • Ook reeds bezochte hyperlinks moeten een nieuw kleurtje krijgen
    • Maak dat wanneer je met jouw muis-cursor over een hyperlink zweeft jouw hyperlink 10% groter en 50% helderder wordt (hint: transform en filter)
      Optioneel: zorg dat de grootte verandering een soepele, animated overgang heeft (hint: transition, zoek achter “W3Schools Zoom on Hover”)
14. Gebruik een combinator selector om al jouw afbeeldingen binnen jouw blog-posts een maximale breedte van 200 pixels te geven, en laat de hoogte automatisch bepalen
15. Zoek online achter een layout die je mooi vindt als inspiratie (bv. die in de demo van W3Schools – CSS Tutorial) en ga vervolgens aan de slag met zaken zoals flex om van jouw oorspronkelijk kale site een deftige site te maken (deze oefening vergt veel onderzoek en mag je daarom gerust meerdere uren over doen)
16. Update jouw Netlify verhaal dat jouw online blog ook visueel mooi is.