Submitted 10 months ago

recipe-page-main

Bharath•370

@hsnb5789

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

solvman•1,650
@solvmanPosted 10 months ago
Hi @hsnb5789,

Very well done!

I like your use of <h1> and <p>. These elements are considered semantic HTML. Landmark elements are used to identify different sections of a webpage, which are also integral parts of semantic HTML. You can read more about it here

In short, landmark elements provide a way to structure your HTML and make your site more accessible. Screen readers and other assistive technologies use these elements to offer a better navigation experience.

Here is an example of some landmark elements:

<header> - represents a container for an app header.

<nav> - represents a container for navigation links

<main> - represents the main content of a page. There should be only one <main> per page

<section> - represents a standalone collection of functionality.

<aside> - represents indirect content

<footer> - contains the footer section of a page

There are many more elements; this is just a small excerpt. Every HTML document has to have <main>. Every HTML document should be laid out using the landmark elements. For example:

<body> <footer> <nav> /* Navigational links here */ </nav> </footer> <main> <h1>Main heading</h1> <p>Main paragraph</> <article> <h2>Sub heading</h2> <p>...</p> </article> </main> </body>

As you can see, semantic HTML is a vast topic. It would be good practice for you to review other people's work on the same project and read more about it here. Could you take time and re-do your project according to these standards? It will be a great learning experience.

Congratulation! 🎉 Very well done 👍
Marked as helpful
0

Bharath•370

@hsnb5789Posted 10 months ago

Hi, I need help regarding that small white gap at the bottom, after <div class="attribution"> that I am seeing in the preview, and about the warning that are shown in the bottom of the solution like <All page content should be contained by landmarks> . All the suggestions regarding this query are happily accepted.

solvman•1,650

@solvmanPosted 10 months ago

@hsnb5789

You don't need to center it with Flexbox. The card content is way too big to fit within the viewport anyway. Set background-color on <body>, not <html>... Try something like this:

html {
/* remove background from here */
}

body {
    font-family: outfit;
    background-color: var(--Eggshell);
}

To center the card, apply the necessary amount of top padding and use margin-inline: auto; I see you already have margin: 8rem auto, which is the same thing and should work just fine. I use this trick to set the max and min width and let it adjust based on the viewport's width. You can do something like this:

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
 
    width: max(100vw - 4rem, 320px ); /* width will dynamically adjust from 320px to 700px; */ 
    max-width: 700px;

    /* height: 100; */
    background-color: var(--White);
    border-radius: 12px;
    gap: 1rem;
    /* padding: 40px;  You do not need padding anymore; it is calculated above */
    margin: 8rem auto; /* centers container horizontally */
}

If you still confused by the width: max() trick, this video by Kevin Powell

All of the best wishes 🚀

Marked as helpful

Bharath•370

@hsnb5789Posted 10 months ago

@solvman Thank you for your valuable feedback. I'll utilize this feedback. I'll improve my coding skills by implementing it every challenges and projects. I really appreciate your thoughts in this regard.👍🙂

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