My first challenge - QR code

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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!

  Marked as helpful

  1

  ---

  

  John Koen•30

  @jlkoenPosted over 1 year ago

  @0xAbdulKhalid Thank you very much for the feedback. I will add those changes and see how it looks.

  0
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  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😄

  Marked as helpful

  1

  ---

  

  John Koen•30

  @jlkoenPosted over 1 year ago

  @NehalSahu8055 Thank you for the detailed reply. I'll have a look at responsive units, haven't used those before.

  1
• 

  Aaryn•130

  @Aaryn-RobinsonPosted over 1 year ago

  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!

  Marked as helpful

  0