Design comparison
Solution retrospective
am failed to create hover effect to the image, i tried so many time , but i can't complete it..! am just posting my half finished projects...! am trying to figure out the hover effect , in future i will add to this..!
visit my code and Someone help me to write code more simply & neatly..! Your reviews and suggestions make my moves easier...! give me some tips and suggestions to do better code. am trying to figure out to learn javascript but for me its kinda hard to learn javascript can anyone have time to be my mentor and give a right path..?!
happy coding...!
Community feedback
- @denieldenPosted over 2 years ago
Hi Navadeep, great work on this challenge! 😉
Here are a few tips for improve your code:
- you don't need javascript for this effect, you can add the effect
:hovercreating adivthat appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - add
maintag and wrap the card for improve the Accessibility - add
transitionon the element with hover effect
Overall you did well 😁 Hope this help!
Marked as helpful1 - you don't need javascript for this effect, you can add the effect
- @dtomicicPosted over 2 years ago
Hey Navadeep, I've looked at your solution and saw that you're doing the hover effect on the text through JavaScript, which is not a good way to do it since it's not really needed as CSS offer a selector for hovering (reference 1, reference 2) you just add the selector in your CSS for the element you want to have an effect on and that's it. No need for JavaScript. Also it's not really a good practice to change the style of an element through JavaScript if it's not really needed as you can usually do all of the stuff through CSS.
Also I've seen that you position your elements with relative and absolute positions which you shouldn't use for normal positioning, you can use flex for them (flexbox), I'm talking about this section here, it would've been much easier for you to have used flexbox there.
I noticed you also used min-width on your card which is not really a good way to do that, you should always try to position your elements inside of the card and then just give the card a padding and it would look nice.
As for JavaScript there are a lot of materials online but this is a good start.
Keep up the good work 👍
Marked as helpful1@NavadeepkpPosted over 2 years ago@dtomicic thanks for the advice...! ❤ i will fix it asap..!
0
Please log in to post a comment
Log in with GitHub
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