Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

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

Ozioma Egole•90
@Ozioma45
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Even though i finish the challenge am not really sure i follow the best practices and would really want feedback on the code and result

i would really appreciate correction and opinions

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar
    Posted over 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
  • Hassia Issah•50,390
    @Hassiai
    Posted over 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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub