QR code using HTML and CSS (Flexbox)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have a few suggestions in addition to the ones already given.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  CSS 🎨:

  • Setting a defined height for the card component is not recommended (height: 400px;). The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

  • Centering an element with position: absolute would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent". You can use Flexbox or Grid to center your element. You can read more about centering in CSS here 📘.

  • You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

    Popular CSS resets:

    • Normalize.css
    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Christine•70

  @christinepallonPosted almost 2 years ago

  @MelvinAguilar This is all so great, thank you! I'll definitely read up a bit more on CSS resets. Cheers!

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Add the alt attribute alt=" " to the img tag to fix the error issue. Replace<div id="card">with the main tag, <div id="title"> with <h1>, <div id="subtitle"> with <p>and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  The value for the alt is the description of the image.

  Increase the width of #card for it to be equivalent to the width of the design. there is no need for a height value in #card, replace the height with a padding value for all the sides. #card{ width:320px; padding:15px;}

  Give the img a max-width of 100% instead of a height and width value.

  To center #card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center #card on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center #card on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Christine•70

  @christinepallonPosted almost 2 years ago

  @Hassiai This comment was super helpful, thank you! I need to get in the habit of using rem or em now that I'm starting to actually build projects :) Appreciate all of this!

  1