Frontend Mentor | Solution Recipe page coding challenge solution

@wojtekbrejnakPosted 9 months ago

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!

Marked as helpful

6

Stefan Bojkovski•640

@xStephxPosted 9 months ago

@wojtekbrejnak thanks for the feedback! I have read all the points where you have explained them precisely and clearly. I will use these suggestions in future projects. Thanks for taking the time to make these suggestions. if you have anything else to write, feel free to write to me, I'm open to new experiences!

1

Abdellah Abadou•270

@abdellah-abadouPosted 9 months ago

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

Marked as helpful

2

Stefan Bojkovski•640

@xStephxPosted 9 months ago

@abdellah-abadou thanks for your suggestion about order headings, I will practice in future projects. I am glad that you learnt from code of this project. if you have other suggestions feel free to text me!

0

vardhanf•80

@vardhanfPosted 5 months ago

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.

1

Stefan Bojkovski•640

@xStephxPosted 5 months ago

@vardhanf thanks for feedback! I think if you know good css, you can use framework, yeah it easier with framework and save time, but it is better to make better base knowladge with just css, because it is easier to understand later every framework. That is diffirence, but with practice you will be better. If you have other questions feel free to text me!

0

Namaste AR•100

@mrankitwithcodePosted 6 months ago

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

<main> <div class="container"> <img src="/images/image-omelette.jpeg" alt=""> <div class="recipe"> <h1>Simple Omlette Recipe</h1> <p>An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p> <div class="prep-time"> <h3>Preparation Time</h3> <ul> <li><span>Total</span>: Approximately 10 minutes</li> <li><span>Preparation</span>: 5 minutes</li> <li><span>Cooking</span>: 5 minutes</li> </ul> </div> <div class="ingredients"> <h2>Ingredients</h2> <ul> <li>2-3 large eggs</li> <li> Salt, to taste</li> <li>Pepper, to taste</li> <li> 1 tablespoon of butter or oil</li> <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li> </ul> </div> <div class="instruction">

                <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>

1

Stefan Bojkovski•640

@xStephxPosted 6 months ago

@mrankitwithcode thank you that you ask me for help!

I think you can fix that with this code:

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: hsl(30, 54%, 90%);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
}

.container {
    display: flex;
    flex-direction: column
    max-width: 50rem;
    padding: 2.2rem;
    border-radius: 8px;
    overflow-y: auto; 
    background-color: white;
}

If you have any other question, feel free to ask it!

Happy Coding!

1

Namaste AR•100

@mrankitwithcodePosted 6 months ago

i used that but it was not working but i got the solution , i was using position absolute to do center that , when i removed that i got satisfactory answer .anyway thanks for your valuable time to see the code and replying hope for good solutions ahead@xStephx

1