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

QR code component

ogbuike daniel• 30

@ogb-daniel

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


What are you most proud of, and what would you do differently next time?

N/A

What challenges did you encounter, and how did you overcome them?

Centering content in screen Overcome by setting default margin and padding of all elements to 0, used a flex container with 100vh to center vertically

What specific areas of your project would you like help with?

N/A

Community feedback

David Ochoa• 290

@davidochoadev

Posted

Congrats for your solution!🥳

The <div> element that contains the attributions, the one below the <main>, could have been used as a <footer> element.

Explanation:

In HTML, the <footer> element is specifically designed to represent the footer of a section or a document. It typically contains information such as copyright notices, contact information, links to related documents, and other metadata about the section.

Using <footer> instead of a generic <div> has several benefits:

  • Semantics: It provides a clear semantic meaning to the content, making it easier for screen readers and other assistive technologies to understand the structure of the page.
  • SEO: Search engines may give more weight to content within a <footer> element, as it is considered to be important metadata about the page.
  • Accessibility: It helps users with disabilities to navigate the page more easily, as they can quickly identify the footer section.

In your case, since the <div> element below the <main> seems to contain attributions, which is a typical type of content found in footers, it would be more appropriate to use the <footer> element instead.

0

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