Design comparison
Community feedback
- @Islandstone89Posted 12 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 thebody
, 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 -
- @ahmedafsaPosted 12 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 GitHubJoin 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