New Projects Weekly

Responsive Design Projects

This collection includes a variety of free projects you can build to practice your responsive design skills. Choose from a variety of scenarios based on real development tickets and solve them using whichever languages and tools you like. Every project includes Figma files, style guides, and more - everything you need to get started.

Get Started for Free See Our Plans

Co-created with hiring managers and senior devs

Professionally designed, portfolio-ready project materials

Highly vetted reviewers and mentors

Landing Page for a SaaS App

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

🎯 Frontend 👩‍💻 Practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 Practice

🧩🤯 beginner

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

This project emphasizes skills essential to modern frontend development, including responsive layout techniques with Flexbox/Grid, implementing subtle JavaScript scroll animations, and applying best practices for accessibility. Working from a design mockup, you’ll develop your ability to translate visual concepts into code, using HTML, CSS, and JavaScript to ensure the page looks and feels consistent across devices. The stretch goals encourage you to improve page performance and optimize for search engines, meeting a wider range of advanced real-world requirements for a polished, user-centered landing page.

Learn More

FAQ Accordion

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

🎯 Frontend 👩‍💻 practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 practice

🧩🤯 beginner

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

This project is an excellent benchmark for assessing your frontend capabilities and honing the skills needed in today’s web development roles. See how your skills stack up against a practical, professional-grade assignment, creating polished, responsive, and accessible UI components. You’ll practice essential JavaScript skills, including DOM manipulation, event handling, and responsive styling — skills that every frontend developer needs to master to create engaging user experiences. This project includes stretch goals that encourage you to add intermediate to advanced features, making this a great project for developers of all skill levels.

Learn More

Event Card Component

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

🎯 Frontend 👩‍💻 Practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 Practice

🧩🤯 beginner

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

This project tests your mastery of core React concepts like component reusability, props, state management, and data handling. If you can solve this project, you're well on your way to building complex React apps. Additionally, the optional stretch goals we suggest encourage you to push the difficulty to the next level and really showcase what you can do, making this a great project for developers of all levels, from foundational to advanced React developers.

Learn More

Implement an RSVP Feature

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

🎯 Frontend 👩‍💻 practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 practice

🧩🤯 foundations

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

Practice building real-world interactivity and responsiveness into a web application with this project. By creating an RSVP feature, you’ll work on essential skills such as form design, responsive layout, and dynamic feedback, ensuring users can easily RSVP, manage their attendance, and view event details across devices. You'll practice using JavaScript or React for interactive elements and managing component state. With stretch goals like backend integration for data persistence and email confirmations, you can practice advanced skills that enhance the feature's functionality and add more depth to your project portflio.

Learn More

Toast Notifications

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

🎯 Frontend 👩‍💻 practice 🕗 3-5 hours

🎯 Frontend

👩‍💻 practice

🧩🤯 foundations

🕗 3-5 hours

Why This is a Great Practice Project

Toast notifications are widely used in modern applications to provide quick feedback on user actions. By building a custom toast system, you’ll gain hands-on experience with DOM manipulation, event handling, and dynamic styling, which are essential skills for responsive and interactive web applications. The project provides a great opportunity to practice both fundamental JavaScript skills and responsive design, while stretch goals such as customization and dismissible notifications add further challenges for creating a polished, professional-grade feature.

Learn More

Testimonial Carousel

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.

🎯 Frontend 👩‍💻 practice 🕗 3-5 hours

🎯 Frontend

👩‍💻 practice

🧩🤯 foundations

🕗 3-5 hours

Why This is a Great Practice Project

This project is great for mastering interactive, responsive components, either in Vanilla JS or with React. You'll create a carousel that cycles through testimonials with smooth transitions and navigation, strengthening your skills in DOM manipulation, event handling, and responsive design, preparing you to build polished, user-centered interfaces. Our suggested stretch goals, such as adding swipe functionality for mobile, accessibility features, and lazy loading, give you options for enhancing the performance and professionalism of your project.

Learn More

Profile Page for a SaaS App

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

🎯 Frontend 👩‍💻 Practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 Practice

🧩🤯 foundations

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

This portfolio-ready project tests essential frontend skills including responsive design, form validation, and dynamic content updates. You'll have the option to use either Vanilla JavaScript or React, along with HTML and CSS, implementing features like real-time data updates, user feedback on edits, and form interactivity — all critical for professional applications. The stretch goals push your skills further, with suggestions like handling profile picture uploads, dark mode, and more to bring in additional skills and help your project stand out to potential employers.

Learn More

Pricing Page Design

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.

🎯 Frontend 👩‍💻 practice 🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

🎯 Frontend

👩‍💻 practice

🧩🤯 foundations

🕗 3-5 hours

🛠️ JavaScript| CSS| HTML| React

Why This is a Great Practice Project

This project is an excellent showcase of your proficiency in layout design, responsive styling, and user-centered interactivity. You'll practice creating visually engaging, adaptable layouts using CSS Flexbox and Grid, ensuring that the page looks and functions well across desktop and mobile devices. This project emphasizes precision in translating mockups into clean, well-structured code, while encouraging efficient styling practices that lead to a professional-grade final product. Additionally, you can choose vanilla JS or React for incorporating interactivity into the pricing cards. This is a beginner-friendly project that still simulates a real-world development assignment.

Learn More

View All Projects