30

Frontend

Projects

A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.

This HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model.

This challenge involves building an Accordion component from scratch, where candidates implement a UI component based on a problem statement.

In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!.

This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.

In this frontend coding challenge, implement a game to match countries with their capitals.

Practice your layout skills with this article preview component. There's lots of fun to be had playing around with animations for the sharing icons as well.

In this question, you need to build a password strength checker in React.js that shows the strength of the password.

In this coding challenge, you need to build an autocomplete that will act as a payment page where users can enter their UPI.

This challenge will be perfect practice for anyone wanting to test their CSS Grid skills. Grid is such a powerful addition to CSS, so it's worth getting to grips with it!

In this question, the candidate needs to build a sidebar that contains a collapsible tree-like UI.

This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.

A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.

The Multi-Select Dropdown Component Challenge involves creating a React component that allows users to select multiple US states from a dropdown menu and displays the count of selected states in real-time. This challenge tests your skills in React, state management, and dynamic user input handling.

In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.

This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!

This challenge is designed to sharpen your JavaScript and form validation skills. Working with dates in JavaScript can be tricky, so this will be a nice test!

In this question, the candidate needs to add and animate multiple progress bars on a button click.

In this project, you'll build out an interactive pricing component complete with custom range input slider and pricing toggle. A perfect way to test your JS skills!

Build a React stoplight component that cycles between colors at set intervals, using hooks to manage state.

The challenge is to create an image slider (carousel) component with functionality for navigating between images, automatic cycling with play/stop controls, and basic sliding animations.

The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.

In this challenge, you'll be using two separate APIs together to create an IP Address Tracking app.

In this UI coding challenge, the candidate needs to build a simple React app where a circle should appear wherever user clicks on the screen.

Create a shape based on a given 2D array. A shape is a collection of empty boxes placed at values that are true in the provided array.

Create a component that shows a number input challenge, requiring users to enter a correct 4-digit code. When the right code is input, the component transitions to a different view or content.

The challenge is to create a game where a randomly generated color is displayed, and the user must select the correct hexadecimal code from three options.

This will test your skills with basic form structure, validation, and submission. The success state will also be an excellent opportunity to work with DOM manipulation.

The Memory Game Challenge involves building a 4x4 memory game, where players match tiles by clicking on them. The challenge focuses on state management, dynamic rendering, and event handling, with optional features like a timer and move tracking to enhance gameplay.

In this beginner-level React challenge, you'll create a 3x3 grid-based Whack-a-Mole game. The objective is to click on the moles before they disappear, increasing your score.