Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html and CSS

@Daodu111

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Aggressive-Mohammed

Posted

Hi Daodu Aisha, congratulations on completing this challenge. Your HTML structure is well-organized and demonstrates a solid understanding of semantic elements. However, here are some recommendations and comments in terms of web development best practices:

  1. Accessibility: Alt attribute: Your <img> tag is missing a proper description for the alt attribute. Providing meaningful alt text ensures accessibility for users relying on screen readers.
<img src="./assets/images/image-omelette.jpeg" alt="Omelette image">

Headings hierarchy: The heading tags (<h2>, <h3>, <h4>) should follow a logical progression. Consider using <h1> for the main heading (e.g., "Simple Omelette Recipe") and maintain a clear structure for subheadings. This enhances accessibility and SEO.

  1. SEO Optimization: Meta description: You can add a meta description for search engine optimization.
<meta name="description" content="A quick and easy omelette recipe, perfect for any meal. Learn how to prepare a classic omelette with optional fillings.">
  1. CSS Best Practices: Avoid inline styles: It's better to move inline styles, such as the ones within ) instead of a table for representing nutritional information.
<dl> <dt>Calories</dt> <dd>277kcal</dd> <dt>Carbs</dt> <dd>0g</dd> <dt>Protein</dt> <dd>20g</dd> <dt>Fat</dt> <dd>22g</dd> </dl>
  1. Performance Optimization: Lazy loading: Use lazy loading for images to improve performance, especially for users with slower internet connections.
<img src="./assets/images/image-omelette.jpeg" alt="Omelette image" loading="lazy">

By implementing these suggestions, your project will align more closely with best practices in accessibility, SEO, and maintainability.

Marked as helpful

1

@Daodu111

Posted

Thank you so much, I’ll definitely check this out. @Aggressive-Mohammed

1
Thomas 60

@TomSif

Posted

nice work :)

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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