Design comparison
Solution retrospective
mobile first approach
What challenges did you encounter, and how did you overcome them?styling list bullet points
What specific areas of your project would you like help with?idk, open for any suggestions
Community feedback
- @AutumnsCodePosted 5 months ago
Hi,
well done for the solution! Its looking almost exactly as the design file.
HTML
In regards to your HTML-file, there a few things I would do differently or was told by other helpful user here when i did submit my own solution on here.
- The part for ingredients, instructions and nutrition I would have wrapped it in his own section and gave each the same class name as they appeared to have pretty much the same styling, also the
<div class="line"></div>
wouldn't be needed in this case as you could have useborder-bottom
in your css file to get the line. - Instead of using
<b></b>
I recommand using<strong></strong>
as it make the text in it bold automatically. - The nutrition table need to be
<table>
- element.
CSS
-
You did reset your margin, box-sizing and padding perfectly. However, I would suggest you would include the pseudo-element after and before in it too, as they tend to have those styling too.
*, *::after, *::before {}
-
It is not advised to use
font-family, font-weight
inside the global reseting. Instead it is more common to use it inside the body. -
I did noticed you had repeated a lot of the same styling throughout the stylesheet like color and line-height. Both those item, I would suggest to put inside the body just like this:
body { line-height: 1.5; /*its the same as 150%*/ color: var(--wenge-brown); /*its the base color of this project*/ }
It's not only helping stopping you declaring the same property repeatly, but it does make mainting the code a lot easier.
- Beside images there is almost no need to declare height.
Once again, well done. And I am looking forward to see your next solution!
Marked as helpful1 - The part for ingredients, instructions and nutrition I would have wrapped it in his own section and gave each the same class name as they appeared to have pretty much the same styling, also the
- @kamkwamba-kPosted 5 months ago
I wanted to commend you on the fantastic job you did with the omelette recipe project! The webpage looks exactly like the design specification, and the attention to detail is impressive. The layout is clean, the styling is spot on, and the responsiveness works perfectly across different devices.
1
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