Responsive Recipe page using HTML & CSS

Well done on completing the challenge, the finished design looks great!

I am still learning too and these challenges always take me much longer than expected, so don't worry about that - hopefully we will speed up with practise :)

HTML feedback:

• You could consider using the <article> element to contain the entire recipe instead of a section, and use <section> for the individual sections of the recipe. Anything contained within an <article> should be self-contained and meaningful outside its context. Example: you have the 'prep time' inside an <article>, but ask yourself if that section was taken way from the page, would it make sense without the rest of the recipe?

• you may want to check with someone more experienced if it's necessary to place your <h1> and image in a <figure> (I can see why you chose to, but I am not sure its needed, but I could be wrong).

• Good semantic use of the <h2> element and paragraphs and lists.

• Consider more meaningful class names so your CSS is more understandable when others read your code (e.g. .ingredients-list rather than .ul-2)

• I think the <hr> is an understandable choice as it is a meaningful section break, but placing the recipe sections in <section> elements could work well for this challenge too. You can then create the border with a bottom border to the section in the CSS and style it. Just a thought.

• You can use <th> for the table headers instead of <td> to distinguish them as headings. You can also look up using the scope attribute on the <th> to associate the header with the row or column (in this challenge the heading cell is the header for the row). Here's how that would look:

<tr>
  <th scope="row">Calories</th>
  <td>277kcal</td>
</tr>

CSS feedback

• I would organise your CSS file either in the main folder alongside your index.html for a small challenge, or in a dedicagted styles/css folder. At the moment you have hidden it in the design folder with the other files from Frontend Mentor.
• Good use of custom properties - you can even add your font-weights and font-family as custom properties too (and whatever else you repeat a lot in your code)
• use rem or em units not pixels (I would also use rem or em for padding, not percent)
• You can use a modern CSS reset which will include displaying your images as block level elements and max-width 100% to make images easier to work with. I like this CSS reset by Josh Comeau: https://www.joshwcomeau.com/css/custom-css-reset/
• well done on discovering the ::marker pseudo element!

Hapy Coding! Jo