Skip to content
Submitted 3 months ago

recipe page

jarthurofv•280
@jarthurofv
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think i worked better with divs and flexbox this time. I try to make it responsive without media queries.

What specific areas of your project would you like help with?

Any feedback is more than welcome, i'm always trying to improve. Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Aydan•680
    @AydanKara

    Hey @jarthurofv,

    I just reviewed your HTML code, and I have to say it looks really clean and well-structured! Your HTML structure is well-organized, readable, and follows good coding practices. I can see you put a lot of effort into organizing the layout!

    I will try below to give detailed feedback focusing on semantic HTML, accessibility, and potential improvements.

    Strengths:

    ✅ The code uses semantic elements such as <h1>, <h2>, <h3>, <p>, <ul>, <ol>, and <table>, which improve both SEO and accessibility.

    ✅ The <strong> tags are used to highlight important parts of the recipe, which improves readability.

    Areas for improvement:

    🔹 Use <header> and <main> elements

    • Right now, all content is inside a <div class="container">. Instead, wrap the content in a <main> element to better indicate the page’s main content.

    Example Improvement:

    <body>
  <header>
    <h1>Simple Omelette Recipe</h1>
  </header>
  <main>
    <section>
      ...
    </section>
  </main>
</body>

    🔹 There's an instance where a <h1> is followed by a <h3> without an <h2> in between:

    <h1 class="omelette">Simple Omelette Recipe</h1>
...
<h3 class="preparation">Preparation time</h3>

    • Headings should follow a logical order (h1 → h2 → h3, etc.).

    • Skipping heading levels (e.g., jumping from <h1> to <h3>) can affect accessibility and document structure.

    • Screen readers and search engines rely on headings to understand the content hierarchy. A missing <h2> might make it harder to navigate.

    Here you can read more about of using heading elements.

    🔹 The <div class="separator"></div> element is non-semantic – If this is purely for styling purposes, consider using CSS instead (e.g., border-bottom or margin for spacing).

    🔹 Improve table structure The <table> currently has an empty <th></th> element, which is unnecessary. Also, adding a <caption> would make the table more meaningful for assistive technologies.

    Overall, your code is really well-organized and visually appealing. Just a few small tweaks can make it even better!

    If you want I can also give you Feedback on the CSS code.

    Please if you have any questions don't hesitate to ask.

    Marked as helpful

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