FMCC Recipe Page

Community feedback

• 

  Ahmed Abu Qahf•90

  @ahmedsomaaPosted 3 months ago

  Hey, amazing job. Congrats on completing this challenge!

  A few tips!

  HTML:

  • I like the fact that you used <figure/> as a container for the <img/>.
  • It would be better to divide your page into sections using <section/> element and give each one a unique id instead of using a <div/>, this would give it a better semantic meaning. Example of sections could be Ingredients, Instructions...etc.

  CSS:

  • You can import multiple fonts in one @import statement like this @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Young+Serif&display=swap");
  • Set the font-size: 16px for the whole document and then use rem for any other font-size like <h1/>, <h2/>. Also, your document's font size is set to 11px which way too small, make it 16px or 14px at least.
  • Change the color of the text in the document to stone-600 as this is much closer to the design that the one's you used.
  • Change the list-style of the Ingredients to square at least that's how I see it. It's too small.
  • Add a line-height: 1.5 or margin-top & margin-bottom for list items as this looks bigger in the design.

  0
• 

  P

  Greg Perry•190

  @chizy21Posted 3 months ago

  Great job with the HTML layout, there are some duplicates in the CSS that could be cleaned up.

  0