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

QR component viewer using vanilla HTML and CSS

Phoebe•30
@Lord-Nickelbottoms
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Question about best practices:

  • When should each unit (em, rem, %, vh/vw and px) be used?
  • Why does auto work on some properties and not on others? Does it depend on the element being a block element and inline?
  • Everything about Aria stuff when it comes to accessibility

Thanks <3

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Carlos Henrique•200
    @devriquesant
    Posted over 2 years ago

    Hello Lord-Nickelbottoms

    Congratulations for completing this challenge!!

    ✏️ After answering your questions, I want to give you some tips and suggestions for this and your future projects ;) ✏️

    • 1. 🚀 Contain your "main" content in a "main" tag:

      • <main> is a semantic element from HTML which provides accessibility and organization for your web page;
      • semantic elements provides detailed info about the contents in your page.
      • Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...
      • To implement this, you should exchange the <div class="card"> for <main> and wrap all the necessary and main content of your page
    • 2. 🌐 Building an accessible web page:

      • There are a lot of users of all kinds around the world! in order to make everyone able to use the program you just made you could provide some accessibility. But how?

      • There are a lot of ways to make it, There are the semantic elements and also the "Aria stuff" that you've said.

      • 2.1. Aria Stuff:

        • Aria properties are used to give additional info about the semantic and accessibility of a webpage content to assistive technology users.
        • There are a lot of aria properties as: aria-label, aria-hidden, aria-expanded, and each one of them creates an exclusive feature to meet with the needs of these users.
      • 2.2. Semantic elements:

        • aria properties are good but should not be overused.
        • They don't override the good practice of using semantic HTML elements
        • For this, get used to write semantic elements in your HTML file to give more accuracy of the things you do and want to give to your users.
      • 2.3. 👍 Your good practices 👍:

        • In your project I see you you've used the alt attribute for accessiblity on the <img> tag
        • Also used an arial-label that with the help of a screen reader, will describe the element to the user.
        • These are real good practices, as they help users to understand what is your page and what is does have!
    • 3. 📱 Building a responsive web page:

      • The use of px unit, to dimension your components in the page, gives it a appearance of static.

      • To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

      • To deeper details, take a look at it

      • 3.1. The units:

        • em and rem: These units are used to define the font-size, margin and the fill of elements, but em is relative to its parent element and rem to the <html> root element
        • %: is used to set a value relative to the parent element, unless the value you set as auto has the position set as absolute.
        • vw, vh, vmin and vmax: vw and vh are units set relative to the viewport's width and height. 1vw and 1vh is 1% of its correspondent viewport. vmin and vmax is viewport's smaller dimension and larger dimension
        • px: as already said, gives a appearance of static, as the webpage has a kind of rule the set the metric in the page sized in pixels, so exchanging between devices, a button element of width 100px will remain with 100px in all devices.
      • 3.2. Auto:

        • Yes, not all properties can be set as auto, and the type of display the element can affect it.
        • Simply, the auto key-word will tell the browser to calculate the property based on its parent.
        • If a element has a display:block, width and height as auto will fill all the the available space.
        • If a element has a display:inline, width cannot be set explicitly as it's calculated based on the element content, and height with auto value will take the default height.

    Sorry about all this stuff, really big, isn't it?

    By the way, your project is really good and keep coding, I'm sure you will discover new things and become even better

    Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)

    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