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.68 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 • 2023 November 20 • 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 • 2024 January 30 • 12 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.
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.🔓 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 a Food Expiry Tracker
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
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.
🗺️ 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.
Phaser Roadmap
Learn how to build JavaScript games using our guided roadmapThis roadmap covers and takes you through various Phaser projects to help you practice JavaScript through building simple games with the Phaser framework.
📚 More Webtips
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
Recommended
How to Create a Configurable Tabs Component in React
With TypeScript and HTML content support
Ferenc Almasi • 2024 February 23 • 11 min read • React v18.2
How to Create a Responsive Timeline Component in React
With the help of CSS pseudo elements
Ferenc Almasi • 2024 February 13 • 10 min read • React v18.2
How to Create Dynamic Routes in Astro
Generating different pages based on server-side data
Ferenc Almasi • 2024 January 16 • 9 min read