Design comparison
SolutionDesign
Solution retrospective
This is my only second challenge, please tell me if there is any improvements needed?
Community feedback
- @andreasremdtPosted over 2 years ago
Hey @19akasht, this looks really good, it's very close to the design. A couple of things you could improve code-wise:
- To make the HTML more semantic, it's advised to have a
main
element as the wrapper for your main content, in this challenge it's the entire card. So you can replace<div class="container">
with<main class="container">
. - You used a level 2 heading for the title, but since it's the only and therefore most important title of the page, it makes more sense to start with an
h1
. To always make your markup as accessible and semantic as possible, make sure to start withh1
for your most important headings and then gradually go down untilh6
, without skipping levels (if you have that many headings, of course). - The way you declared this CSS custom property throws an error because it's syntactically incorrect (also it appears to be unused). You can't put CSS properties and property values into one variable, but you can do something like this instead:
--font: 'Outfit', sans-serif;
. And then use it like so:font-family: var(--font);
Hope these tips helped you :)
Marked as helpful1@19akashtPosted over 2 years ago@andreasremdt Thank you for you suggestion, This will help me alot. 🙂
0 - To make the HTML more semantic, it's advised to have a
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