Responsive recipe page using HTML and CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  Hi, I can spot some problems here so hope these pointers are helpful :

  1. The image is important content so should have a proper alt description.
  2. Personally I'd consider the preparation time text as a heading.
  3. The table must include header cells for the table heading content. Ideally these should include a scope attribute set to row.
  4. Just so you're aware, you don't need to include paragraphs inside list items.
  5. Don't use b tags. That's a deprecated tag. Use strong instead for strong emphasis.
  6. You don't need to repeat the preconnect google font links. Only ever include them once, no duplication.
  7. Optionally you can load all the fonts in one go, choosing the specific families and weights you need. This would be better for site performance.
  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. Set the max width in rem not px. This is important for users who change their default text size as it means the layout will scale correctly.
  10. The max width on the image must be 100% and not a pixel value. I think that is what is breaking this site when I view it on mobile. Its making the content overflow on both sides (I'll add a picture to discord so you can see what's broken).
  11. The other thing that is likely causing the overflow is the explicit width on the name class. Those table cells should each be width 50% to make them even.
  12. This challenge does not need any media query. You can remove them and all should work once you've applied the above fixes. But in future challenges make sure you work mobile first, with the larger screen overrides in the media query. Have a read of this: https://fedmentor.dev/posts/responsive-meaning/

  1
• 

  John•410

  @MiyaoCatPosted 8 months ago

  Looks great! The spacing between the bullets and numbers and the text is well done. I know I struggled with that.

  Some small differences I noticed:

  • Your line spacing looks a bit tight compared the the design file.

  • I saw you use @media (max-width: 426px). For mobile-first development, you'll want to use @media (min-width: 426px). When you build mobile-first, you build out the mobile screen first. As you make the screen bigger, you may change some of the CSS. So you'll say, when the screen size is a minimum of X pixels, the elements will include Y CSS. In other words, when the screen size is X pixels or larger, then do this...Hope that makes sense! I know for me it seemed totally backwards and took me a minute to understand it.

  0