QR code component main

Community feedback

• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    display: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  1

  ---

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Bader-Idris

  You may have suggested using an alternate method for smaller projects like this. However, the flexbox is already used in this solution. As the size of the project increases, it can be more efficient to use flexbox or/and grid for layout purposes. I think you can recommend this method for those who cannot center this card :)

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  In order to fix the accessibility issues:

  • You need to replace <div class="qr-container"> with the <main class="qr-container"> tag and <div class="attribution"> with the <footer class="attribution">. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <div class="first-text">Improve your front-end skills by building projects </div> element with the <h1 class="first-text">Improve your front-end skills by building projects </h1> element.

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  Hope I am helpful. :)

  0
• 

  khushboo khatwani•1,070

  @khushi0909Posted over 1 year ago

  1)image shoult always have alt="some description".some description about image should always be there for accessibility reasons

  https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html

  2)Read about h1 tag its the most important and every website should have at least one https://www.semrush.com/blog/h1-tag/

  3)Read about semantics html tags and use it ,that's imp

  4)you can read more about implementing responsiveness such as media queries ,will help you in future

  All the best

  0