Design comparison
Solution retrospective
I've tried to code without assembling the figma file, and that was a mistake. So next time I will try to make sure I have a solid “design” before trying to move forward, because in the end everything has been more difficult than it should have been.
What challenges did you encounter, and how did you overcome them?Trying to match the spacing to the preview was difficult and, in my opinion, overcomplicated the code
Community feedback
- @brukmgPosted about 1 month ago
The code you've written has some really nice touches! You've applied a well-structured reset to ensure consistency across browsers, which is always a smart move. I love how you've used variables for colors, font sizes, and border-radius—it makes everything more manageable and scalable.The padding and margin adjustments throughout the layout are thoughtful, ensuring a clean and organized design. Plus, the way you've styled the lists for ingredients and instructions with custom markers adds a great touch of detail. Overall, it’s clear you’ve put a lot of thought into making the page both functional and visually appealing!
For a couple of tweaks, consider switching to a
<table>
for the nutrition section to enhance accessibility and semantic structure. You can also remove the redundanta:not([class])
style since the.attribution a
block already takes care of that. There are a few unnecessary selectors likepicture, svg, video, canvas, input, button, textarea, select
—those aren’t needed since these elements aren’t used in the HTML. There’s a minor conflict with the padding in.preparation-time
and.preparation-list
, and a small typo in.intructions
and.intructions-list
(it should be.instructions
).Overall, it’s clear you've put a lot of thought into making the page both functional and visually appealing—just a few refinements will make it even better!
Marked as helpful0 - @fauzihizPosted about 1 month ago
i just learned how to write css more properly, by using variable, typography, and styling
0
Please log in to post a comment
Log in with GitHubJoin 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