Responsive Recipe page using HTML & CSS

Community feedback

• 

  Jo_WithVision•90

  @Jo-with-visionPosted 5 months ago

  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

  Marked as helpful

  0