QR-Code Component CSS Layout

Community feedback

• 

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  Hi,

  Good job with the solution! It looks just like the design! Here are some minor suggestions if you want to improve your code :)

  Accessibility

  • You should use HTML landmark elements such as <header><nav><main><footer> because they improve accessibility. In your code you can change <div class="container"> to <main class="container">
  • You should add alt text to <img> because it improves accessibility for users using screen readers.
  • There's no <h1> on the website - it's a good practice to include one. In your code <p class=headline> could be a <h1> element

  Visual aspect

  • I noticed a small bug in your solution. When you open the site on mobile in landscape mode the design gets a little bit broken. You might want to look into that.

  Code

  • You are using px in your project. As per the responsive design best practices you should use rem and em. Here's a nice blog post explaining them.
  • You are using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); to position the elements on the page. I would suggest looking into Flexbox as it makes positioning elements much easier. video tutorial article

  Overall, good job! Let me know if you have any questions

  Keep coding and good luck with future challenges!

  2
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Look great! To fix some issues you need to use h1 tag for the text "Improve your front-end skills by building projects", use main tag instead of div tag where the class is "container" and also add alt="" to the image 🙌🏻

  1
• Account deleted

  I have one suggestion for you to improve your solution little bit

  • I notice to your title/headline of your card you used <p class="headline"></p> instead <h2></h2>. so basically much better used this element <h2></h2> rather than <p></p> element when it comes to the title/headline because h1 - h6 are the recommended element and the <p></p> element are only used if you have a paragraph/sentence to support the title/headline.

  
  // never used <p></p> when it comes to the "headline" because
  // it will affect your SEO
  // (SEO - also known as popularity of your website)
   <p class="headline">Improve your front-end <br/>
   skills by building projects</p>
  
  // DO THIS
  <h2 class="headline">Improve your front-end <br/>
   skills by building projects</h2>
  
  

  1