Frontend Mentor
@frontendmentor.io
🧑💻 Build projects: https://www.frontendmentor.io
📈 Train your team: https://teams.frontendmentor.io
🤝 Hire top talent: https://hiring.frontendmentor.io
📈 Train your team: https://teams.frontendmentor.io
🤝 Hire top talent: https://hiring.frontendmentor.io
Advanced projects:
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
November 6, 2025 at 3:36 PM
Advanced projects:
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
- Invoice app with PDF generation
- Link-sharing app with custom subdomains
- Personal finance app with transaction tracking
Intermediate projects:
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
November 6, 2025 at 3:36 PM
Intermediate projects:
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
- Personal blog with CMS functionality
- Kanban board with drag-and-drop
- Entertainment app with API integration
- Product feedback app with voting and comments
- Modd-tracking app with time-series data handling
Foundation projects:
- Todo app with authentication and real-time sync
- Bookmark manager with search and tagging
- Note-taking app with auto-save
- Markdown editor with document management
- Todo app with authentication and real-time sync
- Bookmark manager with search and tagging
- Note-taking app with auto-save
- Markdown editor with document management
November 6, 2025 at 3:36 PM
Foundation projects:
- Todo app with authentication and real-time sync
- Bookmark manager with search and tagging
- Note-taking app with auto-save
- Markdown editor with document management
- Todo app with authentication and real-time sync
- Bookmark manager with search and tagging
- Note-taking app with auto-save
- Markdown editor with document management
Many people don't know this, but Frontend Mentor challenges work great as full-stack project foundations.
Here are 12 project ideas with the designs already prepared. You add the backend.
www.frontendmentor.io/articles/fu...
Here are 12 project ideas with the designs already prepared. You add the backend.
www.frontendmentor.io/articles/fu...
November 6, 2025 at 3:36 PM
Many people don't know this, but Frontend Mentor challenges work great as full-stack project foundations.
Here are 12 project ideas with the designs already prepared. You add the backend.
www.frontendmentor.io/articles/fu...
Here are 12 project ideas with the designs already prepared. You add the backend.
www.frontendmentor.io/articles/fu...
Many people come to us who've completed tutorials but struggle to build anything on their own.
They know syntax but freeze when facing a blank editor.
We wrote about why this happens and what actually helps...
www.frontendmentor.io/articles/pr...
They know syntax but freeze when facing a blank editor.
We wrote about why this happens and what actually helps...
www.frontendmentor.io/articles/pr...
November 5, 2025 at 2:48 PM
Many people come to us who've completed tutorials but struggle to build anything on their own.
They know syntax but freeze when facing a blank editor.
We wrote about why this happens and what actually helps...
www.frontendmentor.io/articles/pr...
They know syntax but freeze when facing a blank editor.
We wrote about why this happens and what actually helps...
www.frontendmentor.io/articles/pr...
Looking to level up your portfolio? Here are four premium challenges that really push your skills forward.
They're the kind of projects that show you can handle real-world complexity.
They're the kind of projects that show you can handle real-world complexity.
October 15, 2025 at 3:20 PM
Looking to level up your portfolio? Here are four premium challenges that really push your skills forward.
They're the kind of projects that show you can handle real-world complexity.
They're the kind of projects that show you can handle real-world complexity.
We have our hackathon winner and runners-up! 🏆
With 53.8% of the vote, we're delighted to say that Fejiro is our first-ever hackathon winner!
Please join us in giving a massive congrats to Fejiro. She created an incredible project, and it’s clear that a great deal of effort went into it 👏
With 53.8% of the vote, we're delighted to say that Fejiro is our first-ever hackathon winner!
Please join us in giving a massive congrats to Fejiro. She created an incredible project, and it’s clear that a great deal of effort went into it 👏
October 9, 2025 at 4:24 PM
We have our hackathon winner and runners-up! 🏆
With 53.8% of the vote, we're delighted to say that Fejiro is our first-ever hackathon winner!
Please join us in giving a massive congrats to Fejiro. She created an incredible project, and it’s clear that a great deal of effort went into it 👏
With 53.8% of the vote, we're delighted to say that Fejiro is our first-ever hackathon winner!
Please join us in giving a massive congrats to Fejiro. She created an incredible project, and it’s clear that a great deal of effort went into it 👏
We've got a new PREMIUM challenge launching tomorrow! 🥳
For this project, you'll build a fully-functional bookmark manager app. You can make it as a frontend-only project or as a full-stack app (we include auth screens in the design file). Either way, it will make for a perfect portfolio piece!
For this project, you'll build a fully-functional bookmark manager app. You can make it as a frontend-only project or as a full-stack app (we include auth screens in the design file). Either way, it will make for a perfect portfolio piece!
October 9, 2025 at 2:00 PM
We've got a new PREMIUM challenge launching tomorrow! 🥳
For this project, you'll build a fully-functional bookmark manager app. You can make it as a frontend-only project or as a full-stack app (we include auth screens in the design file). Either way, it will make for a perfect portfolio piece!
For this project, you'll build a fully-functional bookmark manager app. You can make it as a frontend-only project or as a full-stack app (we include auth screens in the design file). Either way, it will make for a perfect portfolio piece!
Here's a glimpse at the new profile page we're working on ✨
As part of the change, we're introducing a progression system to help you advance through the levels and push beyond your comfort zone by completing more challenging projects.
What do you think?
As part of the change, we're introducing a progression system to help you advance through the levels and push beyond your comfort zone by completing more challenging projects.
What do you think?
October 2, 2025 at 3:29 PM
Here's a glimpse at the new profile page we're working on ✨
As part of the change, we're introducing a progression system to help you advance through the levels and push beyond your comfort zone by completing more challenging projects.
What do you think?
As part of the change, we're introducing a progression system to help you advance through the levels and push beyond your comfort zone by completing more challenging projects.
What do you think?
There's a week remaining until we close submissions for our first 30-day day hackathon challenge. How's everyone getting on with the project? We hope you're having a fun time building it! 🥳
September 29, 2025 at 2:16 PM
There's a week remaining until we close submissions for our first 30-day day hackathon challenge. How's everyone getting on with the project? We hope you're having a fun time building it! 🥳
The example below is one way to improve this field. The aria-invalid attribute explicitly marks the field as having an invalid input.
The aria-describedby attribute links the input and the error via the error's ID, ensuring the message is announced when the input receives focus.
The aria-describedby attribute links the input and the error via the error's ID, ensuring the message is announced when the input receives focus.
September 12, 2025 at 3:26 PM
The example below is one way to improve this field. The aria-invalid attribute explicitly marks the field as having an invalid input.
The aria-describedby attribute links the input and the error via the error's ID, ensuring the message is announced when the input receives focus.
The aria-describedby attribute links the input and the error via the error's ID, ensuring the message is announced when the input receives focus.
A common accessibility mistake we see in form-based challenges is failing to associate form fields with their error messages.
Here's a note on how to avoid this mistake. The code snippet below shows the inaccessible approach:
Here's a note on how to avoid this mistake. The code snippet below shows the inaccessible approach:
September 12, 2025 at 3:26 PM
A common accessibility mistake we see in form-based challenges is failing to associate form fields with their error messages.
Here's a note on how to avoid this mistake. The code snippet below shows the inaccessible approach:
Here's a note on how to avoid this mistake. The code snippet below shows the inaccessible approach:
Learning to interact with APIs and read documentation are two key skills for front-end developers.
We have a bunch of API-focused challenges, but here are four specific ones, in order of difficulty, to help you practice working with third-party APIs.
🧵
We have a bunch of API-focused challenges, but here are four specific ones, in order of difficulty, to help you practice working with third-party APIs.
🧵
September 11, 2025 at 8:05 AM
Learning to interact with APIs and read documentation are two key skills for front-end developers.
We have a bunch of API-focused challenges, but here are four specific ones, in order of difficulty, to help you practice working with third-party APIs.
🧵
We have a bunch of API-focused challenges, but here are four specific ones, in order of difficulty, to help you practice working with third-party APIs.
🧵
🚨 Hackathon update: We're making the Figma design file FREE for everyone during our 30-Day Hackathon!
Based on your feedback, we've upgraded the weather app challenge to free+ access until the hackathon finishes! 🎉
More details 🧵
Based on your feedback, we've upgraded the weather app challenge to free+ access until the hackathon finishes! 🎉
More details 🧵
September 8, 2025 at 2:13 PM
🚨 Hackathon update: We're making the Figma design file FREE for everyone during our 30-Day Hackathon!
Based on your feedback, we've upgraded the weather app challenge to free+ access until the hackathon finishes! 🎉
More details 🧵
Based on your feedback, we've upgraded the weather app challenge to free+ access until the hackathon finishes! 🎉
More details 🧵
🚀 BIG NEWS: We've launched our first-ever hackathon!
The #FM30Hackathon starts NOW with our brand new Weather App challenge. You have 30 days to build something you're proud to share and potentially win a year of Frontend Mentor Pro!
Details below 🧵
The #FM30Hackathon starts NOW with our brand new Weather App challenge. You have 30 days to build something you're proud to share and potentially win a year of Frontend Mentor Pro!
Details below 🧵
September 5, 2025 at 4:30 PM
🚀 BIG NEWS: We've launched our first-ever hackathon!
The #FM30Hackathon starts NOW with our brand new Weather App challenge. You have 30 days to build something you're proud to share and potentially win a year of Frontend Mentor Pro!
Details below 🧵
The #FM30Hackathon starts NOW with our brand new Weather App challenge. You have 30 days to build something you're proud to share and potentially win a year of Frontend Mentor Pro!
Details below 🧵
We're launching a new FREE challenge tomorrow, which includes our first-ever 30-day hackathon competition! 🥳
This weather app involves integrating with the Open-Meteo API, so it should be a fun one!
More details about how the hackathon will work below 👇
This weather app involves integrating with the Open-Meteo API, so it should be a fun one!
More details about how the hackathon will work below 👇
September 4, 2025 at 4:06 PM
We're launching a new FREE challenge tomorrow, which includes our first-ever 30-day hackathon competition! 🥳
This weather app involves integrating with the Open-Meteo API, so it should be a fun one!
More details about how the hackathon will work below 👇
This weather app involves integrating with the Open-Meteo API, so it should be a fun one!
More details about how the hackathon will work below 👇
Strengths
No code review is complete without identifying areas where you've done well. Identifying strengths is important so that you know what you're doing well and can continue with those good practices.
No code review is complete without identifying areas where you've done well. Identifying strengths is important so that you know what you're doing well and can continue with those good practices.
August 27, 2025 at 5:00 PM
Strengths
No code review is complete without identifying areas where you've done well. Identifying strengths is important so that you know what you're doing well and can continue with those good practices.
No code review is complete without identifying areas where you've done well. Identifying strengths is important so that you know what you're doing well and can continue with those good practices.
Issues
We already provide static analysis on HTML, CSS, JavaScript, and accessibility for all submissions. However, our AI-detected issues typically identify improvements that go beyond static analysis. Much like an experienced developer would when giving you a code review!
We already provide static analysis on HTML, CSS, JavaScript, and accessibility for all submissions. However, our AI-detected issues typically identify improvements that go beyond static analysis. Much like an experienced developer would when giving you a code review!
August 27, 2025 at 5:00 PM
Issues
We already provide static analysis on HTML, CSS, JavaScript, and accessibility for all submissions. However, our AI-detected issues typically identify improvements that go beyond static analysis. Much like an experienced developer would when giving you a code review!
We already provide static analysis on HTML, CSS, JavaScript, and accessibility for all submissions. However, our AI-detected issues typically identify improvements that go beyond static analysis. Much like an experienced developer would when giving you a code review!
AI-Analysis Summary
This is a brief summary of strengths and weaknesses, including a prioritised list of recommended improvements. We try to keep this as focused and manageable as possible to avoid overwhelming anyone!
This is a brief summary of strengths and weaknesses, including a prioritised list of recommended improvements. We try to keep this as focused and manageable as possible to avoid overwhelming anyone!
August 27, 2025 at 5:00 PM
AI-Analysis Summary
This is a brief summary of strengths and weaknesses, including a prioritised list of recommended improvements. We try to keep this as focused and manageable as possible to avoid overwhelming anyone!
This is a brief summary of strengths and weaknesses, including a prioritised list of recommended improvements. We try to keep this as focused and manageable as possible to avoid overwhelming anyone!
Did you know Pro subscribers now get guaranteed AI-powered insights with every solution submission?
We launched AI-enhanced reports at the beginning of the month so that every solution submission provides valuable learning opportunities.
Each AI-enhanced report includes 🧵
We launched AI-enhanced reports at the beginning of the month so that every solution submission provides valuable learning opportunities.
Each AI-enhanced report includes 🧵
August 27, 2025 at 5:00 PM
Did you know Pro subscribers now get guaranteed AI-powered insights with every solution submission?
We launched AI-enhanced reports at the beginning of the month so that every solution submission provides valuable learning opportunities.
Each AI-enhanced report includes 🧵
We launched AI-enhanced reports at the beginning of the month so that every solution submission provides valuable learning opportunities.
Each AI-enhanced report includes 🧵
The design concept for our next FREE challenge is evolving!
This project will involve integrating with the Open-Meteo API to retrieve the current weather, as well as daily and hourly forecasts for specific locations.
What do you think of the current design draft?
This project will involve integrating with the Open-Meteo API to retrieve the current weather, as well as daily and hourly forecasts for specific locations.
What do you think of the current design draft?
August 26, 2025 at 5:46 PM
The design concept for our next FREE challenge is evolving!
This project will involve integrating with the Open-Meteo API to retrieve the current weather, as well as daily and hourly forecasts for specific locations.
What do you think of the current design draft?
This project will involve integrating with the Open-Meteo API to retrieve the current weather, as well as daily and hourly forecasts for specific locations.
What do you think of the current design draft?
It's still very early in the design concept phase, but we're cooking up a new FREE challenge! ☀️
It's almost a rite of passage for developers to build a weather app, so we're putting our own spin on it. This project will include API integration practice!
It's almost a rite of passage for developers to build a weather app, so we're putting our own spin on it. This project will include API integration practice!
August 22, 2025 at 10:06 AM
It's still very early in the design concept phase, but we're cooking up a new FREE challenge! ☀️
It's almost a rite of passage for developers to build a weather app, so we're putting our own spin on it. This project will include API integration practice!
It's almost a rite of passage for developers to build a weather app, so we're putting our own spin on it. This project will include API integration practice!
Ever built a project from a Figma file?
It's often how developers work with designers on real projects, and we've got three free challenges with Figma files included to help you practice.
No Pro subscription needed 🧵
It's often how developers work with designers on real projects, and we've got three free challenges with Figma files included to help you practice.
No Pro subscription needed 🧵
August 21, 2025 at 1:06 PM
Ever built a project from a Figma file?
It's often how developers work with designers on real projects, and we've got three free challenges with Figma files included to help you practice.
No Pro subscription needed 🧵
It's often how developers work with designers on real projects, and we've got three free challenges with Figma files included to help you practice.
No Pro subscription needed 🧵
We've just launched a new PREMIUM challenge! 🥳
In this project, you’ll build a multi-page, responsive recipe finder with search, filtering, and dynamic content. It’s a perfect opportunity to practice working with JSON data, build complex layouts, and use JavaScript to add interactive features.
🧵
In this project, you’ll build a multi-page, responsive recipe finder with search, filtering, and dynamic content. It’s a perfect opportunity to practice working with JSON data, build complex layouts, and use JavaScript to add interactive features.
🧵
August 6, 2025 at 2:46 PM
We've just launched a new PREMIUM challenge! 🥳
In this project, you’ll build a multi-page, responsive recipe finder with search, filtering, and dynamic content. It’s a perfect opportunity to practice working with JSON data, build complex layouts, and use JavaScript to add interactive features.
🧵
In this project, you’ll build a multi-page, responsive recipe finder with search, filtering, and dynamic content. It’s a perfect opportunity to practice working with JSON data, build complex layouts, and use JavaScript to add interactive features.
🧵
We’ve got a new PREMIUM challenge launching tomorrow, so here’s a sneak preview! 👀
You'll build a multi-page website that features healthy recipes. The recipes are all in a local JSON file, so you can practice fetching the data and working with it like you would in real projects with dynamic data!
You'll build a multi-page website that features healthy recipes. The recipes are all in a local JSON file, so you can practice fetching the data and working with it like you would in real projects with dynamic data!
August 5, 2025 at 5:05 PM
We’ve got a new PREMIUM challenge launching tomorrow, so here’s a sneak preview! 👀
You'll build a multi-page website that features healthy recipes. The recipes are all in a local JSON file, so you can practice fetching the data and working with it like you would in real projects with dynamic data!
You'll build a multi-page website that features healthy recipes. The recipes are all in a local JSON file, so you can practice fetching the data and working with it like you would in real projects with dynamic data!