Earlier this week, I decided to do a 30 days of CSS challenge. Having long acknowledged my difficulty with writing CSS, I reached a point this week where I finally wanted to do something about this.

Background

Since learning how to code, I have despised CSS for one reason or another:

it always took too long
my CSS never worked how it was supposed to
never quite new where to begin
it made no sense
don't even get me started with webkit
I was bad at it

But a couple of weeks ago, the Youtube algorithm finally worked in my favor and recommended a video CSS Positioning: Position absolute and relative explained by Kevin Powell, and something clicked.

The way Kevin explained this made sense to my oddball brain. After finishing that video, I found myself watching several Kevin Powell videos. His videos made me realize there was a better, "correct" way to do CSS. For example, understanding how CSS properties were intended versus how developers coopted them in their personal use meant that CSS wasn't intentionally be muddled.

More importantly, new standards of CSS (similar to JavaScript) were being developed to address these confusions. Most importantly, my curiosity increased.

Over the next few weeks, I randomly started playing around with CSS. I started reading about the important CSS properties to know, found myself returning to Kevin's videos and taking notes on which properties he often used and testing my understanding of each with Codepen.

Which brings me to now

Finally, this week, I decided to make an official attempt at consistent progress with vanilla CSS. In addition to my daily algo challenges and JavaScript practice, I want to challenge myself to learn one new bit of CSS for 30 days straight

Surprisingly, there aren't a lot of 30-day CSS challenges out there. In my searching, I found 3:

freeCodeCamp- this is a series of follow along YouTube videos. I might still do this, but wanted something that would force me to play around with CSS, rather than have someone explain it right away.
100 DAYS CSS CHALLENGE- this was cool, but 100 days seemed like a bigger commitment than I'm currently looking to make. I also hope to be employed by then. The website also offers no guidance.
30 Days of CSS Girls- the in between option. Short enough to commit to and with instructions + resources to solve each challenge.

So here it is: I Heart You, Coding Girls

Today, let’s draw a simple heart.

Seems simple enough. Right?

Wrong!

Completing this day one challenge meant exploring the following CSS properties:

position: absolute
transform: rotate
css pseudo elements
CSS positions (still need to some work here)

But finally, after reviewing the solution and looking up these 4 things in depth, I was able to recreate the solution yesterday and then again today.

<style>
.heart {
  background-color: red;
  height: 300px;
  width: 300px;
  position: absolute;
  transform: rotate(135deg);
  margin: 100px;
}

.heart::before {
  content:"";
  background-color: red;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  right: 140px;
}

.heart::after {
  content:"";
  background-color: red;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: absolute;
  top: 140px;
  right: 0px;
}
</style>

...

<body>
<div class="heart"></div>
</body>

3 Days of CSS Challenges to try

Background

Which brings me to now

So here it is: I Heart You, Coding Girls