Skip to content
Use casesFrontend projects

Master frontend development with real-world projects

Transform your frontend skills into job-ready expertise through hands-on projects. Build responsive websites, interactive web applications, and modern interfaces with professional designs, and get feedback from the Frontend Mentor community of over 1 million developers.

Start building free

Join 1,099,071 developers building projects, reviewing code, and helping each other improve.

Testimonials

"I highly recommend Frontend Mentor. Skip the search for project ideas and dive into ready-made challenges that help you level up as a developer."

Kevin PowellWeb Developer & YouTuber

"Frontend Mentor is a win-win. You can sharpen your skills building websites and add finished projects to your portfolio to help land a job!"

Jessica ChanWeb Developer & YouTuber

Learn frontend development by building, not just watching

Frontend Mentor provides realistic project briefs that let you practice frontend development on real-world challenges. Build everything from simple landing pages to complex web applications. Work with professional designs from day one, compare your solutions with the community, and create a portfolio that demonstrates production-ready skills employers actually want to see.

How to start building frontend projects

  1. Pick a project below that matches your current skill level.

  2. Build it from scratch—don’t just copy-paste code. Make it your own.

  3. Push to GitHub and share your work.

  4. Iterate: Add features, refactor your code, try different approaches.

  5. Want feedback? Submit your project for community review on Frontend Mentor.

HTML & CSS projects

Build responsive websites and components using HTML and CSS. These projects teach layout techniques including Flexbox and Grid, responsive design patterns, and CSS best practices. Perfect for beginners starting their frontend journey or experienced developers looking to refine their styling skills without the complexity of JavaScript.

  • Free+

    QR code component

    • HTML
    • CSS
    1newbie

    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.

  • Free+

    Blog preview card

    • HTML
    • CSS
    1newbie

    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.

  • Free

    Social links profile

    • HTML
    • CSS
    1newbie

    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!

  • Free

    NFT preview card component

    • HTML
    • CSS
    1newbie

    This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

  • Free

    Product preview card component

    • HTML
    • CSS
    1newbie

    This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

  • Free

    3-column preview card component

    • HTML
    • CSS
    1newbie

    This challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects.

  • Free

    Four card feature section

    • HTML
    • CSS
    1newbie

    A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.

  • Free

    Testimonials grid section

    • HTML
    • CSS
    2junior

    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!

  • Free

    Bento grid

    • HTML
    • CSS
    2junior

    This challenge is perfect for testing your CSS Grid and responsive skills with this bento grid layout.

  • Premium

    Typemaster pre-launch landing page

    • HTML
    • CSS
    2junior

    This project will be a perfect opportunity to put your CSS Grid skills to the test. The layout shifts from mobile, to tablet, to desktop will also be a nice challenge.

  • Premium

    Tech book club landing page

    • HTML
    • CSS
    2junior

    This will be an excellent test of your HTML and CSS skills. The design uses common layout patterns you'll likely use in future projects, as well as some fun details.

  • Premium

    Suite landing page

    • HTML
    • CSS
    2junior

    This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test!

JavaScript frontend projects

Add interactivity to your frontend skills with JavaScript projects ranging from simple DOM manipulation to complex applications. Build interactive components, work with APIs, handle forms and validation, and create dynamic user experiences. These projects demonstrate your ability to bring designs to life with functionality.

  • Free

    FAQ accordion

    • HTML
    • CSS
    • JS
    1newbie

    In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!

  • Free

    Interactive rating component

    • HTML
    • CSS
    • JS
    1newbie

    This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

  • Free

    Newsletter sign-up form with success message

    • HTML
    • CSS
    • JS
    2junior

    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.

  • Premium

    Pod request access landing page

    • HTML
    • CSS
    • JS
    1newbie

    In this challenge, you'll be building out an early access landing page that includes custom form validation.

  • Free

    Age calculator app

    • HTML
    • CSS
    • JS
    2junior

    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!

  • Free

    Pricing component with toggle

    • HTML
    • CSS
    • JS
    2junior

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

  • Free

    Tip calculator app

    • HTML
    • CSS
    • JS
    2junior

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

  • Free

    Mortgage repayment calculator

    • HTML
    • CSS
    • JS
    2junior

    This mortgage calculator is an excellent project for practicing working with forms, client-side validation, and updating the DOM. Remember to focus on accessibility, too!

  • Free

    Advice generator app

    • HTML
    • CSS
    • JS
    • API
    2junior

    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.

  • Premium

    GitHub user search app

    • HTML
    • CSS
    • JS
    • API
    2junior

    In this project, you'll use the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API.

