QR code component, i used HTML and CSS and it was quite fun

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  Background 🌆:

  • You should not recreate the background, you used the image desktop-preview.jpg to create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.

    You must use the images desktop-design.jpg and mobile-design.jpg to create your solution.

  HTML 📄:

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

  Alt text 📷:

  Here are some guidelines to follow when writing alt text:

  • The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • Alt text should provide a clear and accurate description of the image's content or purpose. In this challenge, if you scan the QR code you will be redirected to the "frontendmentor.io" website, so a better alt attribute would be QR code to frontendmentor.io

  • Advice for other challenges: Use empty alt text for decorative images: If an image is used for decorative purposes only and does not convey any important information, the alt text should be left empty.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • The width: 100% property in the main tag is not necessary. The main tag is a block element and it will take the full width of the page by default. [1]

  • Use min-height: 100vh instead of height: 100vh. The height property can cause your component to be cut off on small screens, such as a mobile phone in landscape mode. [2]

  • Avoid setting a height to your component and let the content of your component determine the height, don't use heights with percentages as this can cause your text to overflow the component on mobile devices. [3]

  • Setting the image height to 200px creates that elongated shape of the image, you can remove it so that it does not distort. [4]

    main {
        /* width: 100%; */     /*  [1]   */ 
        /* height: 100vh; */   /*  [2]   */ 
        min-height: 100vh;
        /* background-image: url(images/blue.png); */  /* NOTE: This image is not necessary, its only background should be the color "light blue" (hsl(212, 45%, 89%)). */
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-size: cover; */
        background-color: hsl(212, 45%, 89%);
    }
    
    .container {
        /* width: 90%; */
        /* height: 90%; */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        /* background-color: hsl(212, 45%, 89%); */
        /* box-shadow: 2px 2px 20px rgb(0 0 255 / 40%); */
    }
    
    .inner-container {
        width: 20rem;
        /* width: 20rem; */   /* NOTE: Use max-width instead of width, this will make the container card a bit responsive on mobile and set the element's maximum width to 20rem. */
        margin: 1rem;         /* NOTE: Use this to add some space for the container card and the screen edge on mobile devices. */
        /* height: 30rem; */  /*  [3]  */  
        background-color: hsl(0, 0%, 100%);
        border-radius: 30px;
        box-shadow: 2px 2px 20px rgb(0 0 255 / 40%);
    }
    
    .img-container {
        padding: 1rem;
    
        /* NOTE:  This is not necessary, neither to center the image, nor to place it, also you can use padding to add space between the borders and the image.*/
        /* width: 100%; */
        /* border-radius: 30px; */
        /* display: flex; */
        /* justify-content: center; */
    }
    
    .img {
        width: 100%;
        /* width: 90%; */
        /* height: 200px; */      /*  [4]  */  
        /* margin: 1rem; */
        display: block;
    }
    
    @media only screen and (max-width: 800px) {
     .inner-container {
        /* width: 20rem; */
        /* height: 80%; */
     }
    
     .container {
        /* width: 100%; */
        /* height: 100vh; */
     }
    }
    

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Happy coding!

  Marked as helpful

  1

  ---

  

  Ozioma Egole•90

  @Ozioma45Posted almost 2 years ago

  @MelvinAguilar Thanks alot for taking your time to correct and air out your observation

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <p class="head-text"> with <h1> to fix the accessibility issues.

  There is no need to style the main and .container. Give the body the background-color you gave to .container.

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

  To center .inner-container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Replace the height value in .inner-container with a padding value for all the sides. e.g,: padding: 15px

  There is no need to give to give .text-container, h1 and p font wieght values. Give . text-container a font-size of 0.9375rem which is 15px, this will be the font-size of both p and h1.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Ozioma Egole•90

  @Ozioma45Posted almost 2 years ago

  @Hassiai thanks alot for the observations

  0