Flexbox, Mobile First Design, Utility Classes

Solution retrospective
Using my knowledge from previous challange to build the page following mobile first approach.
What challenges did you encounter, and how did you overcome them?I encountered challenges with the box-shadow effect and also typography for the contents
What specific areas of your project would you like help with?Box Shadow and Typography
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ElDonPapa
Good job completing your second project! It's nice, and I see you mainly used responsive CSS values for your page, which is a great thing.
The link to your github repo is not working so I'll do based on what I get in the browser.
Considering your trouble with typography, it seems mostly good, the only thing that makes it really differ from the design is the line-height. In the original design, a line-height of 150% is used on almost everything.
Secondly, your box-shadow is almost good, the problem is just with your y-offset that should be the same as the x-offset, so you would end up with (just an example):
box-shadow: 8px 8px hsl(0 0 7);
There are also some problems with your html semantic, such as your use of <section> tags to separate the content of the card, or also your use of an <h3> tag when there are no other headings, in practice, you should avoid skipping heading levels (so starting with <h1> then using <h2>...)
Here is a great article talking about just that if you want to dive deeper. (I also recommend checking there other articles, they are really helpful!)
Overall, I feel like you maybe have overlooked some aspects of the design, you should really capitalize on the figma file that we are given as a starter for everything, especially values like spacings.
But appart from that, it's not bad! I hope I could have helped you at least a little bit 🙏. Don't hesitate to tell me if you need any more help.
Good luck! 💪
Marked as helpful
Join 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