Skip to content
Submitted over 2 years ago

QR code component - my 2nd Frontend Mentor challenge

Julien•40
@windu80
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

I found this one definitely fairly easy. Practice makes good, this time, I didn't struggle for the vertical alignment. I'm still using bare HTML and CSS though, no fancy flexbox or bootstrap or anything. Because that's just all I know for now. Feedback is most welcome

Community feedback

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

    Hi Julien,

    Congratulation on completing another frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • You should use <main> landmark 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.
    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> with sr-only class hidden visually and present for assistive tech users.
    • In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image. It should not be hyphenated, it should be human readable
    • Adding rel="noopener" or rel="noreferrer" totarget="_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.
    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser .
    • width: 320px; an explicit width is really not a good way to have a responsive layout . Consider using max-width to the card in rem instead .
    • Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.
    • Consider using rem and em units as they are flexible, specially for font size better to use rem. 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.
    • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

    Overall, Excellent work! Hopefully this feedback helps.

    Marked as helpful
    0
    Julien•40
    @windu80Posted over 2 years ago

    @PhoenixDev22 This feedback is packed with information! Thank you so much! I spent some time googling some of these concepts which are new to me, such as rel="noopener" and css reset.

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

    @windu80

    Like Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

    Glad to help and happy coding!

    0
  • David•8,000
    @DavidMorgadePosted over 2 years ago

    Hello Julien congrats on finishing the challenge!

    Sometimes whenever I come to someone code and check it, I learn new things, and this is one of those times, nice trick using display: table and display: table-cell, first time I see that type of trick for centering something on the screen, great job!

    I would personally recommend you using flex-box for your next project, it really pays off, bootstrap on the other hand, is not that necessary to learn, you can get any type of layout without the need of bootstrap, but flexbox, oh boy, you will use it a lot!

    Hope my feedback helps you!, good job!

    Marked as helpful
    0

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