Submitted 9 months ago

media queries, CSS Flexbox.

Ruben•210

@klabruben3

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

solvman•1,650

@solvmanPosted 9 months ago

Hi @klabruben3 👋

Very well done! 🎊🎉🚀

I like how you properly use h1, h2, h3. Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections; h1 should be followed by h2 and so on. You may read more about it in HTML - Live Standard - Headings

Use should look into using more semantic HTML instead of plain <div> elements for better accessibility. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically. You may use the <article> element to wrap the card. Consider wrapping everything with the <main> element. For example:

<body>
    <main>
        <article class="main-container">
            <img .../>
            <h1>Simple Omelette Recipe<h1>
            <p>...</p>
            <section>
                <h2>Ingredients</h2>
               ...
            </section>
            <section>
                <h2>Instructions</h2>
                ...
            </section>
            <section>
                <h2>Nutrition</h2>
                ...
            </section>
        </article>
    </main>
</body>

You may read more about it in:

⭐️ HTML - Living Standard - Sections

⭐️HTML - Living Standard - Sectioning content

Also, I noticed that you use the span element. It is just not necessary and can be removed. Note that span is an inline container used to mark up parts of a text for further styling purposes or apply scripting with JavaScript, for example.

Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍

Marked as helpful

Ruben•210

@klabruben3Posted 9 months ago

@solvman thank you so so much, ill check out the semantics tags and where its most logical to use them. and also for the extra info about heading tags. I didn't know that there was some etiquette to follow when using them.... Otherwise thank you

Please log in to post a comment

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