Html and css

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  There is no need to give .card a height value. give the img a max-width of 100% instead of a width. For a responsive content which wont require a media query for this challenge, replace the width in .card with a max-width. max-width:20rem.

  Give .text-div 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 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! 😃

  Marked as helpful

  0