Design comparison
Solution retrospective
How good was my CSS?
Community feedback
- @UrbanskiDevPosted about 2 years ago
Hello David !
Congratulation for finishing the challenge
- I would recommend you to use CSS variable to easily use them back, and if you need to change them, you modify only once and all your document will get the update !
In your case, it could be :
:root{ --name-variable1: hsl(212, 45%, 89%); --name-variable2: hsl(0, 0%, 100%); --name-variable3: hsl(218, 44%, 22%); }
Then to use your variable in your code, use the var() keyword :
body { font-size: 15px; background-color: var(--name-variable1); display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Outfit', sans-serif; margin: 1rem 1.5rem; min-height: calc(100vh - 0.1px); }
- I see you're using rem units in your code, which is a good thing, but be careful where you use it. For example :
img { padding: 1rem ; max-width: 100%; border-radius: 1.5rem; }
The border-radius usually use px instead of rem, I give you a little link about best units pratices, it surely will give you some ideas : https://gist.github.com/basham/2175a16ab7c60ce8e001
- In your HTML file, it is not a good practice to use an "h3" tag without an "h1" tag or even an "h2" tag to start with, you should replace :
<h1> Improve your front-end skills by building projects </h1>
Then if the style of the "h1" is not okay for you, you can change it with your css !
Good job, keep goind and I hope my comment will be useful !
Marked as helpful0@DavedCNPosted about 2 years ago@UrbanskiDev Thanks a lot for the helpful tips, I'd make sure to incorporate them.
0 - @StephenAlcantaraPosted about 2 years ago
Personally, I would have used an <h2> instead of <h3> and try not to tinker with the font-sizes of the headings but other than that, yours was on point. Great job!
0@DavedCNPosted about 2 years ago@StephenAlcantara Thank you, I really appreciate your input.
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