Laten we maar meteen eerlijk zijn. Hoeveel boeken over programmeren je ook leest, hoeveel video’s je ook bekijkt of hoeveel podcasts je ook beluistert, als je een betere ontwikkelaar wilt worden, moet je voortdurend oefenen.
In de front-end ruimte bestaan er veel frameworks: React, Angular, Vue, om er maar een paar te noemen. Elk van hen is geweldig en zonder hen zou front-end ontwikkeling niet in zijn huidige staat zijn. Maar wat deze frameworks, naast al hun verschillen, gemeen hebben is dat ze allemaal gebaseerd zijn op JavaScript. Yep, good ol’ JS!
JavaScript is wat het web vandaag de dag runt, geen twijfel mogelijk. En voor elke front-end ontwikkelaar, of ze nu al ervaren zijn of aan het begin van hun carrière staan, is het verplicht om de basis van JavaScript, HTML en CSS te kennen.
Frameworks komen en gaan, maar JavaScript zal blijven! Maar wat is de beste manier om JavaScript te oefenen? Het beste antwoord dat ik je kan geven is om projecten te bouwen!
JavaScript Projecten
JavaScript projecten zijn begeleide tutorials of javascript project ideeën die je helpen je vaardigheden aan te scherpen door het bouwen van echte applicaties, websites, games, componenten, etc. Soms vind je project ideeën die alleen een titel bevatten en een paar zinnen van wat je moet bouwen.
Voorbeeld: Bouw een teller met JavaScript die de uren aftelt tot het einde van het jaar.
Dit formaat is goed als je al wat ervaring hebt en alleen op zoek bent naar wat input.
JavaScript Projecten voor Beginners
Als je echter nieuw bent met webontwikkeling, is het vaak beter als je zoekt naar JavaScript projectvoorbeelden met broncode of specifieke JavaScript projecten voor beginners. Deze bevatten vaak een draaiende demo-applicatie, een GitHub-repository met de broncode, en een stap-voor-stap handleiding over hoe het project te bouwen.
JavaScript-oefenprojecten
Dus voor jou om praktijkervaring op te doen, heb ik negen geweldige javascript-projectideeën op een rijtje gezet die je kunt doen om je vaardigheden op te frissen, nieuwe dingen over JS te leren, en relevant te blijven in de toekomst. Ze zijn allemaal gebaseerd op pure JavaScript, wat HTML, en wat CSS. Je kunt ze aan je portfolio toevoegen, ze aan recruiters of potentiële werkgevers laten zien, of ze in je GitHub bewaren als referenties voor toekomstig werk. Om duidelijk te zijn: dit is niet bedoeld om je alles over JavaScript te leren. Er zijn perfecte cursussen voor jou die JS van A-Z behandelen. Dit is om dingen te bouwen. Je handen vuil maken. Werken aan je spiergeheugen.
JavaScript Projecten Overzicht
- Bouw een Meditatie App JavaScript Project
- Bouw een Virtueel Toetsenbord JavaScript Project
- Bouw een eCommerce Shopping Cart JavaScript Project
- Bouw een Weer App JavaScript Project
- Bouw een Issue Tracker JavaScript Project
- Bouw een PIN Pad JavaScript Project
- Bouw een Landing Page JavaScript Project
- Bouw een Rock Paper Scissors Game JavaScript Project
- Bouw een Tic Tac Toe Game JavaScript Project
- Bonus: Bouw 9-in-1 Mini JavaScript Projecten
- Bonus: JavaScript Beginner Project Ideeën
- Bonus: JavaScript Intermediate Project Ideeën
- Bonus: JavaScript Gevorderden Project Ideeën
Om je een voorsprong te geven, heb ik deze tutorial projecten voor je beoordeeld. Maar dat is slechts mijn mening, dus ik raad je ten zeerste aan om ze zelf uit te proberen, omdat je weet hoe je het beste leert en op welk niveau je je momenteel bevindt.
Bouw een Meditatie App
Wat je gaat bouwen
Je gaat een applicatie bouwen die omgevingsgeluid biedt voor meditatie. Gebruikers kunnen kiezen tussen verschillende timers en geluiden.
Rating
Deze tutorial maakt gebruik van Vanilla JavaScript, precies waar we op uit zijn. De stem van de instructeur, evenals zijn instructies, zijn duidelijk en goed te begrijpen. Verder leer je hoe je geluid en video kunt manipuleren met JS. Dit is een leuk javascript project waar ik echt van geniet.
5/5 Sterren
Bouw een Virtueel Toetsenbord
Wat ga je bouwen
Je gaat een virtueel toetsenbord bouwen vanaf nul met Vanilla JS, HTML, en CSS dat in de browser gebruikt kan worden en responsive en touch-ready zal zijn!
Rating
Ik hou van de originaliteit van dit project, het is een geweldig javascript project idee. Ik heb nog nooit een virtueel toetsenbord gemaakt, dus dit doen met alleen JavaScript, HTML, en CSS was echt een geweldige ervaring voor mij. De stem van de instructeur is duidelijk en hij legt dingen vrij goed uit.
5/5 sterren
Bouw een eCommerce Shopping Cart
Wat ga je bouwen
Je gaat een winkelwagentje bouwen dat gebruikt kan worden op online winkels en eCommerce sites met Vanilla JS, HTML en CSS. De instructeur maakt gebruik van Contentful, een headless CMS voor het opslaan van productinformatie. Leren hoe om te gaan met Contentful of een headless CMS, in het algemeen, is niet de primaire focus van dit stuk, maar het is een geweldige service, dus je zult er geen spijt van krijgen het in actie te zien.
Rating
De opname van deze tutorial is echt lang. Aan de ene kant is dat indrukwekkend, maar aan de andere kant ook een beetje omslachtig. De stem van de instructeur is duidelijk en goed te verstaan. Het is soms een beetje moeilijk om hem te volgen, maar dat komt waarschijnlijk door de complexiteit van dit project. Dit is dus eerder een gemiddeld js-project.
4/5 sterren
Bouw een Weer-app
Wat je gaat bouwen
Dit project gaat je leren hoe je een weer-applicatie bouwt met Vanilla JS, HTML, en CSS. De docent gebruikt de Dark Sky API voor het ophalen van weerinformatie, wat een geweldige kans voor je is om te leren hoe te interageren met API’s, nog iets geweldigs wat je kunt doen met javascript.
Rating
Dit zou een goede match kunnen zijn voor je portfolio. Als je project 1. al hebt gedaan, ken je de docent al, en ik kan je vertellen dat hij weer hoge kwaliteit levert. Het lijkt erop dat hij echt weet hoe hij op een begrijpelijke en onderhoudende manier les moet geven.
5/5 sterren
Bouw een Issue Tracker
Wat ga je bouwen
In deze tutorial ga je een issue tracker bouwen die op elke website gebruikt kan worden voor het aanmaken van issues (bijvoorbeeld bij softwareproducten) met Vanilla JS, HTML, en CSS. Dit kan ook een goede aanvulling zijn op je portfolio en een uitstekend javascript project voor beginners!
Rating
De instructeur heeft een duidelijk concept van wat hij met je wil bouwen. Zijn stem is duidelijk en goed te verstaan, en dit project is een javascript beginners project.
4/5 Sterren
Bouw een PIN Pad
In dit javascript project ga je een PIN Pad bouwen dat draait in de browser en de functionaliteit heeft om PIN codes te controleren op hun juistheid. De instructeur gebruikt alleen Vanilla JS, HTML en CSS voor deze tutorial. Dit is echt een geweldig javascript project idee voor beginners dus je wilt het zeker bekijken!
Rating
Ik vind het een zeer creatief zelfstudie project om te laten zien waar Vanilla JavaScript toe in staat is. De instructeur legt alles goed en duidelijk uit op een makkelijk te volgen manier. Dit is een cool javascript project en ik heb er veel plezier aan beleefd.
4/5 sterren
Bouw een landingspagina
Wat je gaat bouwen
Brad gaat je laten zien hoe je een interactieve landingspagina kunt bouwen die de tijd en de naam van de gebruiker laat zien. De applicatie gebruikt lokale opslag om de naam op te slaan, dus het is leuk voor je om dit te observeren.
Rating
Brad staat bekend om zijn complete en uitstekende tutorials. Deze is vrij kort en ik zou zeggen simplistisch, maar gebruikt alleen JavaScript, HTML en CSS en is daarom een uitstekend javascript oefenproject voor beginners.
4/5 sterren
Bouw een Rock Paper Scissors Game
Wat je gaat bouwen
Het bouwen van spelletjes kan een leuke manier zijn om nieuwe dingen te leren. JavaScript biedt geweldige mogelijkheden om browser-gebaseerde spellen te maken. In dit zelfstudieproject ga je het klassieke steen-papier-schaarspel maken met JavaScript.
Rating
Net als in Project 1. doet de docent goed werk met deze zelfstudie. Hij is onderhoudend en men kan hem goed volgen. En nogmaals, dit project is gebaseerd op Vanilla JavaScript en een goed javascript project voor beginners!
4/5 Sterren
Bouw een Tic Tac Toe Game
Wat ga je bouwen
In dit project ga je een tic tac toe spel bouwen wat een leuke, maar ook complexe, oefening is omdat het gebruik maakt van basis AI en algoritmes. Maar verder is alles gemaakt met gewoon Vanilla JS, HTML, en CSS.
Rating
Dit project heeft een goede omvang, een duidelijke structuur, en is leuk om te bouwen. De stem van de instructeur is duidelijk en het is makkelijk om hem te volgen. De uitleg is erg goed, en je zou je aan het eind behoorlijk goed moeten voelen.
5/5 sterren
Bonus: Bouw 9-in-1 Miniprojecten
Wat je gaat bouwen
Dit is een kleine bonus die ik je wilde presenteren: één enkele opname die negen kleine, onafhankelijke javascript-projecten bevat om je JavaScript-, HTML- en CSS-vaardigheden op te oefenen. Misschien kun je een paar van deze snippets gebruiken voor je eigen site?
Rating
Ik vind het een goed idee om meerdere kleine snippets in één opname te hebben. De stem van de instructeur zou wat duidelijker kunnen, en soms is het een beetje moeilijk om hem te volgen.
3/5 sterren
Meer JavaScript Projectideeën
Dit zijn zonder twijfel een paar leuke projecten om mee te volgen. Als je zelf iets wilt maken zonder een stap-voor-stap tutorial te volgen, heb ik nog een aantal ideeën voor javascript projecten die je kunt bouwen:
JavaScript Beginner Projecten
-
Database App met JavaScript
Taak: Maak een eenvoudige app die gebruik maakt van de IndexedDB van moderne browsers voor het opslaan van gegevens. -
JSON to CSV Converter met JavaScript
Taak: Bouw een eenvoudige app waarin gebruikers een JSON-string kunnen plakken of een JSON-bestand kunnen uploaden. De app moet de input omzetten in CSV en weergeven aan de gebruiker. -
Countdown Timer met JavaScript
Taak: Bouw een eenvoudige functie waarbij gebruikers een aantal seconden kunnen invoeren en de functie een aftelling start. -
Quiz-app met JavaScript
Taak: Bouw een eenvoudige quiz-app waarbij gebruikers vakjes kunnen aanvinken voor de juiste oplossingen. -
Stopwatch-app met JavaScript
Taak: Bouw een eenvoudige stopwatchfunctie waarbij gebruikers een timer kunnen starten en stoppen. -
Notities-app met JavaScript
Taak: Maak een app waarin gebruikers notities kunnen maken en beheren. -
Dollars to Cents Converter met JavaScript
Taak: Gebruikers moeten een aantal dollars kunnen invoeren en de app presenteert hen de waarde in centen. -
Pomodoro Clock met JavaScript
Taak: Bouw een app waarin gebruikers werktimers (25min) en pauzetimers (5min) kunnen aanmaken, en functies om deze timers te starten/stoppen/resetten. -
Recepten-app met JavaScript
Taak: Maak een app waarin gebruikers recepten voor verschillende categorieën kunnen vinden. Bonus: integreer een recepten-API. -
Lorem Ipsum Generator met JavaScript
Taak: Maak een app of component die Lorem Ipsum-tekst genereert op basis van de lengte die de gebruiker wil.
JavaScript Intermediate Projects
-
Currency Converter met JavaScript
Taak: Bouw een app om een valuta om te zetten in een andere. -
Teken app met JavaScript
Taak: Gebruikers moeten eenvoudige vormen en schilderijen kunnen tekenen in hun browservenster. -
Emoji App met JavaScript
Taak: Bouw een app waarmee gebruikers naar emoji’s kunnen zoeken en deze naar het klembord kunnen kopiëren. -
Meme Generator met JavaScript
Taak: Bouw een app waarmee gebruikers afbeeldingen kunnen uploaden, er tekst aan kunnen toevoegen en & kunnen downloaden. -
Paswoordgenerator met JavaScript
Taak: Gebruikers moeten willekeurige wachtwoorden kunnen maken met verschillende regelsets, zoals lengte, moeilijkheidsgraad, tekens, enz. -
Imagescanner met JavaScript
Taak: Bouw een app die metadata van geüploade afbeeldingen leest en visualiseert. -
To-Do App met JavaScript
Taak: Maak een app voor het beheren van to-dos. -
Voting App met JavaScript
Taak: Maak een app waarin gebruikers opiniepeilingen kunnen maken waarop anderen kunnen stemmen. -
Flashcards App met JavaScript
Taak: Bouw een app waarin gebruikers flashcards kunnen maken voor anderen om nieuwe dingen te leren. -
Boekenzoeker app met JavaScript
Taak: Maak een app waarmee gebruikers boeken kunnen zoeken aan de hand van verschillende criteria, zoals auteur, jaartal, inhoud, aanbevelingen, enz. Bonus: integreer een boeken-API.
JavaScript Advanced Projects
-
Movie App met JavaScript
Taak: Gebruikers moeten door films kunnen bladeren, beoordelingen bekijken, acteurs vinden en aanbevelingen krijgen. Bonus: integreer een film-API. -
Enquête-app met JavaScript
Taak: Gebruikers moeten enquêtes kunnen maken voor anderen, die ze dan kunnen invullen. -
Chat-app met JavaScript
Taak: Gebruikers moeten in real-time met elkaar kunnen chatten. -
Instagram-kloon met JavaScript
Taak: Gebruikers moeten vergelijkbare functies als Instagram kunnen ervaren. Bijvoorbeeld het uploaden van afbeeldingen, taggen, vind-ik-leuks, enz. -
Twitter-kloon met JavaScript
Taak: Gebruikers moeten dezelfde functies kunnen gebruiken als Twitter. Bijvoorbeeld het uploaden van afbeeldingen, tagging, vind-ik-leuks, enz. -
Pinterest-kloon met JavaScript
Taak: Gebruikers moeten dezelfde functies als Pinterest kunnen gebruiken. Bijvoorbeeld het uploaden van afbeeldingen, collecties, vind-ik-leuks, enz. -
Stock-Trading App met JavaScript
Taak: Gebruikers moeten grafieken kunnen bekijken en aandelen kunnen kopen (kan natuurlijk gesimuleerd worden). Bonus: integreer een aandelen-API. -
Analyse-app met JavaScript
Taak: Maak een app om het gedrag van gebruikers op een website bij te houden, zoals bezoeken, bouncepercentage, enzovoort. -
Video-app met JavaScript
Taak: Maak een app waarin gebruikers video’s kunnen uploaden en bekijken. -
File Sharing App met JavaScript
Taak: De gebruiker moet bestanden kunnen uploaden met of zonder registratie.
Een goed idee zou zijn dat je het documenteert als je een project bouwt en dat met de community deelt.
Okee, dat was het voor nu. En ik ben er vrij zeker van dat je niet kunt wachten om aan de slag te gaan met deze geweldige tutorials. Maar laat me je nog een ding vertellen. Het bekijken van de video’s en het mee coderen is een goede manier om dingen te leren en te oefenen. Maar je zult er het meeste uit halen als je je eigen smaak toevoegt aan de projecten – verbeter ze, verander ze, combineer ze, verbeter ze. Of nog beter: Maak je eigen project en documenteer het maken ervan. Je zult er veel van leren en anderen zullen je er dankbaar voor zijn!
Als je het leuk vindt wat ik schrijf en mij en mijn werk wilt steunen, volg me dan op Twitter om meer te leren over programmeren, maken, schrijven & careers🥰