Sign in

Frontend Mentor

@frontendmentor.io
166 followers 117 following 575 posts

🧑‍💻 Build projects: www.frontendmentor.io 📈 Train your team: teams.frontendmentor.io 🤝 Hire top talent: hiring.frontendmentor.io

PostsRepliesMedia
Frontend Mentor @frontendmentor.io · 30/09/2026
Three free challenges for learning to fetch data from an API, in order. On each one, think about the empty states and edge cases (e.g., a failed API request). What should they look like? Thinking about these things when you build will help you build better projects.
A dark background features a quote emphasizing the challenge of taking action versus merely observing. It highlights advice #117.A map displays an IP address tracker with details: IP address, location in Brooklyn, timezone, and ISP SpaceX Starlink.Weather app interface displaying current conditions for Berlin, Germany, with hourly and daily forecasts, including humidity and wind data.
100
Frontend Mentor @frontendmentor.io · 24/09/2026
If you're new to CSS Grid, try our Grid landing page challenge. A 2x2 stats grid, a split headline layout, and a toggleable menu, all across breakpoints. It's free and one of our newest challenges.
Bright blue layout displaying statistics about educational outreach, including students reached, teachers trained, and partnered schools.
100
Frontend Mentor @frontendmentor.io · 23/09/2026
Four free challenges that take your form skills from basic validation to a full multi-step flow, in order:
A subscription form encourages product managers to join a newsletter for updates, featuring a graphic with data metrics and a high score.Design featuring a sign-up form for a coding platform, promoting learning by watching experienced developers solve problems.A contact form features fields for first name, last name, email, query type, and a message with a submit button.A user interface displaying a multi-step form with sections for personal info, including name, email, and phone number, and navigation steps.
100
Frontend Mentor @frontendmentor.io · 04/09/2026
It's launch day! Our new premium product challenge is live 🚀 Build Tiebreak: a group polling app for settling group-chat decisions. Share a link, friends vote from their phones with no account, and it ends with a winner reveal.
Polling app shows pizza choices for a group decision, with Detroit-style leading at 45% of votes. Voting is currently open.
110
Frontend Mentor @frontendmentor.io · 03/09/2026
We have a new premium challenge launching tomorrow, so here's a quick sneak preview! 👀 It's a product challenge, so there's no Figma: the design decisions are yours. You'll build and deploy a group polling app you can use with your friends to settle important decisions, like pizza night 🍕
A polling app interface for deciding on pizza night options, showing current votes and leading suggestions.
000
Frontend Mentor @frontendmentor.io · 19/08/2026
It's private by default. Turn on sharing when you're ready, and your profile link unfurls with your skills card. Generate a review on your next solution and watch your profile start to fill in.
A locked icon indicates private settings, while an adjacent skills card displays a score of 8.2/10 and a link for sharing.
100
Frontend Mentor @frontendmentor.io · 19/08/2026
Some scores unlock as you take on harder challenges, so you're only ever scored on dimensions relevant to your level.
Scores for Best Practices and Accessibility are displayed, with an indication that an intermediate challenge is needed for Architecture.
100
Frontend Mentor @frontendmentor.io · 19/08/2026
The scores come from your real, reviewed code and repo. Best practices, accessibility, architecture, testing, file organization, commit quality, README quality: each one builds as you generate more reviews. More scoring dimensions are on the way.
Bar chart displaying scores for code quality criteria: Best Practices, Accessibility, Architecture, Testing, and File Organization.
100
Frontend Mentor @frontendmentor.io · 19/08/2026
New on Frontend Mentor: skills profiles ✨ Every AI code review you generate now feeds into one profile: your scores across each review dimension and the technologies you've worked with. Free for every member.
Three code review cards show scores, leading to a skills profile displaying an overall score and proficiency in HTML, CSS, JavaScript, and React.
100
Frontend Mentor @frontendmentor.io · 07/08/2026
We've just launched a new FREE challenge! 🚀 For this project, you'll build a landing page hero for a fictional education charity. It's a great one for practicing responsive CSS grid and building up your CSS fundamentals. More details 👇
Bright blue layout showcasing educational charity stats: 2.4M students, 1,284 schools, 38K teachers trained, 3.1x graduation lift.A vibrant blue layout features statistics for a fictional education charity, highlighting students reached and teachers trained.
120
Frontend Mentor @frontendmentor.io · 06/08/2026
We're launching a new, free challenge tomorrow! 🥳 This newbie-level project focuses on responsive grid skills. Anyone who wants to take it a little further can add menu functionality. Perfect to build up your CSS fundamentals!
Bright blue design highlights educational statistics, emphasizing students reached, schools partnered, and teachers trained by Bridge Collective.Bright blue interface highlights key statistics of Bridge Collective, including students reached, teachers trained, and graduation lift.
010
Frontend Mentor @frontendmentor.io · 23/07/2026
We've just launched a new PREMIUM challenge! 🚀 Build a personal restaurant map and ranking app. No Figma (it's a product challenge), so the design is yours. Pin where you've eaten and rank it head-to-head instead of with star ratings. More details 👇
A map of London highlights personal restaurant rankings, showcasing top picks and locations for diners to explore.
100
Frontend Mentor @frontendmentor.io · 15/07/2026
Our #FM30Hackathon finalists are here! 🎉 The submission quality for our currency converter hackathon project was seriously high, but we've chosen the shortlist. Now it's your turn to pick the winners 👇
100
Frontend Mentor @frontendmentor.io · 10/07/2026
We've just launched a new PREMIUM challenge! 🥳 For this project, you'll build a group expense splitter with flexible splits, multi-currency support via a live exchange-rate API, and clear settlement tracking.
Expense splitter interface showing group expenses for a "Trip to Japan," with detailed activities, amounts, and member balances displayed.
100
Frontend Mentor @frontendmentor.io · 09/07/2026
We've got a new PREMIUM product challenge launching tomorrow, so here's a quick sneak preview! 👀 You'll build and deploy a real expense-splitting app with flexible cost-splitting options, multi-currency support via a live exchange-rate API, and clear settlement tracking.
Expense-splitting app interface for a trip to Japan, showing total expenses, member balances, and settlement activities among users.
100
Frontend Mentor @frontendmentor.io · 01/07/2026
The fix is small. Use :focus-visible instead. It shows a clear focus ring for keyboard users but keeps it off mouse clicks, which is usually why people removed focus styles in the first place.
A code snippet displays CSS styles for the `:focus-visible` selector, highlighting accessibility for keyboard users.
100
Frontend Mentor @frontendmentor.io · 01/07/2026
We see a lot of beginners strip focus states out of their solutions completely, usually with an outline: none reset. It's one of the quickest ways to break accessibility for keyboard users.
Code snippet shows a CSS rule to remove focus outlines from elements, marked as a bad practice for accessibility.
100
Frontend Mentor @frontendmentor.io · 25/06/2026
We've just launched a new FREE challenge! 🥳 For this project, you'll build a booking confirmation page for a boutique hotel. It's a lovely one for practicing layout, and it's got some small details that offer opportunities to take the project further. More details 👇
Booking confirmation page for Maison Soleil, featuring details of stay, check-in, breakfast, and a welcome note from the host.A booking confirmation page features personalized messages, check-in details, Wi-Fi password, and weather information for a boutique hotel.
100
Frontend Mentor @frontendmentor.io · 24/06/2026
We have a new free challenge launching tomorrow, so here's a quick sneak preview! We're going back to our smaller, focused practice projects with this one. It's a junior-level hotel booking confirmation page with some fun details to take the project further if you choose ☀️
A hotel booking confirmation page featuring a welcome card, details about stay dates, payment summary, and additional services.A hotel booking confirmation page features personalized welcome details, check-in instructions, Wi-Fi info, breakfast menu, and weather forecast.
000
Frontend Mentor @frontendmentor.io · 19/06/2026
We have a new, free challenge launching next week! We haven't launched a smaller challenge in a while and plan to get back to a mix of smaller exercises and the larger portfolio pieces. This will be a fun build where you'll create a hotel booking confirmation page ☀️
A hotel booking confirmation includes check-in details, a welcome note from host Margaux, and information on breakfast and Wi-Fi.
000
Frontend Mentor @frontendmentor.io · 18/06/2026
Our AI code review can now provide feedback on the quality of your commits. How you use Git is a skill employers care about, and one that most practice tools never look at. Now it's part of your report, alongside the rest of your code.
A code review document evaluates commit quality, highlighting strengths, suggestions for improvement, and areas needing attention in messages.
100
Frontend Mentor @frontendmentor.io · 12/06/2026
The FM30 Hackathon is back! 🥳 This time, you'll build a currency app that runs on live foreign exchange rates. It's a great project for practicing real-world API data. Prizes, free Figma access, and a chance to push your skills. Here's what you need to know 🧵
110
Frontend Mentor @frontendmentor.io · 11/06/2026
A new hackathon challenge launches tomorrow! It's a currency app built around live exchange rates. You'll build the converter, pull live rates from an API, and add a rate history chart, currency comparison, favorite pairs, and a conversion log. We hope you like the look of it!
A dark-themed currency conversion interface shows live rates, an input for sending amounts, and a historical rate chart.A user interface displays currency conversion details, live exchange rates, and a rate history chart for various currencies.A user interface displays currency conversion rates, live market data, a historical rate chart, and multi-currency comparisons.
000
Frontend Mentor @frontendmentor.io · 08/05/2026
We've just launched a new PREMIUM challenge! 🚀 Build a multi-page site for a tech conference. Browse the speakers, filter the schedule by day and track, and save talks. Optional bonus: pull the content from a CMS. More details 👇
A sleek event website features a tech conference schedule, speaker profiles, and session details highlighting topics like accessibility and performance.
100
Frontend Mentor @frontendmentor.io · 07/05/2026
We're launching a new premium challenge tomorrow, so here's a quick preview! Build a multi-page site for a fictional tech conference. Browse the speakers, filter the schedule by day and track, and save talks. Optional bonus: pull the content from a CMS ✨
A website layout for a tech conference featuring speaker photos, session schedules, and tracks like frontend and accessibility.A sleek multi-page design showcases a fictional tech conference, featuring speaker profiles and an organized schedule for sessions.A mobile site preview for the DevHorizon 26 tech conference, featuring speakers, tracks, and event details for attendees.
000
Frontend Mentor @frontendmentor.io · 30/04/2026
Findings cite the exact file and line, and are tagged by the language/technology used (e.g., HTML, React, Vue, Tailwind) and the underlying skill (Component Design, Semantic HTML, ARIA Usage, and others). The goal is feedback you can read and act on immediately.
100
Frontend Mentor @frontendmentor.io · 30/04/2026
It's the biggest upgrade we've made to code review since we first introduced it, and it changes the experience on every solution submitted to Frontend Mentor. Here's what changed and why.
A project review displays a score of 7.1/10, highlighting code quality and design, with specific feedback on accessibility improvements needed.
100
Frontend Mentor @frontendmentor.io · 21/04/2026
Early concept for our next hackathon: a currency dashboard with live rates, history charts, and comparison views. Still a draft. Would you build this? Could be a fun one!
A dark-themed interface displays currency exchange rates and a graph showing USD to EUR rate history, highlighting current rates and changes.
010
Frontend Mentor @frontendmentor.io · 10/04/2026
We've just launched a new PREMIUM challenge! 🚀 Build a savings tracker app (perfect for your portfolio!) Practice working with dynamic data, building charts, and creating interactive UI with modals, filtering, and sorting. More details 👇
120
Frontend Mentor @frontendmentor.io · 09/04/2026
We're launching a new challenge tomorrow, so here's a sneak preview 🤗 It's a savings tracker to manage savings goals, track deposits, and monitor progress. The starter includes sample data to populate the UI, and the Figma includes auth screens for anyone wanting to go full-stack!
A savings tracker interface displays total savings, monthly deposits, and progress on various savings goals with completion percentages.Savings tracker displaying total savings of $11,249, progress on goals, and monthly deposits for a MacBook Pro M4 purchase.A savings tracker app displays total savings, active goals, progress bars for specific items, and options to add deposits.
030
Frontend Mentor @frontendmentor.io · 25/03/2026
We just launched a new challenge format: Product Challenges! 🚀 You get a product spec instead of a Figma file, and you make the design decisions yourself. You collaborate with AI, build the full product, and ship something you, or anyone, can use. More details 🧵
110
Frontend Mentor @frontendmentor.io · 24/03/2026
We've been working on a new challenge format! ✨ You work from a detailed product spec instead of a design file and build a complete product that you, or anyone, could actually use. Here are some design concepts to give you an idea. Launching this week!
A digital dashboard displays a list of curated articles with titles, authors, and summary snippets, emphasizing design and development topics.Digital bookshelf displaying five books in progress, showing titles, authors, genres, and reading progress percentages.Progress summary shows practice hours for Spanish, Guitar, TypeScript, and Cooking, with visual tracking of daily activity streaks.
010
Frontend Mentor @frontendmentor.io · 12/03/2026
Solution reports already give you detailed feedback. But it's been hard to get a quick read on where you stand without going through the whole thing. Now you can glance at your scores and immediately know which areas need work.
Score summary shows 7.6/10 overall, with individual scores in Accessibility 7.7, HTML 6.4, CSS 8.7, and JavaScript 7.7.
100
Frontend Mentor @frontendmentor.io · 12/03/2026
We just added scoring to our AI-enhanced solution reports. Every report (HTML, CSS, JS, A11y) now provides a score out of 100. Here's what that means for you. The aim is to help you easily identify strengths and weaknesses so you can refactor and improve. Here are the details:
100
Frontend Mentor @frontendmentor.io · 04/03/2026
40,000 trees funded! 🌳 Every Frontend Mentor Pro subscription contributes to tree-planting and carbon-reduction projects through Ecologi. A massive thanks to our community of Pro members who have helped make this happen!
Frontend Mentor's climate impact: 40,222 trees funded and 58.41 tCO₂e avoided, highlighting environmental contributions.
100
Frontend Mentor @frontendmentor.io · 26/02/2026
We're currently working on adding scores to our AI-enhanced reports to help easily identify areas that are strong and those that need improvement in your solutions.
Scores for an AI-enhanced report show performance metrics: Accessibility 8.3, HTML 7.0, CSS 7.5, JavaScript 5.9, overall 7.2/10.
120
Frontend Mentor @frontendmentor.io · 24/02/2026
We just made AI-powered code reviews available to every free member on Frontend Mentor. From today, every free member gets 2 AI report credits per month to get more detailed insights into their projects. Here's what that means 👇
100
Frontend Mentor @frontendmentor.io · 20/02/2026
Your profile page has also been redesigned. There's a new private Progress tab with level tracking, activity charts, and a clear breakdown of what you need to reach the next level.
100
Frontend Mentor @frontendmentor.io · 20/02/2026
There's a new 5-level progression system to help you track where you are in your learning journey. Your level is based on both your points AND the hardest challenge you've completed. The goal is to help you understand when they might be ready to progress to the next level.
Progress tracker shows Level 3 with 378 out of 600 points. User is 222 points away from reaching Level 4.
100
Frontend Mentor @frontendmentor.io · 20/02/2026
Challenge points now scale exponentially to match real effort. Newbie: 10 Junior: 25 Intermediate: 50 Advanced: 100 Guru: 200 Helpful code review points also scale with difficulty now. No more flat 20 points regardless of complexity.
New challenge points by difficulty level: Level 1 Newbie gives 10 points, Level 2 Junior gives 25 points, Level 3 Intermediate gives 50 points, Level 4 Advanced gives 100 points, and Level 5 Guru gives 200 points.New code review points by difficulty level: Helpful feedback on Newbie solutions gives 3 points, Junior gives 5 points, Intermediate gives 10 points, Advanced gives 20 points, and Guru gives 40 points.
100
Frontend Mentor @frontendmentor.io · 20/02/2026
We just shipped a big update to Frontend Mentor: new progression levels, fairer scoring, and a revamped profile page. Here's what changed 🧵
100
Frontend Mentor @frontendmentor.io · 13/02/2026
We quietly added an 'AI Collaboration' section to our challenge starter README template last week. It's great to see people already using it to outline how they worked with AI across our projects, which will make for excellent interview conversations!
Text outlines a project utilizing GitHub Copilot for debugging CSS, HTML accessibility, JavaScript verification, and improving styles.
000
Frontend Mentor @frontendmentor.io · 05/02/2026
We just added AGENTS .md files to every Frontend Mentor challenge! These files tell AI coding tools how to help you learn, not just give you answers. And they're tailored to each difficulty level. Here's what we did and why 🧵
100
Frontend Mentor @frontendmentor.io · 19/12/2025
The challenge: build a typing speed test that tracks WPM and accuracy. Real-time stats, visual feedback, difficulty levels, personal bests – it's a satisfying project with lots of DOM manipulation and timer logic.
100
Frontend Mentor @frontendmentor.io · 19/12/2025
Our second FM30 Hackathon has just started! 🎉 This time: build a Typing Speed Test app in 30 days. Prizes, free Figma access, and a chance to push your skills. Here's what you need to know 🧵
100
Frontend Mentor @frontendmentor.io · 18/12/2025
We're launching a new FREE challenge tomorrow! 🥳 This will be our second 30-day hackathon challenge. Following the fun and success of the last FM30 Hackathon, we're excited to get started and see what you build! This time around, you'll create a typing speed test app! ⚡️
000
Frontend Mentor @frontendmentor.io · 17/12/2025
New 30-day hackathon project loading! ⏳ Just in time for the holidays...
Typing speed test screen with highlighted passage about Bronze Age trade and archaeological findings.
000
Frontend Mentor @frontendmentor.io · 10/12/2025
If you're job hunting right now and feel like something's broken, it's not you. We just published a comprehensive guide on getting a programming job in 2026. Hopefully, the advice will help anyone looking to land a role as we move into the New Year! Here are some highlights 🧵
100
Frontend Mentor @frontendmentor.io · 27/11/2025
We've just launched a new PREMIUM challenge! 🚀 Build an interactive flashcard app (perfect for your portfolio!) Practice state management, card flip animations, and creating smooth, engaging UI interactions. More details 👇
110
Frontend Mentor @frontendmentor.io · 26/11/2025
We've got a new PREMIUM challenge launching tomorrow! 🥳 For this project, you'll build a flashcard app with study modes, progress tracking, and filtering. It's a great way to practice state management and creating engaging UI interactions.
010