QRCode page using flex box and text shadow techniques

Community feedback

• 

  T

  Gwenaël Magnenat•1,270

  @gmagnenatPosted 2 days ago

  Hello, congrats for giving this one a try !

  There is a nice list of concepts that needs to be understood on this challenge. It will help greatly later to build responsive solutions with more complex layouts.

  • You need to add a <main> landmark to indicate the main content of your page.
  • alt tag should not contain words such as "Image" it is already announced by screenreader as an image. It should describe the image and it's purpose. So here it's a QR Code and the purpose is "going to frontendmentor io".
  • As this is a small component that would sit on a larger project it will probably not use an h1 as the main page title. You can use an h2 here and ignore the automatic validator.
  • Use a modern css reset at the top of your stylesheet in all your projects. Look up for Andy Bell or Josh Comeau, they both have great ones. Use the one your prefer and try it out. It will help you deal with browser inconsistencies and you will start your css on a strong foundation.
  • use a min-height instead of a fixed height on your main class
  • use a max-width in rem on your qrCode class, and remove the height.
  • remove the width and height on the image. It is contained in the card so you can just have a small padding on the card and that's all.
  • never use pixels for font-sizes https://fedmentor.dev/posts/font-size-px/

  I hope you find something helpful in these comments to improve your solution and your next ones.

  Don't hesitate to reach out on discord with your questions.

  Happy coding !

  0
• 

  0prii0•20

  @0prii0Posted 2 days ago

  good one but have not followed the colors for heading and paragraph text.

  0