
Design comparison
Solution retrospective
I did it by myself
What challenges did you encounter, and how did you overcome them?fonts i added is not working
What specific areas of your project would you like help with?fonts
Community feedback
- @skyv26Posted 2 months ago
Hi @Nwaugojohnson, 👋
Great job on the project! 💪 Just a couple of suggestions to improve the structure and semantics of your code:
-
Avoid using the
<section>
tag: Since this is just a card and not a section of a larger page, it's better to use a<div>
instead. The<section>
tag is typically reserved for larger thematic sections of content.Example:
<main> <div class="contents"> <!-- Card content goes here --> </div> </main>
-
Change
<h3>
to<h1>
: The heading within the card is the main heading, so it should be an<h1>
for proper hierarchy and accessibility. This helps with SEO and screen reader compatibility.Example:
<h1 class="font">Improve your front-end<br> skills by building projects</h1>
Marked as helpful0 -
- @MarziaJaliliPosted 2 months ago
Congratulations on finishing your first project here!
Some sort of suggestion:
- set the code below in the body selector to center the card:
body { display: grid; place-items: center; min-height: 100vh; }
- Make sure that the card is the only child element of the
<body>
.
If not wrapp everything nested inside
<body>
with the<main>
element. It will look something like this:<body> <main> <!-- every element nested inside --> </main> </body>
Also, I suggest you use
rem
units instead ofpx
for thefont-size
. Becausepx
happens to cause some issues.Keep up the grind🫡
Marked as helpful0@NwaugojohnsonPosted 2 months ago@MarziaJalili How about the font.. I was having issue with the font on the head tag I don't know if it really worked out
0@skyv26Posted 2 months ago@Nwaugojohnson I will see your fonts related problem and shortly share the solution with you.
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