Extra uitdaging#
De volgende zes opdrachten zijn voor de mensen die na de uitleg van normaal HTML en CSS nog extra informatie en uitdaging kunnen gebruiken. Deze opdrachten brengen je eigen website iets dichterbij de webapps die gemaakt worden met Javascript In deze opdrachten wordt de theorie niet uitgelegd, maar krijg je in plaats daarvan de bronnen aangereikt om je eigen onderzoek te doen. Je hebt deze informatie niet nodig om het eindproduct te maken (zonder deze informatie kan je ook een 10 halen), maar het gebruiken van deze opdrachten zorgt er wel voor dat je alles beter onder de knie krijgt en een beter eindproduct kunt maken.
Ook als je extra uitdaging zoekt, hoef je deze opdrachten niet allemaal te doorlopen. Lees de beschrijvingen één voor één door en beslis daarna welke opdracht(en) je graag zou willen doen. Bekijk vervolgens de bronnen en experimenteer zelf met een toepassing binnen je eigen website.
(Optioneel) Extra 1 - Web Fonts#
Lettertypen zijn heel bepalend in het uiterlijk van je website, daarom kan je web fonts gebruiken om alle mogelijke lettertypen te gebruiken in je website. Normaal gesproken ben je afhankelijk van de lettertypen die op de computer van de gebruiker geïnstalleerd zijn. Met web fonts voeg je lettertypen toe aan je website die de computer van de gebruiker vervolgens zelf downloadt. Bronnen:
Hoe gebruik je web fonts: https://www.w3schools.com/css/css3_fonts.asp
Een font library van Google: https://fonts.google.com/
(Optioneel) Extra 2 - Icons#
Overal op websites kom je kleine figuurtjes tegen waar je op kan klikken en die bepaalde dingen aangeven. Dit zijn de zogenaamde icons. Met HTML en CSS kan je die icoontjes heel makkelijk toevoegen aan je website. Je voegt hierbij een CSS-bestand toe die online beschikbaar wordt gesteld en vervolgens gebruik je die om de verschillende icoontjes te laden. Wij raden aan om de icoontjes van Material Design van Google te gebruiken, die worden uitgelegd onderaan de website van w3schools. Bronnen:
Hoe gebruik je icons: https://www.w3schools.com/css/css_icons.asp
Een icon library van Google: https://material.io/resources/icons/?style=baseline
(Optioneel) Extra 3 - Dropdowns#
Het is mogelijk om binnen HTML en CSS een dropdown menu te maken. Dit is een knop die, wanneer je er overheen zweeft of wanneer je er op drukt, uitklapt en meerdere andere knoppen weergeeft. Dit laat vooral zien hoe je goed gebruik kan maken van display: none; Het vergroot zeker je begrip van CSS Bronnen:
Hoe maak je een dropdown: https://www.w3schools.com/css/css_dropdowns.asp
Herhaling van
display: https://www.w3schools.com/css/css_display_visibility.asp
(Optioneel) Extra 4 - Animaties#
Het klinkt misschien heel raar, maar je kan inderdaad animaties maken met CSS Je kan hiermee zo veel properties veranderen als je wilt, zo vaak je wilt. Het is een ingewikkeld concept en zeker niet makkelijk om op te zetten, maar wanneer het eenmaal werkt dan is het dat zeker waard. Bronnen:
Hoe maak je een animation: https://www.w3schools.com/css/css3_animations.asp
(Optioneel) Extra 5 - Responsive Web Design#
Tegenwoordig zijn er zo veel verschillende devices die websites kunnen openen dat er een hele categorie is gericht op het accommoderen van die verschillende schermgroottes. Dit heet Responsive Web Design (RWD). Het is eigenlijk een must om te weten, maar te ingewikkeld voor de normale module. Probeer dit uit als je er tijd voor hebt! Bronnen:
Hoe gebruik ik RWD 1: https://www.w3schools.com/css/css_rwd_intro.asp
Hoe gebruik ik RWD 2: https://www.w3schools.com/css/css_rwd_viewport.asp
Hoe gebruik ik RWD 3: https://www.w3schools.com/css/css_rwd_grid.asp
Hoe gebruik ik RWD 4: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hoe gebruik ik RWD 5: https://www.w3schools.com/css/css_rwd_images.asp
Hoe gebruik ik RWD 6: https://www.w3schools.com/css/css_rwd_videos.asp
RWD Frameworks: https://www.w3schools.com/css/css_rwd_frameworks.asp
RWD Templates: https://www.w3schools.com/css/css_rwd_templates.asp
(Optioneel) Extra 6 - Bootstrap#
Dit is er eentje voor de echte doorzetters. Bootstrap is een framework voor responsive web design met heel veel functionaliteit. Leren hoe je met Bootstrap moet werken is eigenlijk hetzelfde als een compleet andere programmeertaal leren binnen HTML en CSS. Maar als je veel tijd over hebt en wilt weten hoe je een perfecte responsive website maakt dan is het zeker een aanrader. Bronnen:
W3schools Bootstrap Tutorial: https://www.w3schools.com/bootstrap4/default.asp
Bootstrap website: https://getbootstrap.com/
Bootstrap documentatie: https://getbootstrap.com/docs/4.3/getting-started/introduction/