Flexbox and Basic css

Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hi @ShantanuSutar 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content in your solution instead of using<div class="container">
to improve the accessibility of the website.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information.
- The
<article>
tag specifies independent content. The content of the article tag makes sense on its own and you can put that same article on a separate page and still make sense. You can use the <div> tag instead.
- Instead of using pixels in font size (
font-size: 15px;
in the body), use relative units of measure likerem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
- The
<h1>
element is the main heading on a web page, there should only be one<h1>
tag per page. You can create a <h1> and give it a suitable text:
<h1 class="sr-only">QR Card Component</h1>
The
sr-only
class is a class that you can add to hide content visually but is only visible to screen-readers. More information here.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! 👍
Good job, and happy coding! 😁
Marked as helpful - Use the
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