Back to blog

Focused Creativity - Don't Lose Focus

All my articles are first published and hosted here on my blog, but you may also find these articles posted on blogging platforms such as and Hashnode. If you like my articles, you will also like what I share on Twitter and LinkedIn.

Focused creativity is the act of limiting some bounds to focus on one or a few aspects of a particular area.


Focused creativity is the abstraction of particular aspects on a small project on your learning journey to improve the desired skills.

How do I apply focused creativity?

Let's say you're learning CSS art; every day, you create something new but, you have an infinite number of project ideas that you could possibly do with CSS art, literally anything! You can spend a really long time deciding what to do.

"Do I do a CSS car today? What about a CSS teddy bear? No, a cake! Wait, the car sounds good!"

You could apply focused creativity here by choosing a theme before you start learning CSS art. For example:

"I'm going to learn CSS art by creating a different pure CSS car, every day."

This gives you focus - you're creating a car. A goal - the car should be better than yesterday's car. And a purpose - I'm going to compare the CSS used to create each car and identify where I have improved.

Focused creativity is applied abstraction - stripping away anything that will distract you from your focus.

That's all to focused creativity. It may not apply to all situations, but it will apply to a lot. Let's go through some more examples.


100 Days of Buttons

A button is a very simple, and a very common UI component. Design a different button every day. Your focus is the button and you can focus on improving your CSS.

  • Focus: Button, CSS, UI, UX
  • Abstract: HTML

No Preview HTML CSS

Also known as #NoPreviewHtmlCss. This is a challenge I created where you create something in HTML and CSS but you're not allowed to see the preview until you are finished. The focus of this challenge is to focus on thinking what code you're actually writing, rather than relying on the preview to make tweaks from. The design here is not important, but your own understanding of your own code and making it clean and semantic will get you far in this challenge.

  • Focus: HTML, Semantics, CSS, clean code
  • Abstract: UI, design

Daily UI

Daily UI is a daily challenge where you are given a UI component each day to create - they only want the UI.

  • Focus: HTML, CSS, UI, UX
  • Abstract: Functionality, wasting time thinking of a component

There are plenty more examples of focused creativity! If you've got any ideas after reading this article, please do share them!!

Hopefully, this short article was insightful into a phrase I hope to be used commonly to encourage quality learning! 💪