Submitted 8 months ago

Responsive landing Recipe page using HTLM and CSS

Nikola Petkovic• 90

@nikolapetkovicdev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I needed a bit more time for this task, probably because I didn't create a proper plan and work sequence. The table at the end and the bottom lines took the most time. Nevertheless, I managed to complete everything. My intention was to make the page identical to the given one. I hope I succeeded in that. Please write to me if there's anything I could have done better or if I made any mistakes. Your feedback would mean a lot to me for further improvement and work.

Community feedback

Justin Green• 2,750

@jgreen721

Posted 8 months ago

Hey, nice work on this! Nailed the recipe-card stylings! I think?? with you giving a hard-value width setting to your body as 1440px then it prevents responsiveness so far as your recipe card staying centered when the screen width is smaller. A quick fix is 'max-width:1440px' and therefore the body will adjust to the view/screen width and should maintain the centering values you've applied to the recipe card. It may then allow you to nix the 80% adjustment as I think percents can be dicey to work in CSS in general but even without that debate, the earlier suggestion should have it so your screen just adjusts with the view-width and just cuts off once its larger than 1440px which I believe is the desired effect. Nice work though! 🙂

Marked as helpful

solvman• 1,670

@solvman

Posted 8 months ago

Hi @nikolapetkovicdev,

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

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

Marked as helpful

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