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 😄
Top comments (25)
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!
Amazing! Please do share what you create - would love to see 😁
sure :) here it is: codepen.io/collection/DRxQzk?grid_...
Love it! The moon phases are really cool. I've followed you on CodePen - looking forward to seeing your other creations 😊
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?
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 😄
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.
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 😁
This is a really cool tool. 😎
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<
Ooh space and planets would be fun to do!
I want them to appear depending on time :D I'll follow along your journey :)
Really like the mouse!! I've used clippy too.
Holy cow!$&$! This is day one! You have some wicked css talent here. Can't wait to see what is to come!
Started something similar with bit of JS interaction. Here
codepen.io/sanketmehta7/pen/PoPRQgJ
codepen.io/sanketmehta7/pen/ZEbjjZP
These are so cool! 😍
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. ✌
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 🙂
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. 🙂✌
I am thinking 100 cartoon characters would give me the motivation 😁😂
That would be such a cool project!
So cool! Looking forward to your projects. Good luck 😉
PS: Followed you on Twitter!
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.
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 🙂
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: #