Submitted almost 2 years ago

QR code Solution

Agil• 180

@Agil-Saputra

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Which should I add to make this component better? Should I use framework to make this or just plain html/css?

Community feedback

Travolgi 🍕• 31,420

@denielden

Posted almost 2 years ago

Hello Agil, You have done a good work! 😁

Some little tips to improve your code:

add main tag and wrap the card for improve the Accessibility
also you can use article tag instead of a simple div to the container card for improve the Accessibility
add descriptive text in the alt attribute of the images
remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

Muhammad Adam• 210

@Muhammad-adam778

Posted almost 2 years ago

"Which should I add to make this component better? Should I use framework to make this or just plain html/css?".
You don't need to use any framework, this project is very simple, pure css and html will do the required.
But there is some points you need to fix to solve the accessibilty problems:
You don't need all of these divs.
You need to use semantic html elements like <main>, <article> if you want to know how, please check this code below :

<body>
    <main>
        <article class="container">
            <img src="images/image-qr-code.png" alt=""></div>
            <h1>Improve your front-end skills by buillding Projects</h1>
            <p>Scan the QR code to Visit Frontend mentor and take your Coding to The next level</p>
        </article>
    </main>
  </body>

If you want to know about semantic elements check this article Semantic HTML Elements.
I hope you find this helpful.

Please log in to post a comment

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