comiCSS

I drew this cartoon with HTML and CSS today. It is based on a thread that started the other day after I posted this silly joke on social media: The W3C released a new HTML element out of nowhere. It was the element of <surprise>. (I said it was silly) It is a really basic pun, but I like it and I li

Tomorrow is Monday so there will be two new things on the site: A new game (Branches, a CSS-version of NYT's Strands) A new comic (decorating this post, and shared with more information before) Even with some technical problems at home (the Internet service went off for a day), I have been able to c

A cartoon versio of one of my terrible CSS-Dad Jokes. And an "educational" one at it. The drawing uses the property that it mentions to create the reflection of the character. Links to the joke on the site: Permalink: https://comicss.art/comics/245 Image link: https://comicss.art/comics/245/webkit-b

Monday is Groundhog Day! In the morning of February 2nd, in the small town of Punxsutawney, Pennsylvania, a groundhog named Punxsutawney Phil will come out of its burrow and tradition says that if he sees his shadow, then it will be six more weeks of winter web developers will need to add six additi

Everyone loves a good conspiracy. The web is held together by standards, browsers, frameworks… and a vast network of deeply suspicious nonsense. CSS specificity? Browser support? JavaScript APIs? What if all of it were part of a much bigger plot? Have you ever wondered if there’s something more goin

The next comiCSS cartoon is a pie chart coded in HTML and CSS, with a summary of some of the benefits from TailwindCSS... or kind of... 😅 I recorded the process and have put it as an unlisted video until publication on June 30th (next week). Here it is if you want to watch it: https://www.youtube.c

I like a sign that can be commonly found in coffee shops in the USA (although I've seen versions of it in other countries): Unattended children will be given espresso and a free puppy. This is a that same sign, with a CSS twist, and coded in CSS: The cartoon in itself is a grid with two columns Each

Some of the bad CSS-dad jokes in cartoon form. Soon to be published on the site.

I liked the format from the previous cartoon: Box grid with 4 squared panels Simple characters that can be easily personalized Monochrome with the option to add a spark of color I will eventually create a utility class/HTML component library to streamline the creation of this type of comic, but for

This was a silly idea I had. It is tangential to CSS and incredibly silly. Seriously, I'm almost ashamed, and at the same time, I like it, or at least the idea, but maybe not so much the implementation. Some notes about this comic: It is still a work in progress; I would like to clean the lines a li

Today was May 4th, and I released a couple of cartoons related to Star Wars. It's two versions of the same cartoon. The first one was an old 5.25" telling an SD card, "I am your father" (I have a similar t-shirt but with a USB key). The second cartoon was more CSS-related. In it, the HTML <table> ta

This will be one of the cartoons for next week. It continues the series of cartoons that I started for the second anniversary... and that will become a regular style, too. It is slightly animated (but poorly, so I wouldn't recommend activating the animation). It is a drawing based on the movie serie

Gandalf arrives precisely at the right time in another Lord of the Rings/comiCSS crossover (I've done 3 or 4 already, and I have plans for 1-2 more). Never late. Never early. Precisely like the CSS animations. Here's a private CodePen with the source code and live demo. --- This other version is mor

The other day, Jorge Baumann shared a few CSS jokes e on Twitter, and I told him I'd be "stealing" one of them to make it into a cartoon for comiCSS... and here it is! Using a previous cartoon as the base for this one, it was easy to set things up. Hopefully, it is clear that one is a class selector

Rap battling (or battle rap) is a type of rap performance in which two or more rappers sing while throwing dialectic attacks and insults at each other. This cartoon plays with the homophones Rap and Wrap to make a silly joke with Flexbox and the flexbox-wrap property. I will complement the cartoon w

Creating this comic took way longer than it should, at least longer than I expected, considering that many of the panels are copy-paste from one of the top 3... I needed to get it out, considering it has been pending for quite a while. But once completed, it doesn't look great to me (maybe because i

They say an apple a day keeps the doctor away... But does that apply to web development and CSS, too? This cartoon tries to answer that question. I also coded an alternative version, a little bit more educational, highlighting the parts of the box model using the same drawing: It may not be all clea

...And we are back from the break. I hope you had a great start to the new year. Now it's time to go back to the routine, including drawing weekly comiCSS cartoons. This will be next week's comic. I am still working on some details (legs for the caterpillar and the butterfly, antennas for the butter

This is one of those cartoons that are not especially funny but hope to make people think or trigger some response. It's another cartoon on my to-do list for a while, but I was never convinced of the result. I made two versions of it; both are animated (but the animation pauses if the reduced motion

A keyboard trap is a bad UI pattern in which a user can get into a component or element of our application using the keyboard, but it is impossible getting out of it just by using the keyboard. Not to be confused with a focus trap, which is basically the same, but with a keyboard exit (it may be a c

Accessibility- and WebDev-Twitter is in turmoil after the shadowban and permanent suspension from the platform of a well-respected user (Manuel Matuzović). He is the creator of HTMHell, a website that collects bad HTML patterns and that includes recommendations. And one of his catchphrases is "A div

This year I read The Lord of the Rings and The Hobbit for the first time, and I started watching the movies with my kids (although they are still too little). This cartoon combines both LOTR and CSS in the funny scene from the movie where Pippin asks about the second breakfast: Aragorn: Gentlemen, w

An old comic strip from the late Argentinian cartoonist Quino (author of Mafalda or Quinoterapia) is the inspiration for this cartoon. In the original, a couple meets at a museum, talks, and decides to meet at a cafe with the name of their (common) favorite painting. Unfortunately, one goes to the M

The Pomodoro Technique is a time management method that consists of repeating work and break intervals. The origin of the name is funny: the method's creator used a tomato-shaped kitchen timer to control the work/break blocks (Pomodoro means tomato in Italian). It is a great way to manage tasks and

Next week's joke is about `float.` And I coded the small "float joke" to accompany it. It will probably go next Thursday, as it is too simple to make it an entire publication. It is the first cartoon in which I use @layer (to be honest, I don't know why I wasn't using them before, even when mine is

A Newton's cradle is a device that showcases the conservation of momentum and energy in Physics. In this animated cartoon, I play with the idea of making a silly pun involving little spiders and the Interwebs. It has the same style (and font) as the last cartoon I shared with the fish ranting about

I like the simplicity of this cartoon... but because it uses `drop-shadow` (and combines it with some transforms), it doesn't look nice on Firefox or Safari 😓 It is a joke about Moses parting the waters of the Red Sea by using his flex abilities. The cartoon uses Flexbox and justify-content (the co

This is an old Mathematical joke. I coded it in a little bit and, although it is not directly related to CSS or web programming, it was drawn with HTML and CSS. See the source code here: https://codepen.io/alvaromontoro/full/mdXmMzZ And a video of how it was done: https://www.youtube.com/watch?v=X7v