Design comparison
Solution retrospective
Please review the code
Community feedback
- @osmanbay90Posted 9 months ago
Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML:
1. Heading Elements: Ensure you're using heading elements
(<h1>, <h2>, etc.)
appropriately to provide a clear hierarchy for your content. For instance, you could consider using<h2>
elements for subheadings like "Preparation time," "Ingredients," "Instructions," and "Nutrition."2. Article vs. Section: You've used
<article>
elements for each section of content. While this isn't incorrect, consider whether these sections represent standalone, independent content that could be syndicated or bookmarked separately. If not, you might want to use<section>
elements instead, which are more generic and represent thematic groupings of content.3. Alt Attributes: Ensure all
<img>
tags have appropriate alt attributes to provide alternative text for screen readers and in case the image fails to load.4. CSS Classes: Review your CSS classes to ensure they accurately reflect the content they're styling. For instance, in your
<article>
elements, the class "Instructions" seems unnecessary since you already have "Instructions" as part of the class name.5. Use of
<p>
for Single Lines: You're using<p>
tags for single lines of text in some places. While this isn't incorrect, consider whether a<p>
tag is semantically appropriate for these instances. If the text doesn't represent a paragraph of content, you might consider using<span>
or<div>
instead.Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! š
Marked as helpful0
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