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: absolutetransform: 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>
Top comments (7)
If I may give you an advice, try from the start not using
pxas unit and instead use relative units such asem, orrem, (my personal choice isrem) 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 :)@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?
@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.
Codepen also has competitions all the time that you can do. People create a lot of really neat stuff with CSS/HTML!
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
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.