Qr Component design using just CSS and Html

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <section> with the main tag, <h3> with <h1> 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 style the section and .blue

  To center .container on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value and a font-color of hsl(220, 15%, 55%); for the faded color.

  For a responsive content which wont require a media query for this challenge,

  • Replace the width in .container with a fixed max-width value and the height with a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Opeyemi Akinwumi•70

  @OpeyemiAkinwumiPosted over 1 year ago

  @Hassiai Thank you, i really appreciate

  0
• 

  Tobenna•610

  @tobezhanabiPosted over 1 year ago

  hi Opeyemi You did a nice job. Congratulation on submitting a working task. 🎉🎉

  Here are a few suggestions to the issue with your solution.

  Work on HTML

  You should replace the <section> with the landmark <main> and <div class="attribution"> with <footer> this way your site gets accessibility. It is not important for this fragment of a site, but by making it in a habit, you can easily build crawl-able site.

  Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

  Heading

  Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.
  

  You should always have h1 tag on your site, and they should follow the hierarchical order. i.e. h1> h2> h3 till h6

  Overall, you did a fantastic job,

  happy coding

  0