Design comparison
Solution retrospective
Second frontend mentor challenge completed 🎉
As this was fairly simple my main goal was to use BEM (never used it before) and have it be pixel perfect.
When trying to achieve pixel-perfect I took screenshots of the component in the browser and overlaid them in Figma using "Place Image". Is there an easier way of doing this?
Also, using BEM for the first time. I was unsure if I thought have used a BEM class to style the article
or not as the design was fairly simple? Any thoughts on this?
Had to use Surge for the site because GitHub pages isn't rendering the page properly 🤷♂️
Any feedback is greatly appreciated! Thanks 😬
Here are some resources I found helpful:
Community feedback
- @grace-snowPosted almost 3 years ago
Pixel perfect is a really unhelpful phrase, and not what you should be holding onto as a goal. If you were a pro member, or in a real job, you’d have access to the design files and established sizes for things like headings etc, so not something you need to waste time on doing these challenges. Just aim to get it close, that’s fine!
The most important things are well written quality code.
This looks good! 👍 Just small improvements needed
- aria label isn’t valid on a h1. Instead use an sr only class and include the text inside the heading element. Or, as this is clearly a demo project I think it’s fine to add the h1 visibly on the page
- your BEM is close, but you’ve forgotten to use the block class of
card
on the article - line height should be unitless, never in px
- letter spacing needs to be in em really. Again, px no good coz it can’t scale with the text of sizes/zoom are changed
- never have a max height on elements containing other content. If I had a larger font size or a smaller device, that max height could break the solution for me
I hope this helps.
Marked as helpful2 - @minimalsmPosted almost 3 years ago
aria label isn’t valid on a h1
Realised that after I submitted. I was fooled by this highly upvoted StackOverflow post. I guess it seemed to the most a11y friendly option, but I'll refactor this to use a
sr-only
class.your BEM is close, but you’ve forgotten to use the block class of card on the article
Yes! Wasn't sure on this (it was one of my questions). Any thoughts as to using / not using BEM when we're dealing with small components like this?
line height should be unitless, never in px
Noted, will refactor 😀!
letter spacing needs to be in em really. Again, px no good coz it can’t scale with the text of sizes/zoom are changed
Ah good point, thanks!
never have a max height on elements containing other content. If I had a larger font size or a smaller device, that max height could break the solution for me
Lessons learned! Seems stylistically this wasn't doing anything anyway 😅 (at least at 'normal' font-size/zoom)
Thanks so much for your thorough feedback @grace-snow ❤️
0@grace-snowPosted almost 3 years ago@minimalsm this is really good overall, I’m just being picky 😉
I shouldn’t really use the word invalid about aria label on the h1. It’s just not best practice. Bots will ignore it (like search engine crawlers) and h1 is very important content on a page.
The other downside of aria label is it’s not always consistently translated if people switch their language settings (better than it used to be, eg google translate will scan aria label now, but behaviour is still patchy)
Marked as helpful1@minimalsmPosted almost 3 years ago@grace-snow picky is good! It's how we learn 😬
"is it’s not always consistently translated"
Ah, that's interesting. I'll take a dive into that another day. The site my team works on is translated into ~40 languages, I wonder how this affects us 🤔
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord