QR code component attempt 1

Community feedback

• 

  Mohamed Ehab•350

  @MOHAMED-EHAB-DEV

  Posted about 3 years ago

  Hi @WickedBlack

  There is a problem: In index.html line 30 change the code to:

  <img src="./image-qr-code.png" alt="Qr Code">
  

  to be the image seen in the website

  I have some suggestions:

  1. Make The Code Semantic by put in the div with className attribution this code to be semantic:

  <footer class="attribution">
      <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.</p> 
      <p>Coded by <a href="#">Wicked Black</a>.</p> 
    </div>
  

  and put this code in the div with className container to be semantic:

  <main class="container">
      <article class="card">
        <img src="images\image-qr-code.png" alt="Qr Code">
        
        <h2>Improve your front-end skills by building projects</h2>
        <figcaption> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</figcaption>
      </article>
    </div>
  

  2. remove the style tag in the head tag

  3. to be the card in the middle of the page use the following code:

  body {
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem; /* separation between the card and attribution */
    min-height: 100vh;
  }
  

  10

  Marked as helpful
• 

  AgilitiesZ•310

  @phichayut-pak

  Posted about 3 years ago

  Hi! Congrats on your first project submission! 🎉🎉 Here are some suggestions from me:

  1. Check your image if it works when your website is deployed. From what I've seen in your code, you assigned the wrong path in <img> tag. How you can fix is to change it to <img src="./image-qr-code.png" alt="Qr Code">

  2. Sizing doesn't matter that much in here. But if you really want to make it challenging, it's easier for you to buy premium since you'll get an access to figma design which is more accurate than jpeg/png image.

  3. From your second question, I would recommend you implement JavaScript to make it interactive as you want user to hover, the qr code will scale up and background will get blurred.

  4. Try to make it to the center by making use of flexbox, it's one of the important features in css.

  5. Even though you're trying to make the qr code scales up on hover, but it might be a bit big. You might want to scale that down. Moreover, when user quits hovering the qr code, it immediately quits the scaling. You should try using transition on this.

  Happy Coding 👨‍💻👨‍💻

  10

  Marked as helpful