@DylandeBruijn
Posted
Hiya @mayank1405,
Great job on another successfully completed project, you are on a roll!
I'll be glad to give you some friendly constructive feedback:
- Try to give your elements more descriptive classnames:
<div class="b">
<h2>Ingredients</h2>
<ul>
<li class="li">2-3 large eggs</li>
<li class="li">Salt, to taste</li>
<li class="li">Pepper, to taste</li>
<li class="li">1 tablespoon of butter or oil</li>
<li class="li">optional fillings; cheese, diced vegetables, cooked meats, herbs</li>
</ul>
</div>
When someone is reading through your code it's hard to understand what class="b"
means exactly. Try something like this as an example:
<div class="ingredients">
<h2 class="ingredients-title">Ingredients</h2>
<ul class="ingredients-list">
<li class="ingredients-list-item">2-3 large eggs</li>
<li class="ingredients-list-item">Salt, to taste</li>
<li class="ingredients-list-item">Pepper, to taste</li>
<li class="ingredients-list-item">1 tablespoon of butter or oil</li>
<li class="ingredients-list-item">optional fillings; cheese, diced vegetables, cooked meats, herbs</li>
</ul>
</div>
This will make it easier for you to make sense of your code and to style it, as well as other developers to read it. Very important if you work in a team.
- At the moment your card scales with the viewport and from my understanding you don't want this. You want the card to stay centered and shrink when the viewport gets to small. So I suggest the following changes:
.whitebox {
max-width: 450px;
width: 100%;
background-color: hsl(0, 0%, 100%);
display: flex;
flex-direction: column;
border-radius: 20px;
padding: 2rem;
}
I removed some properties and added some properties, make sure to compare your code and this code. This code makes sure you card has a max-width
while still allowing it to shrink when it gets to small. On block
elements you don't need to set height: auto
they already have this by default. I also removed justify-content: center
and align-items: center
. These are not needed. I suggest you read up about the properties and what they do exactly, it's important to know what properties do before applying them! Also I would not use percentages for margin
and padding
in this example.
-
I suggest adding
min-height: 100vh
to thebody
so it's always100vh
at a minimum while still being able to grow. Also try adding somepadding
at the top and bottom of thebody
so the card has some space to breath. -
At the moment the card is not responsive, I recommend reading up on media queries on how to achieve this. Try experimenting with them. The
max-width
andwidth
set on the card in combination with media queries should be enough to make it responsive. Try to compare the screenshots for desktop and mobile to check exactly what's happening.
I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!
Let me know if you have more questions and I'll try to answer them.
Marked as helpful