Skip to content
Submitted about 2 years ago

QR-code challenge

maestrobee•10
@banjiadewumi
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

  • What I found difficult while building the project was centering the elements vertically.
  • Please what are the best practices for centering elements in general ?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi maestrobee,

    Congratulation on completing your first frontend mentor challenge. Excellent work! I have some suggestions regarding your solution if you don’t mind:

    • You should use <main> to wrap the card and <footer> for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor . The alternate text should not be hyphenated, it should be human readable.
    • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute, you can expose your site to performance and security issues.
    • For the attribution, never use <div> alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser. Then you can remove the margin and .box-container.
    • width: 340pxan explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.
    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    Hopefully this feedback helps.

    Marked as helpful
    0
    maestrobee•10
    @banjiadewumiPosted about 2 years ago

    Hi @PhoenixDev22 , Thank you so much for the feedback, it definitely answered my questions. Also thanks for the guidelines regarding accessibility issues, I will be sure to make these corrections and re-submit.

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @banjiadewumi

    Glad to help. Happy coding!

    0
  • Amjed Sahra•80
    @AmdjedSaneroPosted about 2 years ago

    you can have a container and display flex and justfiy content center and align-items center

    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