
Design comparison
Solution retrospective
I am happy that I made the website exactly like the design and responsive.
Community feedback
- @jdrodriguez2707Posted about 1 month ago
Hi @Kanchana-Kaushal,
Great work, congratulations! You built the website exactly like the design, and the card is responsive, even when I stretch the screen, it resizes perfectly, that's awesome. Plus, you used CSS custom properties, which is a good practice for making styles reusable.
Here are a few things that, in my opinion, could further improve your website:
- Use semantic HTML: Instead of using
div
elements you could use more semantic tags likearticle
for the card. This tag is perfect for independent content, so it's useful in this context. Think of it like the card would be used in a different section of a larger website.
Also, it's not necessary to wrap text in
div
. Instead, you can use thep
tag to mantain the semantic structure. Try to usediv
only when you need to group elements for styling purposes.-
Font Importing Best Practices: There's a better way to import fonts, by linking them in the
head
of the HTML rather than using@import
in CSS. I don't remember the exact technical differences, but I do know that importing fonts via thehead
is generally faster in terms of performance. -
Using classes: You're already using some classes in your code, that's great. But consider using them consistently for all elements. This approach makes styling more reusable and scalable, especially in larger projects.
You might also want to explore methodologies like BEM to structure your CSS more efficiently. It’s worth checking out!
- Add a bit of documentation: Lastly, I recommend adding some documentation about your project. You could edit the provided Frontend Mentor template to include details about what you practiced and learned during the process. This will not only help others understand your project’s purpose but also showcase your skills and thought process.
That’s all! I hope this feedback helps. Keep up the great work, and happy coding! 🚀
Marked as helpful0 - Use semantic HTML: Instead of using
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