Design comparison
Solution retrospective
challenging: to address specific elements with a styling 👉so I used a pseudo-class for styling the table-element (border) and pseudo-elements for styling the list (bullet-points) and last section-element.
- ::marker - Styling the list-element.
- :last-child - Styling the table-element.
- :last-of-type - Styling the section-element.
Community feedback
- @StroudyPosted about 2 months ago
Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…
-
Avoid using
id
selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.
), which are reusable and more manageable, allowing for better control over your styles and easier updates. -
I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
-
Using
rem
orem
units in@media
queries is better thanpx
because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences. -
This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation),
<meta>
description tag missing that helps search engine determine what the page is about, Something like this<meta name="description" content="description goes here" />
I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻
Marked as helpful0 -
- @MarenOelixtownPosted about 2 months ago
Many thanks for the effort and the detailed tips...I appreciate that 👋
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