This interview on The Pragmatic Engineer is a great listen for all developers out there:
www.youtube.com/watch?v=JiW...
Posts by Frontend Mentor
"We discard, off the bat, at least half the applications, maybe two-thirds, just because they're either not addressing the job directly or they are not following the instructions." โ DHH
If you're applying for roles, slow down. Read the posting twice. Do exactly what they ask. Most others won't.
We hope you enjoy building the project! For more details, check out the challenge page:
www.frontendmentor.io/challenges/...
๐ This is a premium challenge for Pro members
Our premium challenges are the highest-quality projects that make standout portfolio pieces.
www.frontendmentor.io/pro
โจ Ideas to take it further:
- Build as a full-stack app (Figma includes auth screens!)
- Add recurring deposits on a weekly or monthly schedule
- Show projected goal completion dates
- Add withdrawal support for full transaction history
- Export savings data as CSV or PDF
- Add PWA capabilities
โ
Key features include:
- Create, edit, and delete savings goals with optional deadlines
- Add deposits with amounts and notes
- Dashboard with summary stats and a monthly deposits bar chart
- Progress bars and completed goal states
- Filter by status and sort by deadline, progress, and more
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 ๐
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.
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!
Design Challenges aren't going anywhere. We'll be launching both formats regularly going forward.
Full article with all the details:
www.frontendmentor.io/articles/pr...
Every challenge also has a frontend-only path if you're not ready to go full-stack yet.
We plan to add full-stack and AI-assisted engineering learning paths in the coming months to help teach the core concepts of building full-stack projects while working with AI tools.
Skills learning tracker
Build a skills-learning tracker that lets users log practice sessions, track streaks, and visualize their consistency with heatmaps and progress rings.
www.frontendmentor.io/challenges/...
Personal reading list (premium)
Build a personal reading list app that lets users search for books, organize them into shelves, track reading progress, and explore year-in-review statistics.
www.frontendmentor.io/challenges/...
RSS feed reader (free)
Build an RSS feed reader that lets users subscribe to blogs and news sources, organize feeds into categories, and browse articles in a unified timeline.
www.frontendmentor.io/challenges/...
The reason we built this: more engineering work now involves working from specs and collaborating with AI rather than implementing detailed designs. We wanted a format that helps people practise those skills.
Three product challenges are live today:
We're calling our existing challenges "Design Challenges" now to keep things clear.
Design Challenges: You get a design and implement it as accurately as you can.
Product Challenges: You get a detailed spec and brand kit, and you work through the specs to build a product.
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 ๐งต
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.
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!
This is the first in a series of report upgrades. We're adding new scoring dimensions soon, and historical reports are on the roadmap, so you can track your improvement over time.
This works the same whether you've handwritten every line or used AI to help. The output is what gets measured. The goal is to improve code quality in your projects, regardless of your workflow.
Scores give you a feedback loop for that.
Submit โ check scores โ dig into issues โ improve โ regenerate report โ see the score go up.
That cycle is really hard to create without a clear signal for whether your changes are working.
We think this will change how people approach challenges.
A lot of people submit, review feedback, and move to the next challenge. But some of the best learning happens when you stay on a project and refactor. That's what professional devs do every day.
Score summary shows 7.6/10 overall, with individual scores in Accessibility 7.7, HTML 6.4, CSS 8.7, and JavaScript 7.7.
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.
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:
After you learn the basics, building one thing teaches you more than watching ten things.
It feels harder, but it's how you build real skills.
If you'd like to see the types of projects we've helped fund, you can check out our public impact page here:
app.ecologi.com/impact/fron...
Frontend Mentor's climate impact: 40,222 trees funded and 58.41 tCOโe avoided, highlighting environmental contributions.
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!
This is the next step in upgrading our solution reports before we move to a much more granular solution-scoring system that will even take factors like README and commit quality into account.
All the things potential employers would want to see in your projects!
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.
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.
We hope you like the update and are excited to see our V2 solution reports! ๐