Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

QR Code Component Solution with HTML and CSS

Geert Broeren•10
@geertbroeren
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)
Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,040
    @MelvinAguilar
    Posted over 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have other suggestion about your code that might interest you.

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

      screenshot-imgur (landscape mode)📸

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
  • Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 2 years ago

    Hey there! Great job completing your first challenge! 🎊

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

    HTML 📄:

    • Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.
    • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to the website frontendmentor.io

    CSS 🎨:

    • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

    For more information on this topic, you can read the following article: PX or REM in CSS?

    • To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

    For more information on this topic, you can read the following article: Media queries

    I hope you find my suggestions useful, and above all: the solution you provided is very good!

    Keep it up and 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

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