Skip to content
Use casesJavaScript projects

Master JavaScript with real-world projects

Transform your JavaScript knowledge into job-ready skills through real-world projects. Build portfolio-worthy applications with professional designs, solve real coding problems, and get feedback from the Frontend Mentor community.

Start building free

Join 1,083,961 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 JavaScript by building, not just watching

Frontend Mentor provides realistic project briefs that allow you to practice JavaScript on real-world UI challenges. Build anything from small, interactive components up to multi-page web apps, compare your solution, and get community feedback, so you learn faster and ship portfolio-ready work.

How to start building JavaScript 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.

Beginner JavaScript projects

Start with interactive components to learn DOM manipulation and event handling. These projects cover JavaScript basics, including variables, functions, and logic, while providing you with visible, hands-on results. Ideal for developers moving from HTML/CSS or beginning their programming journey.

  • 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

    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

    Expenses chart component

    • HTML
    • CSS
    • JS
    2junior

    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.

  • Free

    Interactive pricing component

    • HTML
    • CSS
    • JS
    2junior

    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!

Intermediate JavaScript projects

Level up with API integration, asynchronous programming, and form validation. These projects demonstrate your ability to handle JSON data and build fully-functional applications.

  • 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.

  • 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.

  • Free

    Contact form

    • HTML
    • CSS
    • JS
    2junior

    Building accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.

  • Free

    Conference ticket generator

    • HTML
    • CSS
    • JS
    2junior

    In this challenge, you'll create a form that generates a ticket. There's a lot of scope for customizing the generated ticket and putting your own stamp on the project.

  • 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!

  • New 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.

  • 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

    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

    Frontend Quiz app

    • HTML
    • CSS
    • JS
    3intermediate

    This app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!

Advanced JavaScript projects

Challenge yourself by building fully functional games and applications that showcase an advanced understanding of DOM manipulation, state management, routing, and more.

  • Free

    Rock, Paper, Scissors game

    • HTML
    • CSS
    • JS
    4advanced

    This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

  • Premium

    Connect Four game

    • HTML
    • CSS
    • JS
    4advanced

    Your JS knowledge will be challenged in this fun project, where you'll build a two-player game. You'll write the logic for the game and how to test for win conditions.

  • Premium

    Pomodoro app

    • HTML
    • CSS
    • JS
    4advanced

    This Pomodoro app will provide some tricky challenges, including building a circular progress bar. You'll also build a range of customizations, like colors and fonts.

  • Premium

    Memory game

    • HTML
    • CSS
    • JS
    4advanced

    This project will be an excellent test for your HTML, CSS, and JS skills! You'll be building a fun memory game where players try to match pairs.

  • 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

    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.

  • Premium

    Personal finance app

    • HTML
    • CSS
    • JS
    5guru

    This app contains 5 pages (Overview, Transactions, Budgets, Pots, and Recurring Bills) and includes a lot of tricky elements. You can also build it as a full-stack app!

Why Frontend Mentor for JavaScript 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 JavaScript projects should beginners start with?

    Begin with simple interactive components that teach fundamental concepts such as variables, functions, and DOM manipulation. Progress gradually to event handling, conditionals, and loops. Avoid complex projects that introduce multiple concepts simultaneously. Each project should introduce 1-2 new concepts while reinforcing previous learning, building confidence without overwhelm.

  • How many JavaScript projects do I need for my portfolio?

    Quality beats quantity: 3-5 exceptional projects outperform 20 mediocre ones. Hiring managers spend 30-60 seconds reviewing portfolios. They'll notice three polished projects with clean code, proper error handling, and a thoughtful user experience. They won't explore twenty similar to-do lists. Focus on diversity: different problem domains, varying complexity levels, and distinct technical challenges.

  • Should I use vanilla JavaScript or frameworks for projects?

    Get comfortable with vanilla JavaScript first. It's what you'll debug regardless of framework choice. Build at least 5-7 projects with pure JavaScript before touching React, Vue, or Angular. This foundation ensures you understand what problems frameworks solve. Vanilla JavaScript projects demonstrate fundamental understanding that transcends framework trends. After establishing this foundation, add 2-3 framework projects to show modern development skills. Employers value developers who can work with or without frameworks, adapting to their tech stack rather than being framework-dependent.

  • What makes a JavaScript project portfolio-worthy?

    Portfolio-worthy projects demonstrate real-world problem-solving skills, not merely tutorial completion. They feature clean, well-documented code that another developer could understand and modify. Error handling proves you consider edge cases – what happens when the API fails or users input unexpected data? Performance optimization shows professional-level thinking. Deploy projects with proper hosting, not just GitHub repos. Include a thoughtful README explaining your decisions, challenges faced, and solutions implemented. Most importantly, projects should look professional. Employers judge design quality because it demonstrates attention to detail. This is where Frontend Mentor projects come in!

Join 1,083,961 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

HTML & CSS projects

Practice HTML & CSS with professionally designed projects. Build responsive websites, solve real-world challenges, and get community feedback on your code.