Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR component using Flex

@JudeSavio

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@ZenitsuAg

Posted

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

@JudeSavio

Posted

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

@ZenitsuAg

Posted

@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
Discord logo

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