Mobile First using CSS Transitions

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  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

  @nicholask98Posted almost 4 years ago

  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

  @ApplePieGiraffePosted almost 4 years ago

  @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

  @nicholask98Posted almost 4 years ago

  @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

  @MasterDev333Posted almost 4 years ago

  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

  @nicholask98Posted almost 4 years ago

  @MasterDev333

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

  Best, Nicholas

  0
• 

  Aleksandr Aksenov•750

  @axevldkPosted almost 4 years ago

  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

  @nicholask98Posted almost 4 years ago

  @axevldk

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

  Best, Nicholas

  0