QR code component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  CSS 🎨:

  • it's important to follow the guidelines provided by the project's style guide. This includes using the specified font and colors to ensure consistency and maintain the intended look and feel of the design.

  • You don't need to add font-family: "Outfit", sans-serif; to each <p>, <h*> separately. Instead, add it to body.

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  • Setting the max-width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width with a fixed unit like 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the max-width property with a vw value.

  • For a responsive and resizable component, consider using the previous max-width for the width and adding padding to avoid border touching the image. Also, set width: 100% for the image to fit the size of the component.

  • Setting the element to flex doesn't add much value unless you use gap to provide spacing. If you don't use gap, you can keep your element without using flexbox.

    .wrapper_img_content {
      background-color: white;
      border-radius: 23px;
      max-width: 320px;
      padding: 20px;
    
      /* padding: 4vw; */
      /* display: flex; */
      /* flex-direction: column;; */
      /* align-items: center;; */
      /* width: auto;; */
    }
    
    .img_content {
      max-width: 100%;
      border-radius: 2vw;
    
      /*max-width: 70vw;*/
      /*margin-bottom: 3vh;*/
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello @devBayu!

  Your project looks very good!

  I see that you got a lot of help already, so I'll just give you a minor suggestion:

  • You can add the same border-radius value both for the card and the image. This will make your project look even closer to the original design. The img and the card borders match in the original, and if you do that, yours will too.

  I hope it helps!

  Other than that, I think you did a great job!

  Marked as helpful

  0
• 

  Abdulrahman Zaki•330

  @aazs-eduPosted 11 months ago

  Your HTML and CSS code looks well-structured and clean, and it appears that you've put effort into creating a responsive design.

  • Suggestions for Improvement:

  1. change .container {background-color: aqua;} to .container {hsl(212, 45%, 89%);}
  2. change .title_card {font-size: 1.2rem;} to .title_card {font-size: 1.375rem;}

  Overall, great work!

  Marked as helpful

  0