Order Summary component

Hiya,

Don't worry about 'slow' and 'fast', especially if you're starting out. You will improve with speed the more you code, and if you initially take your time than just do that and learn as much as possible in each project.

As for feedback:

I would structure this a bit differently. You can create 2 divs (sections) within the container for the image and the text.

<div class="container">
     <div class="img-container">
     </div>
     <div class="text-container">
     </div>
</div>

This already allows you for a bit more control imo.

You can then follow up by adding padding to the text-container. I saw that you pushed down the .container by adding padding-bottom to your cancel-order-section. This isn't necessarily the best practice.

Padding should be used by a parent to style the content inside of itself. Margin is used to interact with other elements around it.

So if we use padding to add space to the text-container it would make more sense.

.text-container {
    padding: 32px;
}

Everything in text container will now be positioned a bit better.

We can then take care of the other margins you have. Instead of applying them to every other/single element we can do a slightly more systemic approach.

.text-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: center;
    gap: 16px;
}

Now our elements have at least 16px of gap between them. You don't need to set this for every single element, instead just set it for the container (why I suggested the approach initially tbh).

Whilst looking at the design the next thing I spotted is that the first element, heading, has 16px of gap, but the other elements actually have 24px between them. We can fix this easily:

.text-container > *:not(:nth-child(1)) {
    margin-bottom: 8px;
}

So now an additional of 8px will be added to margin-bottom to every element except heading.

I have more tips etc but I decided to make a video on it instead of just typing away here. I'll message you when I've uploaded the video. It should be relatively helpful and should explain the above concepts a bit more easily, especially if you could see all the code.

I have videos on other projects that I cover 'best practices' in. Feel free to check them out as they are frontend mentor projects :)

• Stats Preview Component
• Profile Card Component
• This one is a bit more complicated as I assume some knowledge and I use SASS. NFT Preview Card

I think you should reduce your height a little and other than that it's really nice