Skip to content
Submitted almost 3 years ago

Making a QR code component using html and CSS

accessibility, cube-css, styled-components, webflow, less
Abdulmalik•50
@Labere265
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

which areas of the code do you think, something better should be to save me error or time next time?

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi Abdulmalik,

    Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • Images must have alt attribute. In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor.
    • 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.
    • Really important to keep css specificity as low/flat as possible. It’s not recommended to use the ids to target the DOM elements for styling purposes, better to use classes so that it could be more manageable and reusable. IDs have a much higher specificity than classes) IDs have many uses in a webpage aside from being a CSS selector. For example as page anchors, fragment identifiers or to link labels to form fields.
    • 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.
    • width: 340px an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.
    • height: 499px It's not recommended to set height to component, let the content of the component define the height.
    • 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.
    • Remember a css reset on every project. That will make all browsers display elements the same.
    • Last clean up your code, like width: max-width;..

    Aside these, Great work! Hopefully this feedback helps

    Marked as helpful
  • Bandaru Sindhuja•190
    @SindhujaBandaru

    Hello! Abdulmalik Congratulations on completing your new project👏 To center the QR card you have to add some changes to the body Use display:flex; min-height:100vh; width:100%; justify-content:center; align-items:center;

    To improve the Container height use👇 max-width:340px; height:auto; (this make sure to adjust the height of the container as the content increases)

    Hope this helps😃

    Happy Coding🥳

    Marked as helpful

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