
Design comparison
SolutionDesign
Community feedback
- @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) versusrecipe__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>
oraria-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 helpful1 - There are two identical
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord