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)
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!
Woow can i play with this too!???
play to your heart's content :D
Why is this soo smooth ?!
This was a good point. I went back and made it a bit more of a jerking motion aka less smooth
Hello @jasterix , I'll like to have access to the playlist. Thanks.
WOW.. Superb 👌