Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first: Recipe Page (SCSS, Vite)

Sarah 540

@AutumnsCode

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Anything that could be improve my HTML & CSS (Scss) part
  • How could have style the list-element properly? Should I have use ::before instead the way I did?

Community feedback

T
Grace 29,310

@grace-snow

Posted

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,670

@solvman

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord