Recipe page, html, css

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.

1. 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 use border-bottom in your css file to get the line.
2. Instead of using <b></b> I recommand using <strong></strong> as it make the text in it bold automatically.
3. The nutrition table need to be <table> - element.

CSS

1. 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 {}

2. 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.

3. 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.

1. Beside images there is almost no need to declare height.

Once again, well done. And I am looking forward to see your next solution!

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.