Tutorials

Create a responsive pricing page for a website. The pricing page will contain multiple pricing plans with a clean, modern design and hover effects. It should be user-friendly and adaptable across devices.

This project involves creating a dynamic quiz web application where users can answer multiple-choice questions and receive feedback on their performance. The app will use HTML for structure, CSS for styling, and JavaScript for interactivity.

In this challenge, you will create a flipping card animation using HTML, CSS, and JavaScript. The animation will involve a card that flips to reveal its back side when clicked. This will help you learn how to use CSS transformations and transitions to create interactive animations, and how to control them with JavaScript.

In this challenge, you will create an interactive, animated chart using JavaScript and the HTML5 <canvas> element. The chart will display dynamic data that updates in real-time with animations. You will also add interactivity, allowing the user to hover over chart elements to see additional details.

In this challenge, you will create a simple animation of a ball bouncing within a rectangular area. The ball will move diagonally, and when it hits the edges of the container, it will bounce back in the opposite direction. This challenge will help you understand JavaScript animations and DOM manipulation.

In this challenge, you will implement the Linear Search algorithm in JavaScript. Linear search is the simplest search algorithm. It checks each element of a list sequentially until a match is found or the entire list has been searched. You will write a function that takes an array and a target value as input and returns the index of the target if it is found, or -1 if it is not found.

In this challenge, you will implement a Stack data structure in JavaScript. A stack is a collection of elements that follows the Last In, First Out (LIFO) principle. The last element added to the stack is the first one to be removed. You will implement the essential methods of a stack such as push(), pop(), peek(), and isEmpty().

In this challenge, you will implement a function to **merge two sorted arrays** into one sorted array. This is a common algorithm used in sorting algorithms like **Merge Sort**. The input arrays are both already sorted, so your task is to combine them in such a way that the resulting array remains sorted. This challenge emphasizes handling edge cases like empty arrays and optimizing the solution to have **O(n + m)** time complexity, where `n` and `m` are the lengths of the two arrays.

In this challenge, you will implement the **Binary Search** algorithm in JavaScript. Binary search is an efficient algorithm for finding an item from a sorted list of items. It works by repeatedly dividing in half the portion of the list that could contain the item until you've narrowed the possible locations to just one. Binary search operates in O(log n) time complexity, making it much faster than a linear search when dealing with large datasets.

This tutorial will walk you through building a simple shopping cart using React. The cart will allow users to add, remove, and update the quantity of products. We'll also calculate the total price and display it dynamically.

This tutorial will guide you through creating a basic JavaScript slideshow that automatically changes images and allows manual control through next and previous buttons.

In this challenge, you will create a page loader animation using HTML and CSS. The loader should be a visually engaging animation that displays while the page is loading. Common loader designs include spinning circles, bouncing dots, or pulsating elements. Your task is to create a loader that effectively grabs user attention while being stylish and non-intrusive.

In this challenge, you will create a parallax scrolling effect on a webpage using only HTML and CSS. The parallax effect will create an illusion of depth by making background images move at a different speed compared to the foreground content as the user scrolls. This effect is often used to add visual interest and engagement to web pages.

In this challenge, you will create a responsive image gallery using only HTML and CSS. The gallery should automatically adjust the number of columns based on the screen size, ensuring that the images resize proportionally. Focus on using CSS Grid or Flexbox for layout and media queries for responsiveness. No JavaScript is allowed for the functionality.

In this challenge, you will create an interactive accordion using only HTML and CSS. The accordion should allow users to expand and collapse content sections by clicking on a header. No JavaScript is allowed for the functionality—CSS transitions and pseudo-classes will handle the interactive behavior. Focus on styling and smooth transitions for a clean and responsive design.

Design a responsive pricing table with hover effects.

Create an animated loading spinner using only HTML and CSS.

Build a responsive image gallery using CSS Grid.

Create a responsive card layout using Flexbox.

Fetch data from a public API and display it on a webpage.

Implement client-side form validation for a user registration form.

Create a responsive navigation menu that transforms into a hamburger menu on mobile devices.