Design comparison
Solution retrospective
This was the easiest challenge for me so far. I even decided to play around with linear gradient on the page background
Community feedback
- @Islandstone89Posted 12 months ago
Hi. It looks good, but there are quite a lot of things to improve in the code.
HTML:
-
You need a
<main>
. Change the first<div>
to a main. And make the ID a class. -
qr-code
should also be a class. IDs are rarely used these days. -
Alt text also needs to tell where it leads (frontendmentor.io).
-
"Improve your frontend skills" is a
<h1>
. -
.attribution
should be a<footer>
. And the text needs to be wrapped in a<p>
.
CSS:
-
Don't use
@import
. It's better for performance to link the fonts in the<head>
of the HTML. -
It's good practice to include a CSS Reset at the top. Andy Bell has a good one you can use.
-
Remove
max-width
andmax-height
on thebody
. Addmin-height: 100vh
-
Change
justify-content
fromspace-between
tocenter
, to center the card vertically. -
Remove
flex-wrap: wrap
on the container. You do not need it here. -
Remove
box-sizing: content-box
. It's the default, so you wouldn't have to declare it. Anyway, in the mentioned CSS Reset, the first thing it does is select all elements and appliesbox-sizing: border-box
. -
Remove all fixed widths. Add
max-width
in rem on the card. -
Put
text-align: center;
on the body. The text will elements will inherit the value. -
Font-size should not be in px. Use rem.
Marked as helpful0@0x-UGPosted 12 months ago@Islandstone89 thanks for this, I'm still new to it all so I don't necessarily know all the tips and tricks of CSS, I kinda tend to just do things manually like a noob would, I'll try these out right now!
1@0x-UGPosted 12 months ago@Islandstone89 I'm done. Thanks for the feedback. Please be sure to give more feedback on my solutions whenever you can/see it. It'd be much appreciated. :) Thanks again!
1 -
- @VarchronosPosted 12 months ago
A vertical linear background would look better in my opinion. Looks great!!!
0@0x-UGPosted 12 months ago@Varchronos what's the CSS syntax for vertical linear bgs? . I only know this one cos I learnt it while doing the score summary challenge
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