Skip to content
Submitted 10 months ago

Recipe page using HTML and CSS

Ravi Bele•170
@RaviBele
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I think CSS could be more optimized. Need feedback on CSS file.

Community feedback

  • solvman•1,650
    @solvmanPosted 10 months ago

    Hi @RaviBele 👋

    Very well done 🤩 Congratulations 🎉

    Your use of h tags is excellent 👍. Remember to use landmark elements to structure your HTML document. Landmarks are sections of a page that can be identified by assistive technologies, allowing users to understand the page's structure and navigate it more easily. They are typically defined using certain HTML5 sectioning elements or ARIA roles. Using more semantic HTML instead of plain <div> (non-semantic) elements is better for better accessibility. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically. The <article> element represents a complete and self-contained piece of reusable content, such as a newspaper article, forum post, blog post, or recipe. 👌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

    Another point I'd like to mention is that your text is way too big. Try to use REM units for font size, padding, and margin. If it is not mentioned, the safe unit is 1rem for body font size.

    I'm afraid your design is not responsive at all. Please don't hard set the width of containers; instead, use min/max height and let it flow. Remember, HTML documents are pretty responsive by default; we do not need to stay in the way of it by hard-coding widths.

    I highly recommend checking out the newly published article "A practical guide to responsive web design" and redoing your project.

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

    Marked as helpful
    1
    Ravi Bele•170
    @RaviBelePosted 10 months ago

    @solvman Thanks for the review, I have made the changes to make the webpage responsive, and tried to use <article>, <section> tags to make html doc more organized and readable. please share feedback or improvements that I can page more accurate.

    1

Please log in to post a comment

Log in with GitHub

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