Skip to content
Submitted about 2 years ago

A Responsive QR code design

Divine•60
@divine-eng
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

All feedback are welcome

Community feedback

  • Masrafi Mondol•70
    @MasrafiMPosted about 2 years ago

    The QR code image is in the Images folder link the image/QR-code and color of the text and that should look a lot closer to the final image.

    and good work keep it up

    Marked as helpful
    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @divine-eng,

    The QR code image link is broken you have a relative URL in code but the folders and image does not exist in your repository.

    1
    Divine•60
    @divine-engPosted about 2 years ago

    @hyrongennike Okay thank you for your feedback.... I'll work on that

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

    @hyrongennike Yeah the problem here is that he just uploaded the index.html, if you want it to work just add your images to your github repository and connect them to your html using the relative path!

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

    Hi Divine,

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

    • You should use <main> for 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 image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
    • 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 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 .container`.
    • width: 300px an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.
    • height: 500px;It's not recommended to set height to component, let the content of the component define the height.
    • 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 modern css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
    • Last , It's a good practice to have the styles in separate file he reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

    Overall, Excellent work! Hopefully this feedback helps.

    0
    Divine•60
    @divine-engPosted about 2 years ago

    @PhoenixDev22 Your feedback is really appreciated 👍

    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