Duurzaam Huis - Frontend programming
Op deze website vind je korte video tutorials met uitleg bij de lessen Frontend programming in de module Duurzaam Huis.
Bekijk per week alle video’s, doe de korte opdrachten en oefeningen bij de video’s en zet deze in je frontend repository op een duidelijk plek.
Bij elke les/onderwerp hoort een afsluitende opdracht. Deze maak je lever je in. Zo toon je aan dat je de uitleg snapt en kan toepassen in je eigen code.
Week 9 - Live Weerbericht via een API
Hoe krijg je toegang tot een API en maak je zelf iets moois met de data van bijvoorbeeld het KNMI. Je gaat een live weerbericht widget maken met het laatste weerbericht, en uiteraard werkt dat ook met JSON-data.
Week 8 - Vervolg charts
Voor deze week zijn geen extra video’s
Week 7 - Data weergeven met een chart - deel 1
Wat niet mag ontbreken is een mooie grafiek of “chart” met gegevens. Er zijn veel verschillende soorten grafieken. Ook zijn er kant-en-klare chart “libraries” in Javascript die je kunt gebruiken. In deze week ga je aan de slag met Chartist.js om een grafiek te maken voor je dashboard.
Week 6 - Bufferweek
Week 6 was een bufferweek, om de achterstanden in te halen en de opdrachten in te leveren. Er staan geen opdrachten of video’s voor deze week.
Week 5 - Apparaatverbruik en kosten calculator
Nu het dashboard grid layout is gemaakt in HTML en CSS kun je de layout gaan vullen met gegevens, grafieken, afbeeldingen en andere informatie. In deze les ga je het verbruik en de kosten van één of meer huishoudelijke apparaten laten zien op je dashboard.
Aan de slag met apparaat verbruik
Week 4 - CSS Grid Responsive
Hier ga je jouw eigen ontwerp in een paar stappen proberen om te zetten in HTML door gebruik te maken van je kennis van CSS grid.
Week 3 - CSS Grid Start
Hier leer je de basis van het maken van een grid layout in HTML en CSS. Je oefent hier vooral met de theorie en voorbeelden uit de video’s.
Week 2 - Asynchroon Javascript en JSON
Dit was een les van Theo
Je leert hoe je met Javascript JSON gegevens asynchroon vanaf de server kunt laden en verwerken.
Naar de presentatie en opdracht
Week 1 - Object eigenschappen
Dit was een les van Theo
Werken met een Object in Javascript. Uitlezen van de eigenschappen (properties).