Cover image for Focused Creativity - Don't Lose Focus

Focused Creativity - Don't Lose Focus

jackdomleo7 profile image Jack Domleo Updated on ・2 min read

All my articles are first published and hosted on my blog - you can find this article here. You may also be interested in my tweets on my Twitter profile and my monthly newsletter. 🔥

What is 'focused creativity'?

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! 💪

Posted on by:

jackdomleo7 profile

Jack Domleo


A front-end developer with a passion for UI/UX, accessibility & self-development.


markdown guide

The no preview one is pretttttty good although would cause a little anxiety :) Might try that, thank you.


I have heard that a lot 😅 But it's all good, there's been some good ones so far, here are some of the attempts on CodePen (but there are other attempts elsewhere) - codepen.io/collection/XdJmeB


Cool will check those out. On a side note your twitter says you're a stutterer lol me too! Well I was, thought I beat it, but when around family and friends it breaks out in full swing :D

Hey man! That's awesome! 💪


Wow!!! Thank for this, now I know how my coding journey is gonna be from now on. Thanks man


Glad it helped! It doesn't always work, but the idea of abstraction definitely helps me focus on something. I can often get too hung up on the CSS when I should be doing somehting like Vuex 😅