Skip to content
Submitted almost 3 years ago

QR code component using CSS Flexbox

Sri Vishwa•10
@SriVishwa-S
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Feedback on how the shadow( and the project in general) can be improved is welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi Sri Vishwa,

    Congratulation on completing your first frontend mentor challenge. Excellent work! . I have some suggestions regarding your solution:

    • You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • Images must have alt attribute. In my opinion, the image is an important content. The alternate text is needed on this image. It should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
    • Never use <div> and <span>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. For the reason stated before, in this challenge, you can use <h1> to wrap .text and <p> for the description.
    <h1 class=”text”> Improve your front-end skills by building projects</h1>
<p class=”...”> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    • An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% to the body instead will extend across the viewport but will always stop at the scrollbar.
    • 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. You can remove margin-top: 15vh;
    • 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 .
    • height: 81vh;It's not recommended to set height to component, let the content of the component define the height especially in vh.
    • 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, Your solution is good. Hopefully this feedback helps.

    Marked as helpful
  • Vongai O Machingura•80
    @livvyvi3

    Hi good attempt you can add the alt attribute, on standard it can be a short description of the image in this case the QR image, in the case that the image is not displaying the user can see which image could have been rendered.

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

    You can add the font link as an import in styles.css <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    You can remove the tag <div class="page">

    and add the css declarations of the class selector

    Marked as helpful
  • Deepak Kumar•30
    @DeepakKumarKhatri

    Hey, you have some design issues. Let me explain to you; You have changed the original height of the image that is now being stretched and not being the same in the picture in the challenge. If after changing the height to normal as like in the challenge the height of the white container remains the same then change it too. I hope after this your design will look as same as in the challenge but if isn't do let me know then.

    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