@jsklcodes
Posted
Hi, @pettik! 🙋♀️ Great job on your solution and the overall organization of the code!
I have a couple of suggestions for improvement:
- While the naming of your classes is generally good, there's a minor inconsistency. In some classes, you've used a single underscore instead of the double underscore convention, like card_list instead of card__list. Double-check your class names to ensure they consistently adhere to the methodology you're using.
- I noticed that you've defined <main class="card"></main>. It's worth noting that using the <main> tag with a class of "card" isn't recommended. Even though this project might only involve a card, the <main> tag should serve as a semantic wrapper for the main content of the page. If you were to add other cards or sections to the page, having multiple <main> tags wouldn't be appropriate, as they should only be used once per page.
Your CSS is well-structured, utilizing rems and custom properties, which is excellent! However, I have a couple of minor suggestions regarding your CSS file:
- As this code doesn't require media queries to work properly, it's good practice to try to solve it without them. This can help you develop your skills and understand CSS better.
- I noticed that you've used fixed width sizes for the card, which isn't recommended. Even if you were to use media queries and set fixed widths for different breakpoints, this approach could lead to potential issues. Instead, consider using a combination of width, max-width, and relative units to create a more flexible layout, eliminating the need for fixed sizes and media queries instead.
Have fun learning coding! ✨