Frontend Mentor
@frontendmentor
Followers
45K
Following
24K
Media
750
Statuses
7K
🧑💻 Build projects: https://t.co/Uuy2kA2Kze 📈 Train your team: https://t.co/3628z84AVt 🤝 Hire top talent: https://t.co/ZHIHWS3w8u
Join 1M+ developers →
Joined May 2018
It’s always great to see our challenges extended. Awesome work, @talimbuilds! 👏.
Just built a Hangman-style word guessing game with Next.js & TypeScript! Inspired by @frontendmentor but took it further with performance tuning, testing, and full game logic. Try it live:.
1
0
14
If you found this breakdown useful, please repost our original message 🙌. If you liked this format of analyzing common issues from community solutions, let us know, and we'll do more!.
We see many people setting html { font-size: 62.5%; } in their Frontend Mentor projects without considering the implications. Here's why you might want to reconsider this approach 👇
0
2
4
And there you go! Hopefully, if you're someone who sets html { font-size: 62.5%; } on their projects, you've now learned some new approaches to take. Go forth and refactor! ✨.
1
0
4
Another approach is to use clamp() for truly responsive typography, eliminating the need for media queries. The example below auto-scales between 16px and 20px based on the viewport width. No hacks, and no need to mess with root font-size percentages.
1
1
5
Define a type scale with custom properties for easy, scalable typography. If you ever need to bump the whole site’s font size, change just one variable. The same goes for defining spacing variables for consistent spacings. Here's a simple example for font sizes:
1
1
3
The problem? Setting html { font-size: 62.5%; } overrides user font settings and can hurt accessibility, if not properly managed. Instead of optimizing for math over accessibility, consider these alternative approaches that avoid overriding browser default font sizes. .
1
0
3
Firstly, what does html { font-size: 62.5% } do?. The default browser font size is 16px. 62.5% of 16px = 10px. Now, 1rem equals 10px, so 1.6rem = 16px. This is often done to make rem-based sizing "decimal-friendly."
1
0
3
We see many people setting html { font-size: 62.5%; } in their Frontend Mentor projects without considering the implications. Here's why you might want to reconsider this approach 👇
3
19
52
RT @thecodercoder: This is so true. I've worked with so many design files that have all the layers on the same level, named like "Layer 24,….
0
2
0
❤️.
@frontendmentor Huge thanks to the front-end mentor 🙌 .I have already advanced in Javascript and now MERN Stack, but I promise to return and finish every challenge both free and premium. I won't accept being full stack without achieving this 💯 .Thanks for your impact in my life 💪💪🙌.
1
0
17
We're actively working on AI-enhanced reports now that JS reports have shipped. So, you can expect some updates soon! 🙂.
0
0
2
In testing, AI-enhanced reports generate up to 3x (😱) more report issues than the static analysis tools alone. The issue quality has also been impressive, as we’re picking up issues the linters wouldn’t (see screenshots from our prototype below).
1
0
1
We want to find ways to guarantee quality insights with every submission, while preserving the community-focused feedback system for valuable peer-to-peer review. Our first crack at this is AI-enhanced reports.
1
0
1
A major goal of ours is to provide helpful insights with every single solution submission. So, whether or not you receive community feedback, you can take valuable lessons from one solution to the next.
1
0
1
With the addition of CSS and JS reports in the past month, we’ve laid the foundations for our next major update, which we’re actively working on…. AI-enhanced reports! 🤖.
1
0
1
For anyone who has already submitted solutions that include JavaScript, go to the reports section on your solutions and generate new reports to see them.
1
0
1
We’re using a set of ESLint rules focused on best practices to help you write better JavaScript code. We’re trying not to be too nitpicky, but feel free to let us know if you have any feedback!.
1
0
1
We're delighted to say we’ve just shipped an exciting new feature…. We’ve added JavaScript reports to solutions! 🥳. With this update, we now have accessibility, HTML, CSS, and JavaScript reports available for all solution submissions!
6
8
68