recipe-page

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  I hope this feedback is helpful...

  1. Look up how and when to write alt text on images. There is a great post in the resources channel on discord about this. The alt text on the image you have written here is not right.
  2. Change the summary element to a paragraph.
  3. Headings must go in order. This is extremely important. Headings give the outline of the document content, much like the contents page of any big document, and are used extensively for navigation by assistive tech users. It's an accessibility requirement failure to skip heading levels like this from h1 to h3.
  4. Don't add non breaking space code in the html. Use css! In most sites you would not have the luxury of changing the content code like this.
  5. Remember strong tags add bold emphasis not spans.
  6. The table must include header cells. This is essential. Ideally, these should have the scope attribute set to row.
  7. There is no need for an extra span inside the table cells. Keep html as simple as possible.
  8. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  9. Did you mean to set the body's min height to 100vh perhaps? (Not 10vh)
  10. Remove any css properties you are repeating/overruling like padding on the body.
  11. The recipe image does not need height 100%.
  12. This challenge does not need a media query I think. If it did though it would need to be (a) defined in rem or em not px and (b) be a min-width media query targeting the larger screen sizes because almost all projects should be built with the mobile styles as the default. Read about how to make sites responsive and use media queries well
  13. All I can think that may change in a media query may be padding and font size, but if so font sizes would need to be explicitly stated not just a keyword value that removes all control of what that means on different browsers.

  Marked as helpful

  1

  ---

  

  Diwakhar•460

  @diwakharpandyanPosted 8 months ago

  Thanks @grace-snow... I will make all the changes u said... But u didnt mention about the white space at the bottom of the page which is visible only in the generated screenshot...in browser its not visible...

  0

  

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  @diwakharpandyan I replied in discord. That's because your solution is shorter than the original design. See how the spacing at the top and bottom of the page is smaller in yours? There may be line height and font size differences too.

  1

  

  Diwakhar•460

  @diwakharpandyanPosted 8 months ago

  ok @grace-snow Thanks

  0
• 

  Albert•410

  @Albrt78Posted 9 months ago

  Nice 👍

  1