Skip to content
Submitted almost 2 years ago

Responsive QR component using Flex

Jude Savio•10
@JudeSavio
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

Please let me know areas I can improve upon. It'll greatly help if I've adhered to flex best practices. Your Feedback is appreciated!

Community feedback

  • Lord Robins•550
    @ZenitsuAgPosted almost 2 years ago

    Hello Jude, you've done pretty well. Here are some tips to help you improve your code.

    • Your image didn't load because you didn't upload the image folder to your repo.
    • It's usually better to wrap the entire code inside a main tag for accessibility purposes.
    • Also, I see that you aligned the h1 and the p elements in the HTML file , it's much better to do all that in CSS using the text-align property and you can just set it to center
    • And I really don't know how but you're missing the HTML boilerplate in your code. I mean
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

    this stuff. This is a very important component of any modern website today.

    Overall, you've done a great job.

    Happy Coding :)

    Marked as helpful
    1
    Jude Savio•10
    @JudeSavioPosted almost 2 years ago

    Thank you for response ZenitsuAg . I've made the said changes and it looks better now. Any other feedback is deeply welcome and appreciated.

    Can you shed a bit more light on as to why we need to use a main tag to wrap the code?

    0
    Lord Robins•550
    @ZenitsuAgPosted almost 2 years ago

    @JudeSavio

    The reasons why we need to use a main tag to wrap our code are

    • Accessibility: Assistive technology can use landmarks for quickly identifying and navigating to the document’s large sections. It is recommended to use the <main> element.
    • Skip Navigation: Assistive technology users can skip large sections of repeated content using “skipnav” technique. This allows the user to easily access a page’s main content. If you add an id attribute to the <main> element, it will be the target of a skip navigation link.

    You can read more here.

    I hope this helps.

    Happy Coding :)

    Marked as helpful
    1

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