Me, myself and I, een website over mij
Open VSC. Maak een nieuw project. Door in je menu op File (bestand) te klikken en vervolgens op Open Folder.
Navigeer naar de plek waar je het project wilt opslaan en openen.
Bij voorkeur in je htDocs map.
Maak daarin een nieuwe file genaamd index.html. Codeer zelf in deze file de basic HTML structuur tags.
ls je XAMPP hebt, dan zet je je nieuwe project in de htdocs map.
c://xampp/htdocs
Zorg dat je via het controlepanel van Xampp Apache gestart hebt.
Ga naar je website met je favoriete browser en type: localhost/naam_van_je_mapje
Met een Apple MacBook en iOS ga je naar je App folder. Daarin vind je Xampp of bij voorkeur voor iOS Mamp. In deze folder staat de map htDocs.
Dit is je zogenaamde root-map.
Maak een nieuwe file in je project en noem deze styles.css. Koppel dit bestand in je index.html en test of het goed werkt.
Maak een nieuwe file en noem deze script.js. Koppel deze file in je index.html en test of het werkt.
Wie ben je, waar kom je vandaan, wat zijn je hobbies, welke games vind je leuk om te spelen, wat is je favoriete muziek en welke films staan in je Netflix playlist? Uiteraard mogen foto's niet ontbreken. Dat mag jezelf zijn, of je hondje of kat. Maar een leuke foto over die Oostenrijkse berg die je zo cool vindt mag ook natuurlijk. Wees creatief en maak er jouw website van.
Maak een functionaliteit op je webpagina die ervoor zorgt dat je meerdere foto's kunt zien, echter via een slider.
Dus er staat 1 foto in beeld. Onder de foto staan cijfertjes, of bolletjes, of iets anders om aan te geven dat er meerdere foto's beschikbaar zijn.
Met andere woorden je gaat een fotoslider maken.
Maak meerdere
tags en zet er foto's is. Onderscheidt de
door gebruik te maken van
Zet alle
tags op invisible of display='none' middels een class die je voor elke
Zoek via internet het verschil tussen een id en een class.
Zet onder de foto's een rij cijfers, bolletjes of iets anders om aan te geven dat er content beschikbaar is.
Zet alleen foto 1 op zichtbaar.
Maak nu met javascript een stukje code waarbij je foto's kunt tonen door op het juiste cijfer of bolletje te klikken (die onder je foto's staat).
Het eindresultaat is dat je een soort van foto-slider hebt gemaakt.
Jij hebt talenten en kwaliteiten. Maak een webshop waarin je jouw talenten en kwaliteiten verkoopt.
Stel je houdt van gamen! Jouw favoriete game is "My Little Pony". Je biedt aan om 1 uur te spelen met het account van iemand anders om deze door een level heen te helpen. Dit uur kost dan 5 euro.
Stel je vindt dat jij goed bent in Nederlands schrijven. Je biedt aan dat je een verslag schrijft van minimaal 1 A4 voor de prijs van 10 euro.
Stel je bent goed met koken, dan kun je voor 3 euro broodjes maken en verkopen tijdens de pauze.
En zo heb je nog veel meer voorbeelden.
Zorg dat je minimaal drie producten hebt die je kunt verkopen of aanbieden.
Zorg dat bezoekers van jouw pagina het product kan selecteren en kopen.
Je hoeft geen betaalpagina of betaalproces te maken. Dat is te uitgebreid voor nu en kost bovendien geld. Dus dat gaan we niet doen.
Je kunt het wel 'faken'. Dus een knop bestellen en afrekenen maken, maar meteen daarna de bedanktpagina.
Je laat jouw docent een webpagina zien die over jou gaat. Binnen deze pagina laat je de functionaliteit zien waarbij je een product kunt kiezen en afrekenen (niet echt, maar fake betalen).
Je wilt jouw pagina voor jouw bezoekers nog aantrekkelijker maken. Dat doe je door een Game toe te voegen. Het wordt een reactievermogen game.
Er verschijnt random een klokje ergens op het scherm en daar moet je dan op klikken. Je houdt de tijd bij tussen verschijnen en klikken. De bezoeker mag vijf keer klikken en krijgt dan een gemiddelde reactietijd in beeld.
De bezoeker krijgt dan de optie nogmaals te spelen om de eigen score te verbeteren.
Je kunt gebruik maken van
Kies een random getal voor x en een voor y en laat op dit plek jouw vierkant verschijnen.
De tijd kun je ook met javascript bijhouden.
Laat jouw docent een applicatie zien waarin je een spel kunt starten en vervolgens blokjes in beeld ziet verschijnen waarop je kunt klikken. Na 5 verschenen blokjes wordt jouw gemiddelde reactiettijd in het beeld weergegeven. Hierna kun je het spel opnieuw starten.