Design comparison
Solution retrospective
I would love to hear what you think about the following aspect of my solution.
- Do you see BEM being missused in any place ?
- Are my modifiers proper ?
Happy coding :)
Community feedback
- @tedikoPosted over 3 years ago
Hello, Mojtaba! 👋
Good job on finishing another challenge! What I can suggest you is:
- Since your
.header__logo
image is decorative youralt
text should be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers. - Your
.header container
background doesn't stretch full width on higher resolutions. Use Responsive Design Mode to see how your site behave on different resolutions. - Wrap
.footer__social-icons
into some anchor tags.
Good luck with that, have fun coding! 💪
1@tedikoPosted over 3 years ago@tediko Answering the question, I think your BEM looks good. It is clean, you're using modifiers in good way and also using reusable elements like
.card
. Good job. Since you're using Sass, take a minute and read about 7-1 pattern to keep your file management orginazed.1@MojtabaMosaviPosted over 3 years ago@tediko Thanks, I tought about setting 'aria-hidden=true' on it but forgot. I checked out your solution, it looks really clean and precise (great job), what tool do you use for measurement ?
0@tedikoPosted over 3 years ago@MojtabaMosavi There's a chrome extension called pixel perfect where you put image and you can set opacity on that image, so you can set your elements to fit with design. Other way if u can afford is to use premium and have acces to design files.
1@MojtabaMosaviPosted over 3 years ago@tediko Thanks, I try to use in the next project.
0 - Since your
- @rammcodesPosted over 3 years ago
Looks Great
1
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