Skip to content
Submitted over 2 years ago

Css grid

Rayees ahmad rather•30
@rayeesrather99
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

It's wasn't difficult too much but i found it little bit confusing while making a div.

Community feedback

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

    Hi @rayeesrather99,

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

    1. You should use <main> landmark 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.

    2. 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. And then use <h2> instead of <h3>

    3. The alternate text should be hyphenated , it should be human-readable.The alternate text should indicate where the Qr code navigate the user : like Qr code to frontend mentor.

    • 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.

    CSS:

    • 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.
    • Consider using min-height: 100vh instead of height: 100vh to the body , that let the body grows taller if the content of the page outgrows the visible page.
    • 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.(no need for absolute positioning).
    • width: 280px; an explicit width is not a good way. consider using max-width to the card in rem instead .
    • height: 430px;It's not recommended to set height to component, let the content of the component define the height.
    • 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.

    Aside from these , Great job on this one.

    1
    Rayees ahmad rather•30
    @rayeesrather99Posted over 2 years ago

    @PhoenixDev22 First of all thank You so much for your response , absolutely i have made many mistakes in my code and i will apply your suggestions on my code .The Reason behind many mistakes is that i am unaware of many things here and i have learned only basics of css yet : )

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

    @rayeesrather99 Glad to help. Happy coding!

    1
  • Sam•230
    @samd1aPosted over 2 years ago

    Hi Rayees ahmad rather, congrats on finishing your challenge it looks great!

    A small suggestion I have is to use absolute positioning on your attribution div, this way it will not interfere with centering the card.

    Keep coding!

    0
    Rayees ahmad rather•30
    @rayeesrather99Posted over 2 years ago

    @samd1a Thank You so much for your response and i will look into this matter.

    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