QR code component solution using flexbox

Hello there 👋. Good job on completing the challenge !

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

HTML 🏷️:

• The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users.

CSS 🎨:

• The width: 100vw property in the main tag is not necessary. This will create a horizontal scrollbar on some devices.

• 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.

• Do not use overflow: hidden on the body element, this will prevent scrolling on some devices. ⚠️

• In this challenge, a media query is not necessary. If you want to create a responsive component, use max-width instead of width, add some margin and remove its height. Let the content determine the height of the component.

  .kartu {
      /* position: relative; */
      /* height: 600px; */
      /* width: 400px; */
      max-width: 400px;
      margin: 1rem;
  }
  
  @media screen and (max-width: 720px) {
    .kartu {
      /* width: 90%; */
      /* height: 550px; */
    }
  }
  

• In the image, it is not necessary to use a height or flex. When using width: 100%, the height adjusts automatically

  .kartu > img {
      /* flex: 2; */
      border-radius: 15px;
      /* height: 100%; */
      width: 100%;
  }
  
  @media screen and (max-width: 720px) {
    .kartu > img {
      /* height: inherit; */
    }
  }
  

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

Happy coding!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HEADINGS ⚠️:

• And, This solution generates accessibility error reports due to lack of level-one heading <h1>

• Every site must want at least one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!