QR Code Component

Hello @Mystique9901!

I think i can respond your questions and add some tips.

• How many breakpoint do I need for real life website? Instead of thinking of specific device breakpoints, use them when your design needs it. What i mean is if your design starts to stretch at 700px consider making a breakpoint for said witdth. You can read more about responsive design here.

• Avoid using fixed widths and heights, instead use min-height max-height min-width max-width

• Start with the mobile design first, i find it easier to code.

• You can use the gap property when using flexbox or css grid to give spacing between the elements from the parent, like this:

.container{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

In the code above first we give the container a padding of 1rem on all of the 4 sides (top, right, bottom, left). After we give it space between the image and the in this case h3 with the gap property. this way you can give spacing without having to do it manually in each element.

If you have more questions feel free to reply.

I hope you find it useful! if so please mark it as useful.

Congrats on completing your first project, the code looks good, but I think you should take a look at the design guide provided in the project folder to come up with an output closer to the design output, also try to better center the card