QR-Code -Component using HTML, CSS.

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

  Some recommendations regarding your code that could be of interest to you.

  • For the color of the screen, you can use the recommended color in the body

  body {
    background-color: hsl(212, 45%, 89%);
  }
  

  • If you use flexbox in the body, you don't need to use margin in the .container to center the card
  • If you want to give the gap between the content and the border of the card, you can use padding
  • If you use max-width instead of width, the card will be responsive.

  .container {
    /* margin: auto; */
    /* background-color: white hsl(0, 0%, 100%); */  /* you need to use white or hsl(0, 0%, 100%); */
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    /* height: 550px; */
    /* width: 350px; */
    max-width: 350px;
    padding: 20px;
  }
  

  • If you want to make the card responsive and the image will be positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:

  img {
    /* margin: 25px 0 0 25px; */
    /* height: 300px; */
    /* width: 300px; */
    width: 100%;
    display: block;
    border-radius: 10px;
  }
  

  Hope I am helpful. :)

  02

  Marked as helpful
• 

  p-a-r-a-s•30

  @p-a-r-a-s

  Posted about 2 years ago

  Congratulations on completing the challenge! 🎉

  I have a few suggestions that might interest you.

  1. You should practice using semantic HTML elements, as semantic HTML clearly defines its content while non-semantic HTML doesn't. There are plenty of reasons to use Semantic HTML. It is really important to use Semantic HTML Learn More About Semantic HTML Here.
  2. So instead of writing <div id="container"> you can use a semantic HTML element <main id="container'>. This should also resolve the accessibility issues you're having.
  3. Also it is important to have at least one <h1> tag in your HTML page. so instead of writing <p class="bold">Improve your front-end <br> skills by building projects</p> you can write <h1>Improve your front-end skills by building projects</h1>. also you can remove the corresponding CSS too which won't be needed except for text-align: center.

  But most of all your solution was awesome! Best of luck for your future challenges.👍

  02

  Marked as helpful
• 

  Fer•3,970

  @fernandolapaz

  Posted about 2 years ago

  Hi 👋, perhaps some of this may interest you:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹Semantic elements: The main content of every document (the whole card in this case) should be wrapped with the <main> tag. And maybe you could consider using the <h1> element for the first sentence of the text.

  🔹The use of <br> is not necessary, the text should wrap according to the width of the card.

  🔹This is a meaningful image and therefore the alt text should give a good description in case the user cannot see it for some reason.

  CSS 🎨

  🔹It is better to use min-height for the body, as using the height might cause the page to be cut off in viewports with small height (such as mobile landscape orientation).

  🔹The card should have a max-width matching the design provided for the desktop version. And the height will be defined by the content, we don't need to set it.

  🔹The images provided are already optimized, it is not necessary to assign them measurements.

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  Please let me know if you disagree with something or if you would like more information on any of these topics.🙂

  Regards

  00

  Marked as helpful