My first challenge - QR code

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

body {
min-height: 100vh;
justify-content-center;
align-items: center;
}

• Now remove these styles, after removing you can able to see the changes

.outer {
margin: 20px auto;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

• Remove margins from .outer as this will not dynamically center the card and add min-height:100vh to properly center the card.

• Use Semantics for the proper design of your code.

<main>...</main>
<footer>...</footer>
wrap up `.attribtution` div inside your footer.
</body>

• For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

• Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

• Replace width with max-width to make your card more responsive.

link.

I hope you find this helpful.

Happy coding😄

Good Job, John. Responsive on my end . Id download the design files provided by the platform so you can get the font-sizes and margins.Change the font weight on the paragraph and the text color and its perfect. But this is a great start! Being that it's your first time writing HTML and CSS you will only get better. Good job!