Responsive recipe page

Hi @Alex-Archer-I

 But what is the need of two separate `card` and `component` divs

I did not understand this question :/

But regarding the section div's.. I'm not really sure, It's a habbit of mine. Since I've mostly used react at work, I usually have a component like this

const Card = ({ title, children }: CardProps) => {
    return (
         <div>
            <h2>{title}</h2>
           {children}
        </div>
    )
}

const SomeContent = () => {
    return (
         <div className="some specific class for this component flex-box or grid etc">
            /* There can be multiple components here etc, like 2 lists or something*/
        </div>
    )
}

const Outcome = () => {
    return (
         <Card title="">
                  <SomeContent />
         </Card>
    )
}

which would be html of:

                <section id="ingredients" class="ingredients">
                    <h2>Ingredients</h2>
                    <div class="triple list">
                        <ul>
                            <li>2-3 large eggs</li>
                            <li>Salt, to taste</li>
                        </ul>
                        <ul>
                            <li>2-3 large eggs</li>
                            <li>Salt, to taste</li>
                        </ul>
                        <ul>
                            <li>2-3 large eggs</li>
                            <li>Salt, to taste</li>
                        </ul>
                    </div>
                </section>

Think of it like having a box (the card) with smaller compartments inside it. In this case unnecessary divs can be removed for sure :D Since I'm a backend dev I'm still learning the best practices etc as I go :D I've barely touched front-ends but yeah. :D

Yeah, I'm using a css reset by Josh W Comeau

@RobertsPeirags

Oh, I meant that you have .container element and .card element inside it, end only than the content goes. Also you wrap every list into div while you can style it directly. So, a bit extra divs =)

But since you use React, I can see why. By the way, you probably already know it, but you can use react components:

const Card = () => {
    return (
        <>
            <h1>Title</h1>
            <p>Text</p>
            <button>Button</button>
        </>
    );
};

The only thing, that you can't add classes to them, only to inner content.

@Alex-Archer-I

I’m using <div class="container"> to center and manage the width of different sections, keeping everything aligned and consistent. In this project, it's just one component where this could be ignored, but I usually stick to this standard practice for building full websites.

Each .container can be reused and styled differently, which helps with layout and design consistency.

@RobertsPeirags

Oh, yeah, now I get you. Cool, I used this practice earlier too =)