Skip to content
Submitted about 2 years ago

qr-code-component-main for Desktop and Mobile devices

Oyasi Kelly Ogheneoghagha•200
@Oyasikelly
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

i tried to re-write my previous challenge, am still open for correction

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Oyasi , Congratulations on completing this challenge!

    You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

    1.Add the correct size to avoid the container growing more than it should. In this case the QR CODE component size is max-width: 320px.

    2.Every page should have a h1 heading, to avoid accessibility issues replace the h2 to with <h1> and follow the hierarchy sequence if you add another heading as h1, h2, h3…

    3.Something I've noticed in your code is that in many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

    <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!

    Marked as helpful
    0
  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    Hi Oyasi Kelly, good to hear that you redid this challenge to improve upon your previous solution! I think I only got one comment here, which is, you have your footer attribution as an h2 within the main. The headings are meant to be used as a guide to the levels in your content, and the footer is usually the last thing in the page. I would just use footer here, and I'd have the text as a regular p since this is really not a heading at all, and more importantly, I'd move this out of the main because the main content usually contains information that is not the header or footer content.

    Once again, well done, and keep going!

    Marked as helpful
    0
    Oyasi Kelly Ogheneoghagha•200
    @OyasikellyPosted about 2 years ago

    @elaineleung thank you so much, you always inspire me

    1
    Elaine•11,400
    @elaineleungPosted about 2 years ago

    @Oyasikelly Aw thank you for your kind words, means a lot to me! I'm inspired by you as well, seeing how you keep working hard to get better 😊

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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