Before this, I avoided using grid like the plague, and this was pretty hard for me. Watched a video on grid and was able to do it, but the scales are probably all over the place and the code is not neat at all. Anyways, it was enjoyable, and i will definitely use grid more often.
The proudest thing is that I've gotten better at writing media queries including getting used to starting a mobile first workflow and another thing is that this is the first time I've used SASS instead of CSS.
What challenges did you encounter, and how did you overcome them?The most difficult challenge I felt was the migration from CSS to SASS because it took time to learn it, besides that the styling of cards that have a special color at the top of the card also provides its own challenges for me.
What specific areas of your project would you like help with?all area of html and css
Could you take a look and give me your opinion?
It looks great, congrats!
You forgot the icon in the button and maybe a little letter spacing in the .product__type.
Also, that sould be a simple paragraph, not really the main title :)
Congratulations for completing the challenge, it looks very good!
A little advice, you could add lateral padding in the body, so that the main does not touch the edge, or add a max-width on the .main of 40-50 rem.
Keep going! ^^
@ahmedraza032 Hey, congrats on completing the challenge, looks good! however, here are some tips that I hope you find useful:
<a href="#">LINK</a>.link:hover, you could put the 2 properties inside the single braceHappy coding! ^^
Congrats on completing the challenge, looks great!
A small tip I have would be to add padding to the body element. This ensures that the center element does not touch the edges on smaller screens.
Happy coding!! :)
Hey
Congrats on completing the challenge. It looks very good and I like it, here are some things you could improve:
<img src="source" alt="text">. This helps both the search engine and the user, in case the image cannot be displayed<div class="mini-2">. In CSS you can add the gap property:.mini-2{
display: flex;
flex-direction: column;
gap: 1.5rem;
}
:hover' state after the element that you want to have special properties when the user hovers over it. In the original design, the title <h3>HTML & CSS Foundations</h3>` changes color when hovered in yellow. you can achieve this using:.mini-2 h3{
font-family: 'MyCustomFont';
color: black;
margin-top: 8px;
}
.mini-2 h3:hover{
color: yellow;
}
I hope you will receive my feedback as a helper and good luck with the next projects :)
Happy coding!!