Skip to content
Submitted 11 months ago

QR-code-design

Muhammad Shalauddin Ahmed Shipon•70
@Muhammadshipon
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

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted 11 months ago

    Hi there, this is my suggestions:

    HTML:

    • You need a <main>, this is important for accessibility. Change .card from a <div> to a <main>.

    • Remove the .child div, you don't need it.

    • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

    • Headings should always be in order, so you never start with a <h4>. Change it into a <h1>.

    CSS:

    • Use the style guide to find and implement the correct typography.

    • It's good practice to include a CSS Reset at the top.

    • There should only be one property per line - this makes the code clear and readable.

    • Remove the fixed width on the card. You rarely want to set fixed dimensions, as this is the easiest way to cause responsive issues.

    • text-align: center should be set on the body, and removed elsewhere.

    • If you want something to have zero padding, write padding: 0, without the unit.

    • Remove grid-template-columns, there isn't a need for one here.

    0
  • Ahmed Mohamed 🇵🇸•310
    @ahmedafsaPosted 11 months ago

    Hello @Muhammadshipon, great work!

    Just small note it's better to use the font in the style-guide.md file to make the solution more closer to what's required.

    For this QR code component: the font, its weights and size are:

    • Family: Outfit
    • Weights: 400, 700
    • Font size (paragraph): 15px

    You can do this by opening the font page on Google Fonts and linking it in your HTML head

    • HTML:
    <head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>
    • CSS:
    body {
  font-family: "Outfit", sans-serif;
}
    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