Blog card with hover effect
Solution retrospective
Happy that I made it look almost like the original one.
- took less time than the previous one
- Did all by myself
Things I would like to improve:
- Use of unnecessary margins
- Unprofessional work/Bad Practices
There was not much of any challenge, everything went smoothly. Used flex to align all the items
What specific areas of your project would you like help with?Okay, so I did this without any help (like chat GPT, google, stack overflow, etc) I am pretty sure that I did some unnecessary things.
And did some Bad practices
I would really appreciate anyone pointing out the mistakes/bad practices that I did. And would greatly benefit from any suggestions to make the code DRY
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Hamsolovski
Hello ! Very nice work, you're near pixel perfect :)
You wanted tips on bad practices you might have, here's what i've noticed :
- css : don't use values when naming your variables (yellow, etc.), but instead, use a term describing the role of the variable (main-color, bg-color, title-font) etc. That way, if someday, you have to change the value of your variables, you don't have to rename it and avoid having a variable "yellow" containing an hex code for red.
- html : avoid div if you can, there are a lot of other tags you can use : article, section, header, footer, etc. divs are not very good from a SEO point of view.
- try to store your svg data into a dedicated file : it makes your code cleaner. Good habit to have : if you have one element or function you might want to use elsewhere : put it in a separate file.
Some other tips :
- you can put other values than colors in your variables : font, size, etc.
- try to avoid fixed height and width for element whose size might change : your element will better adapt to its content.
- you can use numeric values in font-weight : 100, 200, etc. It allows you to be more precise than using values like bold, etc.
Hope it helps :)
Very nice work on the transition btw !
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