QR Code Component with HTML and CSS

Community feedback

• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

  Replace<div class="container">with the main tag, <p class="bold"> with <h1>and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .container on the page using flexbox, add min-height: 100vh to the body. There is no need for align-content in the body. flexbox has no align-content rather its grid that has align-content.

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

  there is no need for position absolute and it properties in .container to center .container.

  Give .container a padding value for all the sides and give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  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

  There is no need to us p

  10

  Marked as helpful
• 

  Sandro•1,150

  @sandro21-glitch

  Posted over 2 years ago

  Hi Erkatia

  Here are a few suggestions for improvement your code

  Use semantic HTML elements:

  Instead of using a div with a class name "container", you can use a section element to wrap the QR code and text content, as it is a stand-alone content block that has a distinct purpose.

  Add alt text to the QR code image:

  For accessibility purposes, it is important to add a descriptive alt text to the QR code image. This will be read by screen readers to provide information to visually impaired users.

  Consider using a CSS reset or normalization stylesheet: This will help ensure that the styles of your website are consistent across different browsers.

  Use CSS variables:

  Consider using CSS variables to store values that are used multiple times in the stylesheet, such as font family, font size, and colors. This makes it easier to update the styles across the whole stylesheet if needed.

  Minimize the use of absolute positioning:

  absolute positioning can make it difficult to maintain the layout of a page. Consider using other layout techniques, such as flexbox, to achieve the desired layout.

  Consider using rem units for font sizes: rem units are relative to the root element (HTML), and make it easier to maintain consistency in font sizes across the page.

  Happy Coding

  10

  Marked as helpful