Responsive Recipe Main Page

Community feedback

• 

  P

  thibault.deverge•290

  @thibault-devergePosted about 1 month ago

  Visual Feedback:

  • The inner content is overall well-executed and quite close to the design, but there are a few areas where it could be improved to achieve pixel-perfect precision. Some examples include insufficient margins and approximate spacing. Result is too shrink compared to design. Additionally, certain typography elements are slightly off, especially in terms of color.
  • The text in the list items is not aligned properly compared to the design. Adding some padding-left to the <li> elements could help align the text more accurately.
  • The table doesn't fill the container as expected, and the final row shouldn't have a border at the bottom. Adjusting the width and removing the last border would help improve the layout.
  • The design appears too "shrinked" on tablet viewports. It doesn't feel balanced and spacious, likely due to inadequate responsiveness, making it appear too narrow. Could have use flexbox on the body and use of a 'max-width' on your segment class to make it fluid on the responsiveness to tablet.

  ---

  Code Feedback:

  • Semantic HTML: One of the goals of this project is to practice semantic HTML. While your structure is clean, there are many <div> elements where more appropriate semantic tags could be used. For example:

    • The nutrition table could be improved by using a <table> element with <tr>, <th>, and <td>, which is semantically appropriate for tabular data.
    • For sections like "Instructions" and "Nutrition," using <section> elements would improve accessibility, and the overall recipe could be wrapped in an <article> inside a <main> tag. This would benefit both SEO and screen reader accessibility. Kevin Powell - How to write semantic elements

  • BEM Naming Convention: Your class names are well-structured and inspired by the BEM method, which is great. That said, using a double underscore (__) for block-element separation would make your code fully adhere to BEM. It's a minor detail but worth considering for consistency.

  • CSS Reset: Including a CSS reset would help standardize browser styling, ensuring that your design renders more consistently across different browsers. This could save time when dealing with cross-browser issues. A modern CSS reset - Josh Comeau

  • Relative Units: It's great to see you using rem for font sizes, which is a best practice. However, switching entirely to relative units for spacing (e.g., padding and margins) would improve scalability. Try to avoid using px for font sizes and layout spacing. Pixels can still be used for small details like border radius, but for responsiveness and flexibility, relative units like rem or em should be favored. Kevin Powell - CSS em and rem explained

  ---

  Overall Feedback:

  This is a really solid effort! The code is well-organized and clean, making it easy to read and understand. You're definitely on the right track, with a lot of good practices already in place. There’s always room for improvement, and the feedback above should help you refine your project further I hope. Keep up the great work !

  Happy Coding ! :)

  0