JavaScript Tutorials

In this step-by-step project, we will create a modern and visually appealing Expense Splitter web application using HTML, CSS, and JavaScript. This application will allow you to split expenses among a group of people and calculate who owes what to whom. We will start from scratch and cover each step to build the project progressively.

In this project, you will learn how to create a simple 'Fruit for Fun' game using HTML, CSS, and JavaScript. The game involves matching pairs of fruit images by clicking on the squares on the game board.

In this project, you will learn how to create a simple folding accordion using HTML, CSS, and JavaScript. The folding accordion is a common UI element that allows users to expand and collapse content sections, making it a useful feature for displaying information in a compact and organized manner.

In this project, you will learn how to create an interactive collection of films web application using HTML, CSS, and JavaScript (jQuery). The application allows users to mark their favorite films, and when a collection of favorite films is created, a success message is displayed.

In this project, you will learn how to create a real-time sales dashboard using the Echarts library. The dashboard will display the sales and volume data in a visually appealing and easy-to-understand format.

In this project, we will create a simple web-based Markdown editor that offers live HTML preview as you type. Using libraries like Ace Editor, marked, and highlight.js, you'll develop an intuitive editor that not only allows writing in Markdown but also saves data across browser sessions and highlights code snippets in the preview.

In this project, we will create a VSCode extension that lets the user adjust the heading level of selected Markdown text.

In this project, we are going to build a fun and simple avoiding block game using HTML, CSS, and JavaScript. This game involves moving blocks where the player must click the black blocks to score points and avoid clicking the white blocks. Let's start building it step by step!

In this lab, you will learn the fundamentals of JavaScript by declaring variables using `let` and exploring basic data types like strings, numbers, and booleans.

This project will guide you through the process of creating a simple image cropping tool. By the end, you'll have an interactive application that allows users to upload, display, and crop images.

This project, the 'jQuery Flip Puzzle Game,' provides a hands-on experience in web development, focusing on JavaScript, jQuery, and Bootstrap. It involves object-oriented programming in JavaScript and addresses the common issue of 'this' binding in the context of web development. The game is implemented using jQuery and Bootstrap 3 for the user interface. While familiarity with Bootstrap is helpful, the project's core logic is built with jQuery and JavaScript.

In this project, you will learn how to create a simple fruit stacking game using HTML, CSS, and JavaScript. The goal is to stack the falling fruit items at the top of the page into the box at the bottom. If there are three identical fruits in the box, they will be automatically removed.

2048 is an extremely popular and easy-to-learn game that has taken the world by storm. If you haven't played it yet, you can download it on your mobile phone to give it a try. This project will guide you in using HTML, CSS, JavaScript, and jQuery to create a web version of the 2048 game.

This project will lead you through creating a heatmap calendar in React, resembling GitHub's contribution graph. This kind of calendar can be a compelling way to visualize activity data over time, with the intensity of color indicating the level of activity on a given day. By the end of this project, you will have a clear understanding of how to integrate and use a calendar heatmap in a React application.

In this project, we will create a simple web-based drawing board application step by step. Each step will build upon the previous one, allowing you to gradually add functionality to the application. By the end of this project, you will have a fully functional drawing board where users can draw, change brush color, adjust brush size, and clear the canvas.

Welcome to this project on building a simple Sliding Puzzle game using JavaScript. By the end of this guide, you'll have a functioning 3x3 sliding puzzle game that you can play in your browser. The game will feature numbered tiles, a timer, and controls to start, pause, and reset the game.

In this project, you will learn how to build a voting application that allows users to create and manage voting options, as well as delete options if needed. The application also includes features for multi-selection support and public voting results.

In this project, we will create a drag-and-drop puzzle game using React. This is an excellent project for beginners to learn about React components, state management, and handling user interactions. By the end of this project, you will have a functional puzzle game.