Card component using Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a max-width value. There is no need to style .container, give the background-color you gave to .container to the body.

  Increase the padding value of .qr-code. padding: 1rem Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Give .qr__code-text-area a margin value for all the sides, text-align: center; and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Jeroen Leijnse•1,420

  @jrleijnsePosted almost 2 years ago

  Hey there! Great job completing your first challenge! 🎊

  I have some suggestions for your code that might interest you.

  HTML 📄:

  • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.
  • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to the website frontendmentor.io

  CSS 🎨:

  • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to start learning and using rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

  For more information on this topic, you can read the following article: PX or REM in CSS?

  • To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

  For more information on this topic, you can read the following article: Media queries

  I hope you find my suggestions useful, and above all: the solution you provided is very good!

  Keep it up and happy coding! 😃

  0