Recipe Page

Community feedback

• 

  AlejandroIMP•190

  @AlejandroIMPPosted about 1 month ago

  Phenomenal job!

  I have some feedback, I hope it be useful

  Areas for Improvement:

  Duplicate Google Fonts Links:

  • There are two identical <link> tags for Google Fonts. Remove the duplicate to optimize the code.
  • Example:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Outfit:wght@100..900&family=Young+Serif&display=swap" rel="stylesheet">
    

  Inconsistent Class Naming:

  • The class names are mostly consistent, but there are inconsistencies like recipe__section_Preparation (uses an underscore) versus recipe__section-title (uses a hyphen). Stick to one naming convention (e.g., kebab-case or BEM).
  • Example:

    <h2 class="recipe__section-preparation">Preparation time</h2>
    

  Accessibility in Tables:

  • The table lacks a <caption> or aria-label for better accessibility. Consider adding a <caption> to describe the table.
  • Example:

    <table class="recipe__table">
      <caption>Nutritional values per serving</caption>
      <tr class="border">
        <th>Calories</th>
        <td>277kcal</td>
      </tr>
      <!-- Other rows -->
    </table>
    

  Use of <b> Tags:

  • The <b> tags are used for bold text, but they are not semantic. Consider using <strong> for semantic importance or handle bold styling with CSS.
  • Example:

    <li><strong class="global_color">Beat the eggs:</strong> In a bowl, beat the eggs...</li>
    

  Overall, the code is well-structured and functional, but with a few tweaks, it can be more semantic, accessible, and optimized. Happy coding!

  Marked as helpful

  1

  ---

  

  Syed Jamil Hussain Shah•140

  @Hsyedjamil1Posted about 1 month ago

  @AlejandroIMP Thank you so much

  0