Design comparison
Solution retrospective
You can implement it according to the design, but it looks like there are several things that need to be improved
What challenges did you encounter, and how did you overcome them?I'm a little confused about what I should apply in the nutrition section
What specific areas of your project would you like help with?in the nutrition section, whether to use flex or grid and I'm still confused about the best practice for applying bem
Community feedback
- @Fable54321Posted about 1 month ago
1 -html wise, this looks spot on to me, I really should start using the bem convention more, very clean.
2- Now in your css, I can see you have used rem for font-sizes, wich I know a lot of people like to. If you do so it is really important to convert properly. You have a given paragraph size of 16px, that means I should see font-size: 1 rem somewhere, but it isn't there.
3-You have imported the young serif font, but never used it. The style guide can be seen as some sort of checklist to see if anything is missing at the end.
4-more on font-families, your font-family: "Outfit" is there 6 times. Now I'm all for interchangeable code in the future, but surely calling it on every single block is overkill. You could maybe look at css variables, have let's say a primary one and a secondary one that are both Outfit, use one of each variables for two different sectiosn and then if in the future, let's says the ingredients font needs to change you can just change the associated variable .
5-The colors look right at a glance. Except for the background wich I think you just forgot, no big deal.
6-It's not the end of the world for this project, but for the future you can use a display:flex and an align-items: center on the body to center your project vertically. For this your body needs a min-height: 100vh, wich I personally put on every project.
7- The responsiveness looks good, I would suggest you to use em for your media queries, they're the most consistent across all browsers. (50em is a good spot to start and see how it looks).
Overall Good job ! Keep up !
Marked as helpful1@riddsepPosted about 1 month ago@Fable54321 woah, very good advice. Thank you bro for your advice, I'm happy with it
1 - @Axsel519Posted about 1 month ago
Everything is great
But I think you forgot the background color for the body element
Marked as helpful0@riddsepPosted about 1 month ago@Axsel519 Try checking the preview side, mate, I've fixed it,thanks for your attention!
0 - @SherzodToshpulatovPosted about 1 month ago
Looks good! In the nutrition section, you can use Table.
Marked as helpful0@riddsepPosted about 1 month ago@SherzodToshpulatov I was a little confused about whether to use flex grid or table, thanks mate!
0
Please log in to post a comment
Log in with GitHub
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