Submitted about 2 years ago

QR-code-with-HTML-CSS

Hawi Girmachew•250

@Hawigirmachew

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I edited my code as my mentors give suggestions.

Community feedback

romila•3,570
@romila2003Posted about 2 years ago
Hi Hawi,

Congratulations 🎉 for completing this challenge, the card component looks great. Also, it is great that you used the flex property to center your card however I found some issues I want to address:

It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>

Also, you should seperate the footer from the main content so it should have its own tag which is the footer tag e.g. <footer class="attribution"></footer>

The font-family is correct however the font-weight is not since the title should be bold and the description will have a thin font-weight.

Overall, great attempt and wish you the best for your future projects so keep coding 👍.
0

Lucas 👾•104,400

@correlucasPosted about 2 years ago

👾Hello Hawi Girmachew, congratulations for your new solution!

👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

Your component is done and the code is working, but the html markup/structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

YOUR SOLUTIONS CODE:

<body cz-shortcut-listen="true">
    <div class="container">
        <div class="qr">
            <img class="qrimage" src="images/image-qr-code.png" alt="qr code">
        <div class="discription">
            <h1>Improve your front-end skills by building projects</h1>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>
        </div>
        <div class="footer">
            <p>Challenged by <a href="https://www.frontendmentor.io/home">Frontend Mentor</a>. Coded by <a href="#">Hawi Girmachew</a></p>
        </div>
    </div>
</body>

THE CODE REDUCED:

<body>
<main>
 <img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> 
</main>
</body>

✌️ I hope this helps you and happy coding!

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