Solution using css flexbox and Sass preprocessor

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Marco! 👋

  Congrats on completing your first challenge! 🎉

  There are some areas that you can do to improve the solution.

  • I recommend making the blue background fill the entire page. You achieve this by using the body element and set min-height: 100vh so it will always fill the entire page.
  • Also, I suggest simplifying the HTML markup by making the body as the card container and use main element for the card. This way, you can remove all the div and just use main and footer for the HTML markup.
  • The alternative text of the QR code doesn't need to tell that it is an image. It's already an img element so you don't need to tell about it again. 🙂
  • In addition to the previous feedback, I suggest telling the user what is the image for, so alternative text like "QR code for frontendmentor.io" would be good.
  • I recommend only setting the max-width for the card and removing the width. By doing this, not only it allows the card to shrink on smaller screen sizes but also prevent it from becoming too large on wide screen sizes.
  • On mobile landscape the footer is on the card element.

  That's it! Hope this helps.

  Marked as helpful

  1
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="showcase"> instead of <div class="showcase">.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  1
• 

  Raymond Adutwum Agyei•800

  @alosoftPosted over 2 years ago

  @baremarco You've done a greate job with the ui. Here is how you can make html semantic

  • Change the div with the showcase class to a main tag
  • Every html page should at least one h1 tag so change the paragraph to an h1 instead of h2

  1