Solution Recipe page

Hello, @xStephx! Let me share some helpful suggestions with you. Here are some key points to keep in mind:

I. HTML Structure: Remember to properly structure your HTML documents using tags like <main>, <article>, <section>, <header>, <footer>, and <nav>. These elements enhance accessibility and maintainability.

II. Heading Order: As @abdellah-abadou mentioned, maintaining the correct order of headings (from <h1> to <h6>) is crucial. It ensures semantic clarity and assists screen readers.

III. Avoid Nesting <p> Inside <li>: Nesting <p> tags within <li> tags can lead to unexpected behavior. It’s unnecessary and can cause issues down the line.

IV. Simplify CSS Selectors: Whenever possible, use element selectors to avoid overcomplicating your code. For instance, if you’re targeting a <th> element with the class “custom-th,” consider using th {} directly.

V. Custom Properties (Variables): Use custom properties (CSS variables) wisely. If a variable isn’t needed, like in the case of --font-wght-700: 700, opt for a direct value, such as font-size: 700.

VI. Bootstrap Usage: While learning and using Bootstrap is valuable, focus on mastering the basics first. Bootstrap can come into play as you advance in your learning journey.

VII. GitHub Documentation (README.md): Invest time in creating clear and informative README files for your projects. Following the Frontend Mentor blueprint is a great approach. Good documentation makes you a better developer and helps others understand your work.

VIII. Meaningful Commit Titles: When committing changes, provide descriptive titles. Instead of generic titles like “Update style.css,” opt for specifics like “Style nutrition table.” Clear commit messages benefit both you and your future collaborators.

Remember, feedback and networking is essential for our growth. Keep up the excellent work, and I wish you all the best on your coding journey!

It is best to write the heading elements in the correct order (h1 -> h6),

The code is cleanly written, I learned a lot from it ​

Is that harder if we don't use css Frame work (BootsTrap)? Because using without framework ,it made me feel bad because of consuming more time & it doesnt feel as similar as urs (looking similar) and i have to make lots of changes in every section.

can u help me out :

• { margin: 0; padding: 0; box-sizing: border-box; }

body {

background-color: hsl(30, 54%, 90%);

}

.container { max-width: 50rem; height: auto; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2.2rem; border-radius: 8px; }

img { width: 100%; border-radius: 8px; }

.prep-time { background-color: hsl(330, 100%, 98%); padding: 1.5rem; border-radius: 8px;

}

.prep-time ul { padding: 1.2rem; }

.prep-time span { font-weight: bold; }

.ingredients { margin-top: 1.6rem; border-bottom: 1px solid; }

.ingredients ul { padding: 1rem; }

.ingredients ul li { padding: 0.6rem; }

.instruction { border-bottom: 1px solid; margin-top: 1.6rem; }

.instruction ol { padding: 1rem; }

.instruction ol li { padding: 0.6rem; }

.instruction ol span { font-weight: bold; }

.nutrients{ margin-top: 1.6rem;

} .nutrients p{ padding: 1rem 0 1rem 0;

} .nutrients table{ border-collapse: collapse;

width: 100%;

} .nutrients td { padding: 0.6rem ; text-align: left; border-bottom: 1px solid #000000; } .nutrients span{ font-weight: bold; } .nutrients table tr:last-child td { border: none; }

my design get attached and i can only see 70% of the length of the website , it doesn't move up. i checked ur code but my code is bit different so i was unable to get it .

html

                <h2>Instructions</h2>
                <ol>
                    <li><span>Beat the eggs</span>: In a bowl, beat the eggs with a pinch of salt and pepper until
                        they are well
                        mixed.
                        You can add a tablespoon of water or milk for a fluffier texture.</li>
                    <li><span>Heat the pan</span>: Place a non-stick frying pan over medium heat and add butter or
                        oil.
                    </li>
                    <li><span>Cook the omelette</span>: Once the butter is melted and bubbling, pour in the eggs.
                        Tilt the pan to
                        ensure
                        the eggs evenly coat the surface.
                    </li>
                    <li><span>Add fillings (optional)</span>: When the eggs begin to set at the edges but are still
                        slightly
                        runny in the
                        middle, sprinkle your chosen fillings over one half of the omelette.</li>
                    <li><span>Fold and serve</span>: As the omelette continues to cook, carefully lift one edge and
                        fold it over
                        the
                        fillings. Let it cook for another minute, then slide it onto a plate.
                    </li>
                    <li><span>Enjoy</span>: Serve hot, with additional salt and pepper if needed</li>
                </ol>
            </div>
            <div class="nutrients">
                <h2>Nutrients</h2>
                <p>The table below shows nutritional values per serving without the additional fillings.
                </p>
                <table>
                    <tr>
                        <td>Calories</td>
                        <td><span>277kcal</span></td>
                    </tr>
                    <tr>
                        <td>Carbs</td>
                        <td><span>0g</span></td>
                    </tr>
                    <tr>
                        <td>Protein</td>
                        <td><span>20g</span></td>
                    </tr>
                    <tr>
                        <td>Fat</td>
                        <td><span>22g</span></td>
                    </tr>
                </table>

               


            </div>
        </div>
    </div>

</main>

nice wooorrrkk, I will give it a try and try to make it as good as yours.

well done 👏

good work