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 whith html and css + flexbox

weydsonlinoโ€ข 30

@weydsonlino

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


My first project here, and I would like to receive feedback and tips. thanks

Community feedback

David Ochoaโ€ข 290

@davidochoadev

Posted

The last <div> could also be a <footer>, or alternatively, you could add role="contentinfo" to your div. However, on MDN Web Docs, they always recommend using a <footer>. The use of <footer> is recommended for several reasons when structuring the content of a web page.

Firstly, a <footer> element provides semantic meaning to the content it wraps. It clearly indicates that the enclosed content represents the footer section of the page, which typically contains information related to the document as a whole, such as copyright notices, contact details, and navigation links.

By using a <footer>, you improve the accessibility and assistive technology support of your website. Screen readers and other assistive devices can recognize the <footer> element and convey its purpose to users, allowing them to easily navigate and understand the structure of the page.

Moreover, <footer> helps with search engine optimization (SEO). Search engines analyze the structure and content of a webpage to determine its relevance and rank it in search results. By using semantic elements like <footer>, you provide additional context to search engines, enabling them to better understand and index your content.

In addition, using a <footer> element makes your HTML code more readable and maintainable. It clearly delineates the footer section, separating it from the rest of the page's content. This separation enhances code organization and makes it easier to modify or update the footer content independently without affecting other sections of the page.

Overall, incorporating a <footer> element in your webpage structure offers benefits in terms of semantics, accessibility, SEO, and code maintainability. It ensures clear and meaningful presentation of footer-related content while improving the overall user experience.

1

weydsonlinoโ€ข 30

@weydsonlino

Posted

@davidochoadev Thanks for the feedback, I appreciate it. In the next challenge I will use your tips

0

Account Deleted

Hello Coder ๐Ÿ˜Š

Your solution is greatโœจ and congratulations for successfully completing an another newbie challenge๐ŸŽ‰

and there is a small suggestion that might be helpful for you

QR code image : The alt attribute provides alternative information for an image if a user for some reason cannot view it and screen readers use the alt attribute to convey the message about the image

And here the qr code image is not for decoration and that's why you need to write an alt attribute value for it

<img src="images/image-qr-code.png" alt="qr code">

Hope that was helpful ๐Ÿ˜Š

0

weydsonlinoโ€ข 30

@weydsonlino

Posted

@MrSandipSharma Thanks for the feedback. I'll save it for the next one โœŒ

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