DEV Community 👩‍💻👨‍💻

Jasterix
Jasterix

Posted on

30 Days of CSS Girls- 3: Beating Heart

Day 2 of the coding challenge was some light reading, so I didn't build anything new. But day 3 picked up from the first day's challenge of making a heart.

Day 3 challenge:

  • The heart is now white on a colored background ✅
  • Add shadow to the heart. You may try a few techniques such as drop-shadow, border, outline, box-shadow. ❌
  • (Optional) Add a beating animation ✅

Instead of focusing on the shadowing, I used this challenge to learn more about CSS animations and keyframes. This was my first time learning about keyframes.

What are keyframes?

Like the word implies, CSS animations allow you to animate an element. CSS keyframes allow you to specify what the animation does.

For anyone struggling with the concepts, the following YouTube video by DevTips cleared up any confusion. Travis has a series on CSS animations that I plan on coming back to.

It took me about an hour to get through the CSS Animation & Keyframes video, as I paused and rewound several times throughout the video and took notes along the way.

Hurdles:

I also found myself struggling to center the heart within its background. Why is centering so hard in CSS? There has to be a better, more reliable way to center all things, including those that overlap. Right?

Sizing things is also a challenge. In the last challenge's blog post, dippas suggested using rem over px, but it was more difficult than expected to estimate the margins needed to center the .heart element.

What's next?

Going forward, I plan to continue prioritizing learning over speed. This may mean I spend three days on one challenge, rather than speed through.

I'm also streamlining the challenges themselves to avoid overloading too many new concepts on one day. This might lead to splitting one day's challenge over several days.

I'm also building a playlist of relevant YouTube videos to get through each day. By the end of the 30ish days, I will be able to share a series of articles and videos for anyone looking to complete the 30 days of CSS challenge.

My attempt at a beating heart

Top comments (7)

Collapse
 
paintedsky_ca profile image
PaintedSky

Nice work! I think you'll find as you get more comfortable with CSS, it will get far less annoying. It can be kind of janky, yes, but once you know what to expect it gets much easier as you can anticipate some of its weirdness. Keep it up!

Collapse
 
robotix263 profile image
ROBOTIX263

Woow can i play with this too!???

Collapse
 
jasterix profile image
Jasterix

play to your heart's content :D

Collapse
 
shubhamkhandare profile image
Shubham Khandare

Why is this soo smooth ?!

Collapse
 
jasterix profile image
Jasterix

This was a good point. I went back and made it a bit more of a jerking motion aka less smooth

Collapse
 
independence profile image
Independence

Hello @jasterix , I'll like to have access to the playlist. Thanks.

Collapse
 
ila7xx profile image
Ali Aftab Bhuiyan

WOW.. Superb 👌

New programmer and javascript

Stop by this week's meme thread!