New Projects Monthly

Web Development Project Ideas

Looking for ideas for projects to practice web development skills? Try one (or all) of our real-world web development projects. This collection includes some of our best web development practice project ideas. They're all based on real world development scenarios, and include Figma files and style guides to help you get started.

Curricular React Projects Co-created with hiring managers and senior devs
Curricular JavaScript Projects Professionally designed, portfolio-ready project materials
Curricular Node Projects Highly vetted reviewers and mentors

Design a One-time Password Feature

</>
practice
intermediate

Put your full stack JavaScript skills to the test creating an application that handles OTP generation, validation, and user authentication.

FAQ Accordion

</>
practice
foundations

Practice essential frontend development skills by building this expandable and collapsable menu component.

Filterable and Sortable List Component

</>
practice
intermediate

Develop a filterable and sortable list view component for an issue tracking application, allowing users to filter tickets based on severity and status.

Toast Notifications

</>
practice
foundations

Master DOM manipulation, event handling, dynamic CSS styling and more by building a custom toast notification system using HTML, CSS, and JavaScript.

Testimonial Carousel

</>
practice
foundations

Sharpen your HTML, CSS, and JavaScript skills by practicing responsive design, dynamic content manipulation, and user interaction in implementing a testimonial carousel for a creator services app.

Pricing Page Design

</>
practice
foundations

Flex your proficiency with responsive design, CSS Flexbox/Grid, and JavaScript interactivity by creating a Pricing Page for a software-as-a-service application that looks good on desktop and mobile.

Task Card Component and Detail View

</>
practice
intermediate

Master foundational frontend development and responsive design skills by building a reusable Task Card and accompanying Task Detail View for a Project Management SaaS App.

Implement an RSVP Feature

</>
practice
foundations

Hone your responsive design and JavaScript or React skills by building an RSVP feature for a practical event management application.

Subtask Creation Workflow for SaaS App

</>
practice
intermediate

Implement an interface for users to add and assign subtasks within a Project Management SaaS application.

Task Assignment Workflow

</>
practice
intermediate

Create a feature that allows users to assign tasks to teammates within a Project Management SaaS.

Interactive Job Post Creator

</>
capstone
advanced

Develop a job posting builder that streamlines the creation of job listings, incorporating user-friendly features and a mock API to simulate template saving and retrieval functionalities.

Create a Dynamic Account Application Form

</>
capstone
advanced

Put your front end development skills to the test building a high-converting, customer-friendly account application form for a financial services firm.

Profile Page for a SaaS App

</>
Practice
foundations

Create an elegant-looking, responsive profile page for a project management software, allowing users to view and update their personal and account information.

SaaS Notifications System

</>
Practice
intermediate

Create a notification system for a project management app that allows users to read, manage, and dismiss notifications they receive.

Responsive Navigation Menu

</>
Practice
beginner

Design and implement a navigation menu that works seamlessly across various screen sizes and devices.

Event Card Component

</>
Practice
beginner

Create a responsive, reusable card layout for an event planning website.

Landing Page for a SaaS App

</>
Practice
novice

Create an elegant-looking, responsive landing page for an applicant tracking system SaaS app.

Responsive Login Form with Validation

</>
Practice
beginner

Design and implement a responsive login component with fields for username and password, and basic form validation.

Create a Dynamic Account Application Form in React

</>
Capstone
Advanced

Use React to build a high-converting, customer-friendly account application form for a financial services firm.

Bring Your Own Python Project

</>
Capstone
Advanced

Get an in-depth code review and practice interview with a professional developer on a fullstack Python project of your choice.

Bring Your Own React Project

</>
Capstone
Advanced

Get an in-depth code review and practice interview with a professional developer on a React project of your choice.

Build a Support Dashboard for an AI Startup

</>
Capstone
Advanced

In this capstone project, use Python and Flask to make an enterprise support dashboard more readable and performant.

Start Building Today

Create Free Account