Improve your coding skills by building realistic projects

Our professionally designed challenges help you gain hands-on experience writing HTML, CSS, and JavaScript. We create the designs so you can focus on the code and see your skills skyrocket!

Escape tutorial Hell

Stop watching tutorials and start building! Our challenges give you the designs and requirements. You write the code. It's that simple.

  • PREMIUM
    Mood tracking app

    Mood tracking app

    • HTML
    • CSS
    • JavaScript
    3INTERMEDIATE

    Build a mood tracking app to help users log their daily feelings and track their emotional wellbeing over time.

  • PREMIUM
    Browser extension manager

    Browser extension manager

    • React
    • TypeScript
    • CSS
    4ADVANCED

    Create a browser extension manager interface with the ability to enable, disable, and configure extensions.

  • FREE
    Personal blog

    Personal blog

    • HTML
    • CSS
    • JavaScript
    2JUNIOR

    Build a personal blog with article listing, individual article pages, and a responsive design.

Why choose Learn-Frontend?

Our challenges are designed to help you improve your skills in a fun, realistic way.

😈

Build portfolio-worthy projects

Practice with professional designs that you can add to your portfolio. Show potential employers what you can build.

🤩

Gain real-world experience

Our challenges simulate real-world projects. You'll work with designs, requirements, and constraints just like in a real job.

🚀

Practice new tools

Try out new frameworks, libraries, and tools on projects that matter. Build your skills with the latest technologies.

🛠️

Improve your workflow

Learn to work with design files, manage your code with Git, and deploy your projects. Build professional development habits.

How it works

Our simple 4-step process helps you build real projects and improve your skills

1

Start challenge

Download the starter files and get set up

2

Download assets

Get all the design files and assets you need

3

Submit solution

Upload your solution and get feedback

4

Review solutions

Learn from others and improve your skills

FAQs

Frequently asked questions about Frontend Mentor

Frontend Mentor is a platform that provides real-world coding challenges to help you improve your frontend development skills. We provide designs and requirements, and you build the projects using whatever tools you prefer.
Simply choose a challenge, download the starter files, and start coding! You can submit your solution to get feedback from the community and see how others approached the same challenge.
Yes! We have many free challenges available. We also offer a Pro subscription that gives you access to premium challenges, Figma design files, and other exclusive features.
We have challenges for all skill levels, from complete beginners to experienced developers. Each challenge is labeled with a difficulty level to help you choose appropriate projects.
Absolutely! You can use any tools, frameworks, or libraries you want. The goal is to practice and improve your skills using the technologies you're interested in.
Our Discord community is the best place to get help. Thousands of developers are there to help answer questions and provide guidance when you're stuck on a challenge.