Hie Mageshwari Balaguru👋🏾,
Great job completing the Frontend Mentor recipe page challenge!.I'm particularly impressed with how well your solution is responsive on different devices and your use of the fieldset tag for the preparationtime class (I couldn't even think of that myself😀) 👏🏾🔥🔥. I noticed a few areas where we can make improvements, and I'd like to offer some suggestions that might be helpful:
-
Image Path: The omelette image isn't displaying because there's a missing forward slash in the source attribute value. It should be "./assets/images/image-omelette.jpeg" instead of ".assets/images/image-omelette.jpeg".
If you're using VS Code, the Path Intellisense extension can be a great tool for suggesting and autocompleting filenames and paths.
-
Semantic Tags: You could replace the div elements with the more semantic section tag for the ingredients, instructions, and nutrition sections. This is a great approach! You can learn more about the section tag and its usage on MDN
(b) The article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. The entire recipe could technically be considered an article, using sections for each logical part (ingredients, instructions, nutrition) provides a clearer structure.
- Tables: the nutrition section should be wrapped inside a table tag. The table element should be used to display tabular data. You can read more about the table element and how to use it from MDN
Instead of using the article tag you could make use of the table element:
<table>
<tr>
<td>Calories</td>
<td>22Kcal</td>
</tr>
<tr>
<td>Carbs</td>
<td>0g</td>
</tr>
<tr>
<td>Protein</td>
<td>20g</td>
</tr>
<tr>
<td>Fats</td>
<td>22g</td>
</tr>
</table>
The points below are subjective as l am not too sure if you were just playing around with designs and experimenting but in case you were not and the aim was to match the design images
4. From the design images and Figma files provided the bullet points are squared and to change the bullet points from circle to square you could use the CSS list-style property:
ul{
list-style: square;
}
- Then inside the project folder you download from Frontend Mentor you there is a style guide (style-guide.md). This file includes font-styles, font-sizes and color palettes for the project.
The background color for the preparationtime class is hsl(330, 100%, 98%)
fieldset{
background-color: hsl(330, 100%, 98%);
}
Then the rest of the text in the body except headings use the color hsl(30, 10%, 34%)
body{
color: color: hsl(30, 10%, 34%);
}
I hope these suggestions are helpful! Feel free to mark this comment as helpful if you find it beneficial.
All the best in your coding journey!
