Responsive QR Card Component

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 28 days ago

  Hello, congrats for giving this challenge a try!

  Here are a few things you may want to check before moving to other challenges:

  • You need to have a <main> landmark. It indicates where the main content of the webpage is.
  • You should read about how to write good alt text. There are great resources for this on the Discord. For example, you should avoid using words like "image" in an alt attribute. It needs to describe the image for users who cannot see it, as they already know it's an image.
  • Remove the width and height attributes you have set in the HTML on the image. In some cases, the image cannot adapt to fill its parent width and will stay at the 288 value you have set.
  • It looks like you are confused about when to use margin and padding. Here is a good article about it: https://fedmentor.dev/posts/padding-margin/.
  • It is a good practice not to style your HTML elements directly but to use a class on elements you want to style. Try to keep the specificity at the lowest level and only increase it when really necessary.
  • Having an <h2> for the title is fine here as this is a single component and not a full page. If you put this component in context it would probably sit on a larger page with other components.

  2
• 

  ortiz-antonio•180

  @ortiz-antonioPosted 29 days ago

  Good job making your design responsive! Maybe you can improve its appearance by viewing the sizes in the Figma design and adjusting the following:

  • Padding
  • Border radius
  • Font styles

  If you want to improve the quality of the code, follow BEM or another CSS methodology.

  0