Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Challenges

Junior

Intermediate

Advanced

free

  • NewFree

    Bento grid

    • HTML
    • CSS
    2junior

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

  • 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

    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

    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

    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

    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

    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

    News homepage

    • HTML
    • CSS
    • JS
    2junior

    This news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!

  • Free

    Notifications page

    • HTML
    • CSS
    • JS
    2junior

    This project will be a brilliant test of your HTML, CSS, and basic JavaScript skills. You'll use JS to toggle the visual state of the notifications.

  • Free

    Interactive card details form

    • HTML
    • CSS
    • JS
    2junior

    This fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the 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.

Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord