Every time I talk to other developers, the consensus seems to be that CSS (Cascading Style Sheets) is terrible. I even find myself forgetting certain common selectors and properties frequently - I wanted to put an end to this.

What it does

CSSchool provides the user with various CSS challenges to help them brush up on some basics. Through a minimalist design and an interactive coding environment in the browser, users can learn CSS with fun and ease.

How I built it

To keep with the spirit of the project, I used zero front-end frameworks. Actually, I lied - I used VanillaJS and VanillaCSS. I truly believe these powerful frameworks can outdo all others in terms of preformance, footprint, and ease of installation/setup. But don't just take my word for it, check out these informative sources: VanillaCSS, VanillaJS.

Challenges I ran into

Setting up and using the CodeMirror web text editor in conjunction with WebComponents. Some of the content on the UI is dynamically generated, which caused some problems with particular features down the line.

Accomplishments that I'm proud of

I tried going for a simple, stylish, minimalist UI - I think I've accomplished that.

What I learned

Sleep is something I shouldn't take for granted.

What's next for CSShool

More challenges, more sophisticated CSS code parsing, more customization features for the UI, more 'gamification.' I heavily considered adding a point system but I felt it arbitrary for the few number of challenges there. Additionally being able to save specific challenges that you find more interesting/challenging would be useful; also I considered a leaderboard, etc.

Share this project: