QR code component challenge

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hello Eleanor Worthington ! Congo 👏 on completing this challenge

  Let's look at some of your issues, shall we:

  • To center the card vertically

  max-height: 100vh;
  display: flex;
  justify-content: center
  align-item: center;
  

  • Add Main tag after body <main class="container"></main>

  • <center></center> tag is depracated HTML tag You can read more about this here You can use <div></div> tag instead

  happy Coding😀

  Marked as helpful

  1
• 

  Tomas Scerbak•720

  @TomasScerbakPosted over 2 years ago

  Hi @Eleanor-hn,

  let's start with HTML issues:

  1

  <center></center> tag is depracated HTML tag You can read more about this here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

  You can use <div></div> tag instead

  2 Your HTML should always be structured with semantic tags so that browser can better read structure of your webpage:

  <header></header> <nav></nav> <main></main> <section></section> <footer></footer> In this particular case you only need <main></main> tag for main content which is card and you can also use <footer></footer> tag and move there your attribution <footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Eleanor Worthington</a>. </div> </footer>

  you can find more info here: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

  3 your webpage should contain heading tags. You can replace p tag with h1 tag for "Improve your front-end skills by building projects" sentence and give the h1 element specific font -size.

  4

  <figcaption> tag should be used on images with description. You can replace this with div as well and give it class

  5 never use inline styles to style your website. It's very bad practice. You should only apply styles in your css files.

  From the CSS

  your card is not visible on mobile devices. You should use mobile first approach. Try to avoid using specific widths and heights.

  you should be able to fix your card position by:

  #bodywrapper { height: 100vh; display: flex; justify-content: center; align-items: center background-color: hsl(212, 45%, 89%); }

  if FLEX is something new to you, I highly recommend learning it as well as GRID as these two properties are most crucial when it comes to webpage layout.

  Keep up the good work and have fun! :)

  Marked as helpful

  0