In this John Smilga tutorial, you will learn how to create a random background color changer. Many of the screenshots below are from here.

If you have not learned JavaScript fundamentals, then I would suggest watching this course before proceeding with the projects.

How to create an Arkanoid game with TypeScript.How to build a Quiz App with React and TypeScript.How to create a Stripe payment menu page.How to create tabs for a portfolio page.How to build a Tetris Game using React Hooks.How to build a Tic-Tac-Toe game using React Hooks.How to create a Rock Paper Scissors game.How to create tabs that display different content.How to create a navigation bar on scroll.You can click on any of the projects listed below to jump to that section of the article. That will test if you have really learned the concepts or not. Experiment with adding new features or using different methods. My advice for tutorials would be to watch the video, build the project, break it apart and rebuild it your own way. I have created a list of 40 beginner friendly project tutorials in Vanilla JavaScript, React, and TypeScript. Most importantly, it gave me a pleasant change of scenery after weeks of grokking algorithms and data structures.The best way to learn a new programming language is to build projects. It was also interesting to see how others used different approaches to the same challenge.Īs someone who sped through JavaScript fundamentals and hopped on the fancy world of JavaScript frameworks, the 30-day challenge has truly made me appreciate the power of vanilla JavaScript. Explore Journeys of Coders around the Worldīorn and raised in Taiwan, I was delighted to see some Taiwanese flags🇹🇼 among the list of contributors/fellow learners. But nothing beats putting those objects and properties in practical use and watching them shine.ħ. Sure, you can browse through the documentation on this powerful Web API. Remember my previous post on multiple ways to format console outputs beyond console.log? Well, I wouldn't have known about all that were it not for JavaScript30 tutorials.Įnter fullscreen mode Exit fullscreen modeĭid you know that you can create a selfie maker, a webcam camera booth, or a voice changer using plain-old vanilla JavaScript? This is an irresistible bonus for visual learners out there. Speaking of CSS, every course comes with unique pre-built CSS styling, which makes each feature already visually appealing before you start coding. Couple that with Wes Bos' enthusiastic tone throughout the tutorials, you are bound to have an enjoyable coding journey.Īs a side note, it was through this tutorial that I found out about the 'BADASS' CSS colors. So, what can you achieve by completing these challenges? Here are 7 key takeaways from my own rewarding experience:ĭid I mention this tutorial is 100% free? Also, most videos are less than 20 minutes long - you can even build a cool-looking feature within 5 minutes of code-along! If you have not heard of JavaScript30 Challenge, it is a FREE video tutorial consisting of 30 coding exercises/challenges, each of which focuses on a specific JavaScript feature. There is more to vanilla JavaScript than meets the eye.Īt least that's what I discovered after completing Wes Bos' JavaScript30 Challenge in 30 days.

Java script challenges