Skip to content
Use casesBeginner JavaScript projects

Learn to code with JavaScript projects for beginners

Stop following endless tutorials that leave you unable to code on your own. Frontend Mentor provides professionally designed JavaScript projects that teach through hands-on building, not passive watching. Each project comes with Figma designs, starter code, and a supportive community of over 1 million developers.

Start building free

Join 1,092,239 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 real projects

Even as a beginner, you can dive into JavaScript with Frontend Mentor. Instead of endless tutorials, you’ll build real projects with professional designs, helpful resources, and clear difficulty levels from Newbie to Guru. The community supports you along the way, so you can focus on coding, problem-solving, and gaining practical skills that stick.

How to start your first JavaScript project today

  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.

Master core JavaScript concepts

Start your journey with projects that teach DOM manipulation, event handling, and basic interactivity. Perfect for absolute beginners, these challenges help you understand how JavaScript brings websites to life through simple interactivity.

  • 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

    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

    Article preview component

    • HTML
    • CSS
    • JS
    1newbie

    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.

  • Free

    Ping single column coming soon page

    • HTML
    • CSS
    • JS
    1newbie

    This challenge is great for beginners and offers a chance to practice basic client-side form validation.

  • 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

    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!

Work with APIs and dynamic data

Build projects that fetch and display real-world data from APIs. Learn to handle asynchronous JavaScript, work with JSON, and create dynamic interfaces that update based on external data sources. These challenges introduce you to promises, fetch requests, and managing loading states.

  • 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

    Time tracking dashboard

    • HTML
    • CSS
    • JS
    2junior

    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.

  • Free

    Product list with cart

    • HTML
    • CSS
    • JS
    2junior

    Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

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

  • 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

    IP Address Tracker

    • HTML
    • CSS
    • JS
    • API
    3intermediate

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

  • Premium

    Clock app

    • HTML
    • CSS
    • JS
    • API
    3intermediate

    This challenge will have you working with external APIs to set data based on a visitor's location. You'll also be using logic to set content depending on the time of day.

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

  • Premium

    Recipe finder website

    • HTML
    • CSS
    • JS
    3intermediate

    Build a responsive recipe finder with search, filtering, and dynamic content. Practice working with JSON data, complex layouts, and interactive JavaScript features.

Build interactive applications with state

Create more complex projects that require managing application state across multiple components. Master form validation, local storage, and building features like filters, sorting, and search functionality. These challenges help you think about data flow and user interactions in larger applications.

  • 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

    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

    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

    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!

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

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

Implement advanced patterns and features

Tackle projects that combine multiple JavaScript concepts into cohesive applications. Work with timers, drag-and-drop, animations, and multi-step processes. These challenges prepare you for real-world development by teaching you to structure code efficiently and handle edge cases.

  • 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

    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.

  • 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

    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.

  • Premium

    Hangman game

    • HTML
    • CSS
    • JS
    4advanced

    This project is a great all-around test. You'll need good HTML to ensure accessible navigation. There are many tricky CSS details, and the game logic will test your JS.

Why Frontend Mentor for beginner 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 are good JavaScript projects for beginners?

    Good beginner JavaScript projects focus on DOM manipulation, event handling, and basic interactivity. Examples include interactive cards, simple calculators, FAQ accordions, and tip calculators. These projects teach fundamental concepts without overwhelming complexity, allowing you to build confidence while creating practical, portfolio-worthy work.

  • How long does it take to learn JavaScript as a beginner?

    Most beginners can grasp JavaScript fundamentals in 3-6 months with consistent practice. However, building real projects accelerates learning significantly. By working on hands-on challenges, you'll understand concepts faster than studying theory alone. Start with simple interactive projects and gradually increase complexity as your skills develop.

  • Do I need to know HTML and CSS before learning JavaScript?

    Yes, you should learn HTML and CSS basics before JavaScript. JavaScript manipulates HTML elements and CSS styles to create interactivity, so understanding these foundations is essential. If you're comfortable creating static web pages with HTML and CSS, you're ready to start adding JavaScript functionality.

  • What's the difference between Frontend Mentor and coding tutorials?

    Frontend Mentor provides real-world project briefs with professional designs, while tutorials walk you through step-by-step instructions. With Frontend Mentor, you build projects independently using provided designs, mimicking actual development work. This approach develops problem-solving skills and portfolio pieces, rather than just following along with a video.

  • Are Frontend Mentor projects good for my portfolio?

    Yes, Frontend Mentor projects are excellent for portfolios. Each challenge includes professional designs and real-world requirements that demonstrate your skills to employers. Unlike tutorial projects that many developers complete identically, your Frontend Mentor solutions showcase your unique problem-solving approach and coding style.

  • Can I use Frontend Mentor projects for free?

    Yes, Frontend Mentor offers many free projects, including beginner JavaScript challenges. Free projects include design images, project briefs, and community support. Pro membership unlocks additional features, including Figma design file access, premium challenges, and AI-powered code reviews for all solutions. However, you can still build a strong portfolio with free challenges alone.

Join 1,092,239 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.

JavaScript projects

Learn JavaScript by building real projects. From beginner-friendly mini projects and API work all the way up to fully-functional multi-page web apps.