DEV Community

Cover image for Join Me for 100 Days of Pure CSS
Suzanne Aitchison (she/her)
Suzanne Aitchison (she/her)

Posted on

Join Me for 100 Days of Pure CSS

Today marks the start of the Scottish 100 Days Project, the mission of which is to:

give anyone, regardless of age or ability, the framework and permission to get creative. It challenges you to pick your creative outlet and relies on your willingness to work to achieve a creative boost.

This year will be my first time participating in something like this, and I thought I'd invite you all to follow along / join in!

What I'll be doing

The aim of the project is to encourage creativity, and I'll tell you now I am not in any way an artist πŸ˜‚

Lots of project participants will be drawing, painting, crafting... and I'll be... coding! I'll be creating one CodePen a day with an image made completely in plain ol' CSS.

Why???

All work and no play...

Like a lot of us, I have a lot of side hustles. I spend a huge amount of time improving my knowledge of web accessibility, maintaining my site Up Your A11y, and contributing to open source projects. I do all that stuff because I'm interested in it, and feel super driven to do those things, but at the same time it is kind of hard work sometimes! I have a roadmap of "things I want to do" and sometimes... just sometimes... it can start to feel a little like a second job.

So the 100 Days challenge is my way of re-focusing my brain on what got me into tech in the first place - coding is fun! This challenge is purely an exercise in enjoyment πŸ˜„

I'm hoping that doing it will be a nice little break in more serious things, and an opportunity to just do something silly and fun with code.

Follow along - or join me!

I kicked off my 100 days challenge with a little CSS image inspired by my workmate's current mouse problems - I mean who could deny this little cutie a place in their home??

I'll continue to add my work to my CodePen collection each day, and I'll be tweeting them out from @s_aitchison as I go. Feel free to follow along!

Even better, if you like you could join me! Part of the fun of the 100 Days challenge is you can do it from anywhere - if you do decide to give it a go let me know; I'd love to follow your progress and be inspired by you πŸ˜„

Discussion (25)

Collapse
9da profile image
9DA

I looked at this before and thought "That is so cool, but I don't have time." Now I do and I feel really eager to try, so I'll join and see how it is going. Starting my first picture now!

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Amazing! Please do share what you create - would love to see 😁

Collapse
9da profile image
9DA
Thread Thread
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Love it! The moon phases are really cool. I've followed you on CodePen - looking forward to seeing your other creations 😊

Collapse
dhruvgarg79 profile image
Dhruv garg

Hey it is really awesome how with only css you have build this awesome mouse.

I checked codePen and can't really understand this:
polygon(29% 83%, 28% 94%, 45% 80%, 44% 100%, 0 100%)

How do you figure out stuff like above?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

I'll let you in on my secret... (whispers): bennettfeely.com/clippy/ πŸ˜„

I'm still really new to this, so I use clippy as a starting point, and then once I've got something going in the CodePen I start tweaking with the percentages. Honestly I found it easiest to start learning about clip-path that way too - once you have a live example in your editor, you can start tweaking the percentages and begin to see what those percentages actually mean in terms of what comes out in the UI.

There's so many great tools out there πŸ˜„

Collapse
dhruvgarg79 profile image
Dhruv garg

Thank you for telling us your secret :)

I didn't knew about clip-path and polygon in css. I have done very basic web front-end. But this example is really awesome. I will also try to make a small thing using it.

Thread Thread
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Yay! I'd be excited to see what you make 😁

Yeah in my normal front-end life I'd never need something like clip-path (or if I did it would be very very rare!) which is partly why I thought this might be a fun challenge 😁

Collapse
waylonwalker profile image
Waylon Walker

This is a really cool tool. 😎

Collapse
minervalong profile image
Vanesa Perea

Interesting challenge! :D I'm trying 30DaysofJavaScript and I'm in CS50 week 0 so maybe I should save it for next round u.u However, I would use it only for design planets and space elements for a project...Super cute your mouse >o<

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Ooh space and planets would be fun to do!

Collapse
minervalong profile image
Vanesa Perea

I want them to appear depending on time :D I'll follow along your journey :)

Collapse
bernardbaker profile image
Bernard Baker

Really like the mouse!! I've used clippy too.

Collapse
waylonwalker profile image
Waylon Walker

Holy cow!$&$! This is day one! You have some wicked css talent here. Can't wait to see what is to come!

Collapse
sanketmehta7 profile image
Sanket Mehta

Started something similar with bit of JS interaction. Here
codepen.io/sanketmehta7/pen/PoPRQgJ
codepen.io/sanketmehta7/pen/ZEbjjZP

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

These are so cool! 😍

Collapse
jlohani profile image
Jayant Lohani • Edited

That artwork is really cool and considering you created that purely through CSS is more amazing. Looking forward for more artworks in future.
Would follow along for sure. All the Best. ✌

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! I have a whole lot to learn and already the learning curve has been steep!

I think the one-a-day aspect will help keep me from being too perfectionist about it though πŸ™‚

Collapse
jlohani profile image
Jayant Lohani • Edited

The best thing about these types of marathons is that it creates discipline. It is not easy for many to sit every day and do a specific task or study a particular topic for many consecutive days and that includes meπŸ˜….
I believe that "100 days of pure CSS" is a great initiative and wish you all the best again. I work fine with HTML and JS but I am not much good at CSS so I would be following your work daily. πŸ™‚βœŒ

Collapse
nishchit6 profile image
Nishchith Rao

I am thinking 100 cartoon characters would give me the motivation πŸ˜πŸ˜‚

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

That would be such a cool project!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

So cool! Looking forward to your projects. Good luck πŸ˜‰

PS: Followed you on Twitter!

Collapse
gnio profile image
Gnio

I look forward to once have the skills to join this kinds of amazing activities.

I also look forward to hear more from you. I'm following on CodePen.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

In all honesty I feel like my skills are very minimal in this area πŸ˜… But practice makes perfect and I'm looking forward to learning a lot!

Thanks for following πŸ™‚

Collapse
mansoorkhan95 profile image
mansoorkhan95

Thankyou for this !!

I have knowledge of some very basic CSS .

I want to know how you define this Moon

:root {
--moon-size: 300px;
--moon-shadow: #