DEV Community

Jasterix
Jasterix

Posted on

3 Days of CSS Challenges to try

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:

  1. 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.
  2. 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.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
dippas profile image
dippas • Edited

If I may give you an advice, try from the start not using px as unit and instead use relative units such as em, or rem, (my personal choice is rem) you can see more in-depth info about those 3 units here (I'm not sure if I can share links in comments- couldn't find anything related in COC). Hope the best to your Challenges ahead. And I guess you will see CSS is capable of doing beautiful things on its own :)

Collapse
 
jasterix profile image
Jasterix

@dippas thank you for pointing that out! I think you're right about getting into the habit of using rem or em. I've stayed away from em because of I'm still not comfortable with the compounding effects, but there's no reason to not be using rem right off the bat.

Are there any other good habits you'd recommend for learning CSS the right away?

Collapse
 
dippas profile image
dippas

@jasterix I might add that when you reach the media queries, usually there are two approaches : mobile first (building from mobile to desktop) and the other one is the non-mobile first approach, and (again from my personal experience) you should always try tackle the design from mobile first approach, as it will make your life easier.

Collapse
 
jvarness profile image
Jake Varness

Codepen also has competitions all the time that you can do. People create a lot of really neat stuff with CSS/HTML!

Collapse
 
jasterix profile image
Jasterix

Definitely! Those competitions are a motivation for getting to be that good. But idk if I'm ready to join one yet. Hopefully, by the end up the 30 days, I'll feel confident enough to tackle one

Collapse
 
jvarness profile image
Jake Varness

Don't be scared! Pop open the editor and W3 Schools, play around with some CSS, and make something you're proud of!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.