@george5-star
@marlonszm
Submitted
Guys i think that my solution looks pretty close to what is demmanded, but i've had some problems to insert colors in the ordered list (the numbers) and insert horizontal lines in the grid. Hope you guys enjoyed my solution and give it a feedback!
@george5-star
Posted
Hey, @marlonszm, once again! Congrats on completing the challenge!
Before anything else, I have noticed you have not implemented the suggestion I gave on the previous challenge, so I recommend you actually do so to solidify your understanding.
Now back to these problems:
The Problem: -> Problems inserting colors in the ordered list (the numbers)
<div class="list">
<li id="eggs">2-3 large eggs</li>
<li id="salt">Salt, to taste</li>
<li id="pepper">Pepper, to taste</li>
<li id="butter">1 tablespoon of butter oil</li>
<li id="optional">Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
</div>
// Change the div to ul, like the following:
<ul>
<li>item 1</li>
</ul>
That's proper semantic html tag to use instead of the div.
The fix:
li::marker {
color: whatever color you like;
}
The problem: Inserting horizontal lines in the grid
Change the following markup to actually use the table element.
// BEFORE
<div class="nutrition-table">
<p id="calories-text">Calories</p>
<h3 id="kcal">277kcal</h3>
<p id="carbs-text">Carbs</p>
<h3>0g</h3>
<p id="protein-text">Protein</p>
<h3>20g</h3>
<p id="fat-text">Fat</p>
<h3>22</h3>
</div>
// AFTER
<table>
<tr>
<td>Calories</td>
<td>277kcal</td>
</tr>
<tr>
<td>Carbs</td>
<td>0g</td>
</tr>
<tr>
<td>Protein</td>
<td>20g</td>
</tr>
<tr>
<td>Fat</td>
<td>22</td>
</tr>
</table>
Check out the MDN docs on tables if you find them confusing: ---> MDN Docs.
The fix:
tr {
border-bottom: 1px solid (and your preferred color here)
}
@originalboss
Submitted
I'm kind of struggling with BEM methodology for naming but it's a little confusing so can someone recommend an easy way to learn it? Of course any tips would be appreciated.
@george5-star
Posted
Hey @originalboss. Congrats on completing the challenge, and of course there is always room to improve our code, so I think you will find the following helpful:
About your question
I know how confusing it can be when learning something for the first time, especially when it comes to BEM. Actually, BEM stands for Block Element Modifier. Let's consider the following code:
<div class="card card--sedan">
<img class="card__image" src="" alt=""/>
<h2 class="card__title">Sedans</h2>
<p class="card__description">some description here</p>
<button class="card__btn">learn more<button>
<div>
So the card class is the block, card__image,card__title,card__description,card__btn are the elements because they all depend on the block class and the card--sedan is the modifier, so in your CSS file you could style the background of the card using the modifier. For example: Using the design in this challenge, you could use the card class to style all the common styles and their modifier to style the background color.
.card--sedan {
background-color: orange:
}
.card--suv {
background-color: blue;
}
and so on.
If you want to dive deep into the BEM naming convention, check out their docs -> BEM docs
@marlonszm
Submitted
I'd like to know why i can't add the black color to my hover.
@george5-star
Posted
First of all, I would like to congratulate you on completing the challenge; your solution looks neat and clean. However, there is still some improvement.
First, about your question ( Why you cannot add the black color on hover )
This is how your html is structured
<div class="links>
<a href="#">Github</a>
<div>
And this is how you styled your css
.links:hover{
color: black;
}
Reason it does not work. Your .links selector is a container for your a tag so the color black isn't applying on the a tag but rather on the .links which is the div.
How to make it work. So there are probably many ways of solving this, but one solution is to add an hover pseudo-class to your .links with a child selector as the a tag and add the color:black declaration. So what this means is look at any a tag inside the parent of the .links selector and when the .links is on hover, apply the styles. Like what I have done below:
.links:hover > a {
color: black;
}
Other improvements
I noticed your favicon did not show, and I think it has to do with the path.
Change your favicon path from
Before
/images/favicon-32x32.png
After
./images/favicon-32x32.png
Marked as helpful
@dashaunn
Submitted
Can anyone provide me some resources or project ideas that help me to understand CSS Grid better? Thank you!
@george5-star
Posted
Hello @dashaunn, Congratulation on completing the challenge. I hope you had fun building it. The best resource that helped me on css grid is a free grid course on scrimba sign up with your github account for free and enjoy.
@tunabearfish
Submitted
I had trouble with using CSS, when to use px, vh, or %
@george5-star
Posted
Congratulation Steven for completing the project and I hope you had fun building it. Regarding you question on which unit to use I recommend the using rem or em which is explained in the code samples below:
<div>
<h1>Some text</h1>
</div>
h1 {
padding: 1em; // which is equal to 16px and it is relative to its parent div.
}
h1 {
padding: 1rem; // this is relative to the root element which is the html tag.
}
So I recommend using em for paddings and margins and rem for font-sizes. Also this link will provide you with a brief overview on them.
@Sahorri
Submitted
Feel free to comment my code :)
@george5-star
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉I hope you had fun building it.
Marked as helpful
