@kenreibman
Posted
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 helpful