JavaScript framework projects

Build modern web applications using popular JavaScript frameworks, such as React, Vue, Angular, or Svelte. Practice component architecture, reactive state management, routing, and modern build tools while creating scalable, maintainable applications. These projects showcase your ability to work with the frameworks and tooling that companies use in production environments.

  • Free

    Browser extension manager UI

    • HTML
    • CSS
    • JS
    2junior

    This project will be a fun way to practice working with dynamic data, filtering data, color theming, building a responsive grid, and more!

  • Premium

    Character counter

    • HTML
    • CSS
    • JS
    2junior

    This project will test a range of your skills, especially your JavaScript, with the counters and letter density graph. The theme switcher is another little challenge.

  • Premium

    Password generator app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will be an excellent test of your HTML, CSS, and JS skills. You'll build custom form controls and use JavaScript to generate random passwords.

  • Free

    Interactive comments section

    • HTML
    • CSS
    • JS
    3intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • Premium

    Personal blog

    • HTML
    • CSS
    • JS
    3intermediate

    This multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!

  • Premium

    Dictionary web app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    In this project, you'll integrate with the Dictionary API to create a real-world dictionary web app. Additional tests include colour themes and font selection.

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    3intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

  • Premium

    Galleria slideshow site

    • HTML
    • CSS
    • JS
    3intermediate

    This art gallery slideshow project will be a great test for your layout and JS skills. With the masonry layout, slideshow logic, and lightbox view there's a lot to build!

  • Free

    Calculator app

    • HTML
    • CSS
    • JS
    3intermediate

    This calculator app will be a great test of your CSS and JS skills especially. If you're wanting to practice using Grid, this challenge will be perfect for you!

  • Free

    Weather app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    Build a responsive weather app with search functionality, unit conversion, and detailed forecasts using the Open-Meteo API.

  • Premium

    Tic Tac Toe game

    • HTML
    • CSS
    • JS
    3intermediate

    This classic practice project for web developers is a great exercise to complete. It will test your HTML semantics, your grid layout skill, as well as your JS logic.

  • Premium

    Devjobs web app

    • HTML
    • CSS
    • JS
    4advanced

    Build a jobs board that pulls data from a local JSON file. This is a great opportunity to practice JS and get to grips with a framework/library of your choice!

  • Free

    Multi-step form

    • HTML
    • CSS
    • JS
    4advanced

    An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    4advanced

    If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API.

  • Premium

    Bookmark manager app

    • HTML
    • CSS
    • JS
    4advanced

    Build a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    4advanced

    This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

Why Frontend Mentor for frontend projects?

We're not just another tutorial site. Our approach is proven to help developers build real skills that translate directly to job requirements.

  • Professional designs included

    Skip the design phase and focus on coding. Every project comes with Figma files and style guides from professional designers.

  • Code reviews & feedback

    Get constructive feedback from our community of 1,000,000+ developers. Learn best practices and improve your code quality.

  • Portfolio-ready projects

    Every completed project can be added to your portfolio with live demos and GitHub repos that impress recruiters.

