Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

Avid Reader

Comic strip with two panels and a joke about freezes in Texas and how running CSS animations on a laptop will keep the main character warmer.

comiCSS: Month One

comicss css html webdev comics

Last month, I created comiCSS—a project with comics about CSS drawn in CSS. It is a fun project (I like drawing in general and drawing with CSS in particular), and I'm enjoying it so far.

As part of the project, I set some goals for publication, engagement, and economics (this last one is more like an experiment.) In this post, I will review those goals just after the site reaches its 30th day of existence. But as a tl;dr version: everything is on track or exceeding expectations, and it's impressive.

The webcomics

During this first month, I published 15 comics on the site. It started with eight initial comic strips, and it grew at a rate of 2 more publications per week. But not all of them were new. Some are re-purposed cartoons that I drew months/years back.

I want to grow the site organically by creating new content, but the two publications per week may be too much for me at the moment. So I will continue publishing just one new webcomic a week and having some "specials" here and there. I will be happy to keep a pace of 4 to 6 new comics each month.

These are the comics published during the first month of comiCSS (remember, all are HTML and CSS. You can see the code on the site):

The originals

A cartoon with two panels. In the first one, there's a black-and-white character small in the box, and says 'sometimes I feel quite small'. In the second panel, the character looks big in the box, and says 'then I flex a little'
A cartoon with one panel. A serious-looking black-and-white character over the repeating message 'The world is a really peculiar place. There are times when you feel like break-dancing, and some other times, when you just feel like word-breaking...'

Playful Unicorn and Lion

Cartoon showing a lion with a unicorn hat saying 'I am a unicorn! Roar!... and so forth'. And an ashamed unicorn smiling next to it.
Cartoon showing a unicorn with a lion mane wig hat saying 'I am a lion! Roar!... and so forth'. And an ashamed lion smiling next to it.

At the barbershop

A comic strip with two panels showing a barber with a razor and a client. In the first one, the barber asks 'do you prefer the neckline square or rounded?'. In the second one, the client replies 'border-radius: 100% / 20%' to the surprise of the barber.

Texas Freezing Weather

We had another batch of freezing weather in Texas (although not as bad as last time), which triggered some CSS-related comic strips.

Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...'' and it has a white man reading a text message on his phone: *message from parents* It is freezing in Texas. What are you doing to stay warm?. In the second panel, the man replies: Don't worry. I'm fine. I'm holding a laptop and opened one of my CSS animations.
Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...' and it has a white man reading a text message on his phone: *message from parents* Temperatures will drop to the single digits. In the second panel, the man replies: Got it! Then I'll open the 3D animations.
Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...' and it has a white man reading a text message on his phone: *message from parents* This is serious!! It could get really cold!!!. In the second panel, the man replies: Ok, ok. I'll use Chrome to open the animations.

Animated CSS/Accessibility

The original version of this cartoon is animated, but the comic strip looks weird. The 3D animation gives a nice extra touch.

Comic strip with two panels. The first one shows a white man saying: 'You cannot write accessibility without CSS'. The second panel is a view of the same white man from behind, he is holding a blood-soaked knife and says: nor accessory to murder... but let's put a display:none on that one for now.

Valentine's Day Special

Comic strip with a single panel showing a fly and a spider smiling at each other with a heart in between

Superheroes

I'll probably do many cartoons like this. They are silly and easy to make. Coming up with the ideas for the content is the tricky part.

Comic strip showing CSS code that describes different comic superheroes. The code is too long to put in an alt text, please see the demo.
I'm especially proud of that last one.

Pikachu Meme

Comic strip showing the surprised Pikachu meme, with the text: Me: *builds CSS animation*. *Computer fan goes crazy*

Scroll Snap

Comic strip with 6 stacked panels. The first, third, and fifth one show a man scrolling a mouse in front of the computer. The second and fourth show the man snapping his fingers. The sixth shows the man worried as someones says 'that's not how you do scroll snap!'

Accent Colors

Comic strip with 5 panels showing a white man getting angrier and angrier while updating the color value on CSS to green written in Spanish, German, French, and Ukranian. In the final panel he asks 'Hey, honey! How did you say accent-color worked in CSS?'

Tribute to Mafalda

Based on a classic Mafalda cartoon strip. I added a reference on the website.

Cartoon of a man looking at a laptop and saying 'My CSS is to Web Development what Communism is to Democracy!' (based on a classic Mafalda cartoon)

Although they have many things in common, there is no clear definition to all the cartoons. Each of the comics has a slightly different tone and approach. I am still trying to find my style.

Stats and Numbers

Engagement

I created a comiCSS Twitter account and started posting the comics, links, updates, and previews of what's coming.

Trying to keep it encouraging but not too annoying, during the first month, I tweeted 48 times. And that turned out in 113 people following the account—humble numbers for a humble project. And I prefer it that way for now: keeping it small and maintainable at the beginning may be good for my overall mental health.

In the future, I'd like to increase the rate and topics of the tweets: not only comics but also talk about the properties used, how to draw them, share more videos of how the comics are coded, etc. And yes! There are videos! Just like this one:

Economic update

As I explained in the introductory post, I don't expect to make money from this project, but I will be happy if it can generate enough to be "self-maintainable."

It is a modest goal ($12/year, which is the domain cost, as the hosting is free, and the coding is for fun, so it doesn't count.) And the tools to do it are simple and non-invasive to the web visitors:

  • Web monetization
  • Brave Creators
  • Patreon
  • Blog articles promoting the site (yes, like this article)

It seems easy and, at the same time, challenging. But I have some good news: the project got a new patron on Patreon who pledged $1/month. (Thank you, Matthias!) If the patron stays the whole year, comiCSS will reach the economic goal automatically (minus the taxes and fees that Patreon charges.)

On top of that, comiCSS got $0.02 through web monetization (I think web monetization is a great idea, but it doesn't seem like it's all there yet), and $1.34 through the Brave Creator program (I wish I knew who it was to say "thank you.")

These numbers are low but exciting because they mean that comiCSS could stay online paying by itself. Remember, this is a static site developed in HTML and CSS (with a bit of JavaScript to simplify the navigation.) So anything that is not "losing money" is a success.

What's coming

I recently drew some browser logos in CSS using a single HTML element for each of them (a couple of them need rework, but close enough):

I have some ideas for them (although not all of them related to CSS), and they may start making some appearances in the comic strips soon (as soon as tomorrow!)

Article originally published on