How to Build an Animated Carousel
Building a carousel in vanilla JavaScript with zoom effects
Learn how you can build a carousel from scratch and how to smoothly zoom images in and out in JavaScript.
Building JavaScript Projects
Learn how to work with JavaScript using our guided roadmap📚 17 lessons • 📖 3.52 hours read in total
Learning is a continuous process. If you are already familiar with how JavaScript works, these projects will help you put theory into practice. Solidify your knowledge by building the following components and applications.
If you are new to JavaScript, be sure to take the JavaScript roadmap first. If you want to explore more JavaScript tutorials without a direction, you can filter for the tutorials you are interested in on our JavaScript category page. After finishing this roadmap, you can continue with our React roadmap.
Building a Pagination Component
Learn how to work with template literalsLearn how you can build a reusable pagination component in vanilla JavaScript with the ability to customize it with a function call.
How to Implement Drag and Drop
With the help of the HTML Drag and Drop APILearn how you can build a drag-and-drop Kanban board in JavaScript with the help of the native HTML Drag and Drop API.
How to Make Exit-Intent Popups
Making popups appear just at the right timeLearn how you can implement exit-intent popups in JavaScript to trigger their appearance just at the right time when users are about to leave your page.
JavaScript Password Generator
Learn how to build a customizable password generator in vanilla JavaScriptLearn how you can create a JavaScript password generator app with customizable options. (source code provided)
How to Build Hangman in JavaScript
With the help of Node.jsLearn how you can build the famous hangman game in JavaScript with the help of Node.js as a command-line game.
How to Create a Memory Game
Improve your memory, and your JavaScript skillsIn this tutorial, we will be looking into how you can recreate a memory game with flipping cards in vanilla JavaScript.
How to Recreate Tic-Tac-Toe
Building games in vanilla JavaScriptLearn how you can recreate the famous tic-tac-toe game in vanilla JavaScript in less than 100 lines of code.
Easter Egg Hunt Game in JavaScript
With the help of Party.jsLearn how you can create an Easter egg hunt game in JavaScript with the help of CSS animations and party.js.
How to Make Colorful Fireworks in Vanilla JavaScript
With the help of the Canvas APILearn how you can create beautiful and colorful fireworks in vanilla JavaScript with the help of the Canvas API - get the full source code from GitHub.
Introduction to ThreeJS
Making an interactive 3D planet in JavaScriptLearn how you can use Three.js to create 3D worlds inside your browser using JavaScript and WebGL.
How to Make the Snake Game in JavaScript
Using only checkboxesLearn about DOM manipulation through the example of recreating the snake game in HTML and JavaScript, using only checkboxes.🔓 Unlock this lesson 
How to Build a Sort & Filterable Table
Learn how to sort and filter tables in JavaScriptLearn how you can implement sort and filter functionality for tables in JavaScript using various array methods.🔓 Unlock this lesson How to Build an Expires App
Storing and retrieving expiring foods in your browserLearn how you can use the Local Storage API to store data in the browser and how to combine it with the DOM to display the stored data.🔓 Unlock this lesson How to Track the Position of ISS on Google Maps
Displaying data from remote resourcesLearn how you can combine the Fetch API with the DOM to display data from a remote resource.🔓 Unlock this lesson How to Make a Recipes App
With support for tracking ingredientsLearn how you can modularize your JavaScript application and combine multiple web APIs to create a functioning app for storing and managing recipes.
100 JavaScript Project Ideas
From Junior to SeniorAre you looking for your next JavaScript project to take on? Here are 100 JavaScript project ideas for you to choose from, with linked resources to tutorials and designs.
🗺️ Related roadmaps
Continue learningJavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap covers and takes you through the essential concepts in JavaScript, from basic syntax to more advanced concepts like functional or asynchronous programming.React Roadmap
Learn React with our guided roadmapThis roadmap covers and takes you through the essential concepts in React, from JSX, props and state, to more advanced concepts like lazy loading, suspense and error boundaries.
React Projects Roadmap
Learn working in React with our guided roadmapThis roadmap takes you through various React projects to help you practice React while also building a portfolio and reusable code.
📚 More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
