Mobile-first: Recipe Page (SCSS, Vite)

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  Hi, this looks good overall but try to get the sizes and fonts/font-weights closer to the design.

  I can see improvements are needed in some of the html

  • the headings for each section must be h2s not h3s. They are children of tbe main heading, not of the aside
  • you need to write proper descriptive alt text for the image. It is very important content. There is a post about how to write alt text in the resources channel of the discord server.
  • use strong not span for the emphasised parts on the instructions.
  • the nutrition section includes a table so you must use a table in html, not headings and paragraphs. This table must include header cells and scope attributes

  It's hard to debug css without seeing the compiled stylesheet but I recommend you read my article on sass nesting. Also try to avoid so many element selectors and use single class selectors wherever possible. If you ever have to change the html elements your future self will be grateful for that.

  I hope this is all helpful

  Marked as helpful

  0
• 

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  Great job!🚀👍

  I like how you use semantic HTML to split the article into sections, especially <aside>, which you used for the "Preparation time" block.

  I have two minor suggestions. The <h1>,<h2>, and <h3> tags could use a different font. You imported the "Young Serif" but never applied it to the headings. Also, the ordered list markers in the original design look bold.

  Very well done! Congratulations!🥳🎉

  0