Recipe-page

Community feedback

• 

  Tenzin Choeda•210

  @tenze21Posted 9 months ago

  Hey Neel, Congratulations on completing the recipe page challenge 🎉🎉🎉. Some suggestions:

  • I noticed that your layout tends to break down a little on smaller screens. On inspection I noticed that you have used a lot of unnecessary widths and heights on your layout. The width and height you have set on the body and the container class seems unnecessary. I would recommend you get rid of the .box class and wrap the entire page in the .container div or you could use the article tag for proper HTML symantics and give it a max-width. Once you set the max-width You won't be needing the @media query. checkout this article for more
  • Since this challenge is mostly focused on using proper HTML symantics I think you could use the section tags to wrap the different sections on the page like the ingredients, preparation etc..
  • you could wrap the simple omelette recipe heading in a h1 tag since it is the main header for the page and the others h2 or h3.
  • Use rem/em units for font-sizes and margins and paddings as well since it improves the scalability of the page. checkout this article for more

  Good job, and congratulations on completing the challenge 🎉✌️.

  1

  ---

  

  Neel Mishra•240

  @Neel-07Posted 9 months ago

  @tenze21 hello tenze i have applied some of the changes said by you, but still facing some difficulty in making it proper responsive can you guide me further, it will be helpful for me to learn some the concepts within our guidance

  0

  

  Tenzin Choeda•210

  @tenze21Posted 9 months ago

  @Neel-07 I have tried some debugging and found that removing the height: 70% and width: 40% from your .box class fixes the responsiveness issue.✌️ You can go through my work here. Even though it's not the best out there, i hope it helps a little I have tried my best to use proper HTML symantics.😊

  0