Qr code component using just html and css

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.

  ---

  HTML 🏷️:

  • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  • So resolve the issue by replacing the <div class="qrcard"> element with the proper semantic element <main> in your index.html file to improve accessibility and organization of your page

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Vishal Maurya•500

  @VishalMauryastpPosted over 1 year ago

  Hello 👋,you tried well ,but I'll suggest you how to center a container or <div>.

  • First of all use max-width: __ ; of container or <div> which you want to center.
  • Then Use these css properties into the PARENT <div> ,In your case parent is body.

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

  then It will help you center the qrcode .

  • You can see my solution Just Click Here

  I hope ,It will helpful for you😐

  Marked as helpful

  1

  ---

  

  aksteel08•10

  @aksteel08Posted over 1 year ago

  @VishalMauryastp thank you for the comment I really appreciate it Since I used justify-content: center; do I really need the align-item:center; please bear with me I'm a newbie

  1

  

  Steve•1,170

  @peanutbutterjllyPosted over 1 year ago

  @aksteel08 justify will center the content on the main axis and align will center it on the cross axis. so, when you set display:flex and justify-content, it will center it left and right. align-items will center it up and down.

  I hope that helps and keep up the good work!

  0
• 

  Panji•2,090

  @pperdanaPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

  📌 Add <main> tag as semantic HTML in code

  • The <main> tag is a semantic HTML element that is used to define the main content of a web page.

  • The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

  for example code:

  <main>
    <div class='container'>
      <h1>Article Title</h1>
      <p>Article content goes here...</p>
      .......................
    </div>
  </main>
  

  In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

  I hope you found this helpful!

  Happy coding🤖

  Marked as helpful

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  If you want that this solution is responsive, I recommend some techniques without using media query for this solution

  HTML

  • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  

  CSS

  • After adding them to the HTML, you can add this font-family to the body
  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
  • For the color of the screen, you can use the recommended color in the body

  body {
    /* padding: 10px; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* background-color: lightgrey; */
    font-family: "Outfit", sans-serif;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox in the .qrcard to center the card
  • If you use max-width, the card will be responsive
  • You'd better update padding

  .qrcard {
    /* width: 85%; */
    /* height: 400px; */
    /* display: flex; */
    /* flex-direction: column; */
    /* padding: 5px; */
    /* align-items: center; */
    /* padding-top: 15px; */
    background-color: white;
    max-width: 300px;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

  .images {
    /* width: 90%; */
    /* height: 250px; */
    border-radius: 10px;
    width: 100%;
  }
  

  • You can update texts in this way:

  h3 {
    /* width: 80%; */
    /* margin-left: 10px; */
    /* font-size: 17px; */
    /* margin-left: 10px; */
    /* margin-bottom: 0px; */
    font-size: 20px;
    color: black;
    line-height: 23px;
  }
  

  p {
    /* font-size: 12px; */
    /* width: 70%; */
    color: grey;
    font-size: 16px;
  }
  

  • Finally, if you follow the steps above, the solution will be responsive.

  Hope I am helpful. :)

  0