Frequently Asked Questions

  • What frontend projects should beginners build?

    Begin with HTML and CSS projects that establish your foundation, such as single-page landing pages, profile cards, or simple component layouts. Focus on responsive design and semantic HTML. Next, add basic JavaScript interactivity, such as accordions, tabs, or image sliders. Avoid complex projects with multiple technologies initially. Each project should teach 2-3 new concepts while reinforcing previous learning. Build at least 8-10 beginner projects before attempting intermediate work. This repetition cements fundamentals and builds confidence without overwhelm.

  • How many frontend projects do I need in my portfolio?

    Quality beats quantity: 5-8 exceptional projects outperform 20 mediocre ones. Your portfolio should demonstrate range: include HTML/CSS projects showing design implementation skills, JavaScript projects demonstrating interactivity and problem-solving, and framework projects proving modern development knowledge. Each project should showcase different skills—responsive design, API integration, complex state management, and accessibility. Hiring managers spend 30-60 seconds reviewing portfolios. They notice polished, diverse projects with clean code and thoughtful UX, not repetitive tutorials or incomplete work.

  • What makes a frontend project portfolio-worthy?

    Portfolio-worthy frontend projects demonstrate professional-level execution, not just the completion of tutorials. They feature responsive design across all screen sizes, clean semantic HTML, and organized CSS architecture. JavaScript code handles edge cases and errors gracefully. Performance is optimized—enjoy fast load times, efficient code, and proper image optimization. Accessibility is built in with appropriate ARIA labels, keyboard navigation, and semantic markup. Projects are deployed live with custom domains when possible. READMEs explain technical decisions and challenges overcome. Most importantly, projects look professionally designed—Frontend Mentor projects excel in this regard.

  • Should I learn frontend or full-stack development?

    Start with frontend first, regardless of your ultimate goal. Frontend skills form the foundation for full-stack development—you can't build effective backends without understanding what frontends need. Master HTML, CSS, and JavaScript thoroughly. Build 10-15 frontend projects until responsive design and interactivity feel natural. Then learn React or another framework. Only after solid frontend proficiency should you add backend skills. This progression ensures you understand the complete picture. Many 'full-stack' developers with weak frontend skills struggle with real projects. Strong frontend developers easily add backend skills later.

  • What's the difference between frontend projects and web development projects?

    Frontend projects focus specifically on the user-facing part of web applications: HTML, CSS, JavaScript, and frontend frameworks like React. Web development projects can include backend work: servers, databases, APIs, and deployment infrastructure. All frontend projects are web development projects, but not all web development projects are purely frontend. When building your portfolio, start with frontend projects to demonstrate strong UI/UX implementation skills, then expand to full-stack projects that show you can connect frontends to backends effectively.

  • How long does it take to learn frontend development?

    With consistent daily practice, expect 6-12 months to become job-ready in frontend basics: HTML, CSS, JavaScript, responsive design, and one framework like React. This timeline assumes 2-3 hours daily building projects, not just watching tutorials. Months 1-3: HTML/CSS fundamentals through 10-15 projects. Months 3-6: JavaScript and DOM manipulation through 8-10 projects. Months 6+: Framework learning through 5-8 projects. This timeline varies significantly based on prior experience and daily commitment. Learning never stops—senior developers continuously learn new patterns, tools, and techniques.

  • Do frontend developers need to know design?

    Frontend developers don't need to create designs from scratch, but they must implement designs accurately. This requires understanding typography, spacing, color, visual hierarchy, and responsive design principles. You need to recognize good UI/UX and replicate it pixel-perfectly in code. Frontend Mentor projects are perfect for this—professional designers create the designs, you implement them in code, learning design implementation without needing design creation skills. Many successful frontend developers never design but excel at bringing designers' visions to life through clean, maintainable code.

Join 1,099,071 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in

Related pages

Beginner HTML & CSS projects

Practice basic HTML & CSS with simple, beginner-friendly projects to build your skills and confidence.

Beginner JavaScript projects

Stop just taking tutorials and start coding! Learn JavaScript faster by building real projects. Explore fun, beginner-friendly JavaScript challenges to practice and boost your skills.