Skip to content
Submitted 9 months ago

Funky media queries but otherwise proud enough for first challenge

Rebeka•170
@BekiaD
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

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

.

What challenges did you encounter, and how did you overcome them?

.

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

.

Community feedback

  • solvman•1,650
    @solvmanPosted 9 months ago

    Hi @BekiaD 👋

    Very well done 🤩 Congratulations 🎉

    Great job using <main>👍. 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. Your use of the <article> is incorrect. 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 wrap the recipe card with the <article> element. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically.

    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. I suggest you replace <h3> with an <h2> element for each section, which is the most appropriate for a section heading. 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:

    Another point I'd like to mention is the unit sizing for padding, margin, and font. Try to use REM units for font size, padding, and margin. If body font size is not mentioned, the safe unit is 1rem.

    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. Very strange clipping and squeezing are caused by your hard-set margins. It would be much better if you just set the maximum width for the container and use inline margins to center it. For example:

    .main-container {
    background-color: rgb(255, 255, 255);
    max-width: 600px; 
    margin: 5rem auto; /* 5rem on top and bottom, auto left and right to center */
    padding: 2rem;
    border-radius: 1.25rem;
}

    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! 👍 I hope you find my comments helpful 🫶

    Marked as helpful
    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