Design comparison
Solution retrospective
Hi everyone.
I remade this challenge, but now using SCSS.
Feel free to give any feedback.
Happy coding :D.
Community feedback
- @kenreibmanPosted over 2 years ago
Hey @luis08201 ! Great submission. I love how you pushed yourself in using SCSS. Some suggestions from an industry standpoint:
-
Check your accessibility report that Frontend Mentor offers you, you have quite a few accessibility and HTML issues.
-
Your BEM naming is a little off. You're giving modifier classes too often; Usually to every third word in your element class name. the double hyphen
--
are for modifier events likebtn__large--active
orphoto__img--highlighted
in your case,header--nav
or--link
should be__link
ormain-header__nav
simply put, you should rarely have to use -- -
I see you're using
section
elements which is a great step into a well-structured page. However, you're lacking amain
element that surrounds thosesection
tags to make it semantically correct. You could wrap all your content inside thebody
tag with amain
element. -
I also suggest you put a nice descriptive alternative text
alt=""
whenever you use an image for accessibility purposes. Same goes for your anchor links as well. I see you're getting a lot of those errors in your footer. -
If your image is purely decoration and you absolutely believe that it doesn't need descriptive text for accessibility, you can hide that from screen readers by putting an
aria-hidden="true"
in yourimg
tag. You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden
I hope this helps, you're doing great!
Marked as helpful1 -
- Account deleted
I think it looks very good!
Marked as helpful0
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