Used Semantic element and Media query

Solution retrospective
Using custom font and root pseudo class
What challenges did you encounter, and how did you overcome them?Understanding custom font was not easy for me, after series of explanation from ChatGPT I then got the concept.
What specific areas of your project would you like help with?Understanding Media Query more efficiently.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@PetterTSaatvedt
Great work! The solution pretty much identical to the design, with the exception of what looks like a line height difference in the description. Nonetheless, the html is semantic, well-structured, readable, and covers important accessibility requirements!
Here's a few things I noticed while reviewing your code, which could be of use in future projects:
-
I noticed you were using a h1 tag in your component. As the h1 tag is usually reserved for the main heading on a web page (and assuming that the component would be part of a web page with multiple components) it would be better to use the h2 tag in this instance. Also, it is good practice to not skip header tag orders, so considering you are also using a h3 tag, updating the h1 to a h2 will now mean that you are not going directly from a h1 to a h3 :-)
-
I see that you are specifying font and text color for multiple of your css classes. To slim down the css file, and avoid repeatability as much as possible, you could add both the font-family and your "standard" font color inside the body selector, and remove all other declarations of those found elsewhere in the css file. Essentially, this means that all elements of the page will inherit the font and font color, considering they're all children (or children of children etc) from the body element. Now, in the instances of some text requiring different colors, you can keep the css as it is, as they will now override the inherited color :-)
Keep up the good work!
Marked as helpful -
Join 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