Submitted about 1 year ago

QR-CODE-Project

#sass/scss

AnakonStar• 40

@AnakonStar

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like to know if my code is good enough to be hired, like, the correct use of tags and the way I positioned them.

Community feedback

Yash Joshi• 450

@yashgjoshi20

Posted about 1 year ago

Hey well done for completed this challenge😁

I have some suggestions to help you to improve your solution :

You should add an <main> tag after body and before the div tags.
The <main> tag specifies the main content of a document.
You should put the <div class="attribution"> outside the <main> tag
Then replace the <div> tag by semantic tag <footer>
footer can contain informations about author, copyright etc.

HTML

<body>
    <main>
    ....
    </main>

    <footer class="attribution">
    </footer>
</body>

I hope you'll find this helpful, and your solutions is really good. 😌

Marked as helpful

Ecem Gokdogan• 9,380

@ecemgo

Posted about 1 year ago

Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:

You need to replace <div class="qr-container"> with the <main class="qr-container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="qr-title">Improve your front end skill by building project</p> element with the <h1 class="qr-title">Improve your front-end skills by building projects</h1> element.
The <img> tag should include alt ="" attribute. You can apply like this:

<img src="./images/image-qr-code.png" class="qr-img" alt="qr-code"/>

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)

Marked as 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