qr-code-component using HTML and CSS

Hi Esther. First of all, great job! 👏

The answer you are looking for is "practice".

Cliche? Lol, I know, but that's actually it. But still, here are some tips:

• Generally, the idea of breakpoints is the points (widths & sometimes heights) at which your website's layout becomes visually imbalanced. So they should be created in relation to your website's content not necessarily screen sizes. But this takes time to master. So here's what you could do:

There are traditional breakpoints that work for most layouts:

• 480px { mobile }
• 768px { tablet }
• 1024px { small screens, laptops }
• 1200px And above { desktops } (Google for more detailed info)

Now, these breakpoints are not set in stone, but they're popular as they're cover many device widths. So, you could practice with these on projects with minimal layout. As you begin to get the hang of it, you can move on to more complex layouts. With time you would be able to create you own custom breakpoints, relative to the website's content and build cooler stuff 😎

Just practice. I hope this helps.

Yeah, I think it good to know the raw before going for framework as a beginner. Without knowing the raw css code it will be a bit difficult to amend framework code

You should know first the breakpoints of the devices; I advice to start first to know TailwindCSS, It's a framework for styling. Easy to use since the breakpoints are easy to modify.