Submitted 10 months ago

Recipe Page w/ Vanilla JS & Sass

Michael Johnson•970

@mikej321

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone!

I had my ups and downs with this project. I struggled with the lines after the elements, thinking they were < hr/> tags but I think they were more ::after psuedo-elements. Also, I'm not too sure if the figure element with figcaption were the way to go with this project. I found that method from stack exchange and ran with it. Looking forward to all feedback. Thanks!

Michael

Community feedback

solvman•1,650

@solvmanPosted 10 months ago

Hi @mikej321 👋

Your final result looks amazing! 🤩 Congratulation! 🎉

Very well done! 🎊🎉🚀

I'm afraid your use of figure and figcaption is semantically incorrect. For the exact recommended application and usage, you may consult HMTL5 - Living standard - figure.

It would be best to structure your HTML document using content sectioning elements and headings, such as h1, h2, and h3.

⭐️ Headings: 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

⭐️ Content sectioning: 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

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

Marked as helpful

Michael Johnson•970

@mikej321Posted 10 months ago

@solvman Thank you very much for your kind words and feedback. I read it twice and your motivating words really put a smile on my face. Thanks for the articles as well...I will go through them and correct my mistakes. This was definitely the hardest 'newbie' challenge I've ever done, haha. Have a great day and thanks again!

Michael

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