QR Code Component using HTML, CSS and Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,120

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have one suggestion about your code that might interest you.

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    Currently the body element has a margin of 8px which generates a scrollbar on desktop devices.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  MDelforge•40

  @MDelforgePosted almost 2 years ago

  @MelvinAguilar Thanks ^^ !

  0
• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello there 👋

  Great job on completing the challenge

  HTML 📄

  • alt attribute of the <img> tag should not contain hyphens or underscores, it should be humanly understandable text

  CSS 🎨

  • Use relative units like em or rem for margin, padding, width, and height. and most preferably rem for font sizes. avoid using px which is an absolute unit

  • to exactly center the card to the middle of the page, follow these methods below,

  1. remove margin: 125px auto; from the .box element. And add the following codes to the body tag,

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  I hope this was useful 😊

  HAPPY CODING

  Marked as helpful

  0

  ---

  

  MDelforge•40

  @MDelforgePosted almost 2 years ago

  @Mr-jaw Thanks for the feedback!

  0