3 column preview card component main using SASS and BEM
Design comparison
Solution retrospective
Hi every one this challenge was easy for my thanks to the use of BEM metodology I find some difficulties giving differents styles for each button hover but at the end I figure out how to resolve it in a certain way, if some have more knowledge in SASS I would really appreciate some feedback in that part
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Alan Lopez Reyna, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Learn more, he is not confirming a form, or something like, it will be redirected to another page, to Learn more about!to solve this problem do this:
<a href="/" class="section__button suv__button"></a>
I noticed that you used 3
h1
tags, this is not a good practice as theh1
tag means the main title of the page! to solve replace theh1
byh2
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful0 - Account deleted
Hi @AlanLopRey! I liked your solution a lot. However, I'd like to point out a few things that can be improved:
- Even if it's possible to use more than one, there should only be one
<h1>
per page. - In this design, those
<button>
tags probably would be anchors instead, which you can style to look like buttons! - There's no need to add a
<span>
tag to style the label color separately. You can specify thecolor:
property within the element that contains the label itself. In this case that'd be your<button>
tags - When using SASS, pseudo-classes can be nested by using the parent selector
&
. I noticed that you're already familiar with it, so it's a matter of practice. E.g. Instead of:
.luxury { property: value; &__button { ... } } ... .luxury__button:hover { property: value; }
You could use:
.luxury { property: value; &__button { &:hover { ... } } }
Helpful links:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- https://sass-lang.com/documentation/style-rules/parent-selector
Hope this helps!
Marked as helpful0@AlanLopReyPosted almost 2 years ago@rwxdan thanks, I was justly looking in how to apply the hover with the nested property, you save me for next challenges
0 - Even if it's possible to use more than one, there should only be one
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