QR Code Challenge.

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 days ago

  Hey, great work!

  Here are some tips to improve your solution even more:

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  • The <footer> must be outside of the <main>, as they are distinct landmarks. Your HTML structure should look like the following:

  <main>
    <div class="card">
      <img>
      <h2>
      <p>
    </div>
  </main>
  
  <footer>
    <p>
  </footer>
  

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • Add flex-direction: column on body - the default value of flex-direction: row will push the footer besides the <main>.

  • Remove the margin on the card. It is already centered using Flexbox.

  • Well done for having a max-width on the card! It is though a little narrow, and it should be in rem. Around 20rem(equals 320px) works well.

  • Since all of the text should be centered, I would set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • On the image, add display: block, height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  0
• 

  Daniel Knight•20

  @DKulanPosted 4 days ago

  border radius should be changed to accurately reflect the design but it's hard without figma dev mode :(

  0

  ---

  

  KapteynUniverse•2,220

  @KapteynUniversePosted 4 days ago

  @DKulan On desktop app, when you click an item you can see the border radius as corner radius under the appearance, no need to dev mode.

  2

  

  Daniel Knight•20

  @DKulanPosted 4 days ago

  @KapteynUniverse oh, thanks for the tip! Is there anyway to measure the box shadow properties as well without dev mode?

  0

  

  KapteynUniverse•2,220

  @KapteynUniversePosted 4 days ago

  @DKulan Again on the item, there is effects, same place under the appearance, under effect, it should show drop shadow. There is a button left of the drop shadow, when you click it, it will show the box shadow properties. For this challenge for example it says, x = 0, y = 25, blur = 25, color is black and alpha of the color is 4.77%. Alpha is like opacity. With combine these values, box shadow should be box-shadow: 0 25px 25px rgba(0, 0, 0, 0.0477);

  0