How to Build an Animated Carousel
Building a carousel in vanilla JavaScript with zoom effects
Ferenc Almasi • 2022 July 19 • 
12 min readLearn how you can build a carousel from scratch and how to smoothly zoom images in and out in JavaScript.
Building JavaScript Projects Other roadmaps
Learn how to work with JavaScript using our guided roadmap📚 19 lessons • 📖 3.70 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 Customizable Modal
In less than 50 lines of codeFerenc Almasi • 2023 July 28 • 7 min readLearn how you can create a customizable modal in JavaScript with the ability to customize text and buttons in less than 50 lines of code.
Building a Pagination Component
Learn how to work with template literalsFerenc Almasi • 2022 June 21 • 12 min readLearn 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 APIFerenc Almasi •
2021 November 11 • 7 min readLearn 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 timeFerenc Almasi • 2021 September 17 • 10 min readLearn 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 JavaScriptFerenc Almasi • 2022 May 02 • 14 min readLearn 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.jsFerenc Almasi • 2023 January 26 • 22 min readLearn 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 skillsFerenc Almasi • 2022 February 04 • 17 min readIn 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 JavaScriptFerenc Almasi • 2021 December 19 • 13 min readLearn 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.jsFerenc Almasi • 2023 March 29 • 7 min readLearn how you can create an Easter egg hunt game in JavaScript with the help of CSS animations and party.js.
Export HTML Tables to Excel
Using two different solutionsFerenc Almasi • 2023 July 18 • 4 min readLearn how you can export HTML tables to excel in two different ways, with and without 3rd party libraries, using JavaScript.
How to Make Colorful Fireworks in Vanilla JavaScript
With the help of the Canvas APIFerenc Almasi • 2022 July 06 • 20 min readLearn 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 JavaScriptFerenc Almasi • 2021 November 11 • 9 min readLearn 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 checkboxesFerenc Almasi • 2022 May 30 • 14 min readLearn 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 JavaScriptFerenc Almasi • 2022 March 30 • 8 min readLearn 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 browserFerenc Almasi • 2022 April 08 • 21 min readLearn 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 resourcesFerenc Almasi • 2022 April 08 • 12 min readLearn 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 ingredientsFerenc Almasi • 2022 April 10 • 13 min readLearn 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 learning
JavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap takes you through the essential concepts in JavaScript, from basic syntax to advanced concepts like functional and asynchronous programming.
React Roadmap
Learn React with our guided roadmapThis roadmap takes you through the essential concepts in React, from JSX, props and state, to concepts like lazy loading, suspense and error boundaries.
Building React Projects
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
Access exclusive interactive lessons- Unlimited access to hundreds of tutorials
- Remove ads to learn without distractions
Recommended
How to Work With Event Listeners in Astro
Writing JavaScript in Astro
Ferenc Almasi • 2023 November 30 • 11 min read
How to Work With CSS in Astro
Learn the many ways of styling Astro components
Ferenc Almasi • 2023 November 28 • 9 min read
Astro vs JSX — What are the Differences?
Comparing two similar syntax
Ferenc Almasi • 2023 November 24 • 12 min read