Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile First using CSS Transitions

Nicholas 80

@nicholask98

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first mobile-first design. This is also my first fully independent project using CSS transitions. I used media queries to adjust the size of the background bubbles to fit to the screen size.

Any feedback is welcome. I'm particularly interested in any feedback related to how I can reduce redundancy and any extra code. Genuinely very interested in anything you have to say though!

Thanks!

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Nicholas! 👋

Nice job on this challenge! 👍 Those animations on the SVG circles are definitely interesting! 😎

One thing you could do is to use CSS background images to add and place the SVG circles in this challenge. It'll leave your HTML a little cleaner and you might not have to use any media queries to adjust the position of the SVG circles (say, if you position them using viewport units). But, then, implementing that animation might be a little harder to do, so it's just a thought! 😉

Keep coding (and happy coding, too)! 😁

1

Nicholas 80

@nicholask98

Posted

Hey @ApplePieGiraffe,

Thanks for the feedback! I will definitely give that a shot today. I don't know how that idea didn't even cross my mind. I'm already at a loss for how I would keep the animation without having the circles be elements in the markup. Do you have any ideas for that?

Thanks! Nicholas

1
T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@nicholask98

I've seen some people use a combination of pseudo-elements and CSS background images to add the circles into this challenge (by adding a single circle SVG as the background for each pseudo-element of the body or main container). You could try doing that and then changing the position of the pseudo-element when it is hovered over to recreate the animation you already have. That way, you'll keep the background images out of your HTML but still be able to change their position when the element they are attached to is hovered over, I think. But, if you want, you could simply save that idea for another challenge and continue with what you have now since it isn't bad. 😉

Keep coding! 👍

1
Nicholas 80

@nicholask98

Posted

@ApplePieGiraffe

Oh of course! I always forget about pseudo-elements. I think I will save that idea for next time just so I can move on to a new project, but thank you so much for your detailed response! I will definitely be referring back to this in the future.

Best, Nick

1
Web Frog 1,840

@MasterDev333

Posted

Great work @Nicholas. Hover animation on background circle was impressive. As @axevldk said, it would be great if you follow BEM naming conventions on your code. Happy coding~ :)

1

Nicholas 80

@nicholask98

Posted

@MasterDev333

Will do. Thanks for looking it over! I appreciate your feedback.

Best, Nicholas

0

@axevldk

Posted

Hi, @Nicholas ~ I have studied your work. Great work on your 2nd challenge. I especially like circle animations you implemented. 👍

The only I can recommend is trying to use BEM naming on your card element. Everything else is wonderful. Keep going with your clean and good code ~ 😊

1

Nicholas 80

@nicholask98

Posted

@axevldk

Thanks for the note! I will implement that right away!

Best, Nicholas

0

Please log in to post a comment

Log in with GitHub
Discord logo

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