Alvaro Montoro

Published in Level Up Coding

·Pinned

How to Have Fun (and Win) in a Hackathon

A guide with tips and tricks to enjoy and make the most out of development events — A hackathon is an event where developers get together for a limited time (it can go from a few hours to a few days) to collaborate on a project. There are many types of hackathons: internal to a corporation or open to the public, independent or as part of a…

Hackathons

13 min read

How to Have Fun (and Win) in a Hackathon

Published in Counter Arts

·Pinned

100 Days of CSS Illustrations

A collection of daily drawings created with HTML and CSS — As a personal fun project, I challenged myself to do 100 CSS drawings in 100 days. I published a series of 10 posts with 10 images each. This article has all images in a single post, as well as links to videos on how they were drawn. Some of the…

CSS

20 min read

3 hours ago

Fun with CSS Combinators

Learning web development through comics: Four CSS combinators (and the universal selector) walk into a bar… — As part of the comiCSS webcomic, I drew a short cartoon to explain how the combinators (and the universal selector) work. Hopefully, it helps illustrate how the CSS combinators work and what elements would be impacted by them: It doesn’t include the descendant combinator because it would be just a…

Web Development

3 min read

Published in Level Up Coding

·May 14

Fun with justify-content

A cartoon about FlexBox and the values of justify-content — As part of the comiCSS webcomic, today I coded a cartoon about FlexBox and the values of justify-content (see the code here): I was trying to do something different and explain the concept in a fun way, illustrating the main options forjustify-content: flext-start: pack items at the beginning (by default…

CSS

2 min read

Published in Level Up Coding

·May 14

Drawing a flame with CSS

A detailed tutorial on creating CSS art of a burning match — I completed an initial version of this flame in around 30 minutes and shared it online. Then I uploaded it to Instagram, and something caught my attention. Usually, I don’t apply filters when sharing CSS art (it would be cheating), but something took me to the filters this time. I…

CSS

9 min read

Published in Level Up Coding

·Apr 30

Creating a firework effect with CSS

A simple effect with CSS and a single HTML element — Last week I created a firework effect with CSS. It is relatively simple (it only requires one HTML element per firework) and customizable (it uses CSS custom properties to customize colors, sizes, positions…) Here is a demo of the effect (see in full screen): Before I continue, let me…

CSS

6 min read

Apr 26

Interactive SNES Controller in HTML + CSS

A “realistic” version of the Super Nintendo controller with 3D CSS — This past weekend, I created a demo using 3D CSS: an interactive SNES controller. The idea was to get a “realistic” version of the controller, coding it entirely with HTML and CSS. The results are on this CodePen demo (link to full screen): And it is interactive! Click on…

CSS

2 min read

Interactive SNES Controller in HTML + CSS

Apr 11

My ABC of Graphic Novels

An essential graphic novel or comic book for each letter of the alphabet (plus some extras) — This article will be a nice break from the technical writing I usually do to focus on something I like: reading comic books and graphic novels. I won’t claim to be a graphic novels expert because I am not. However, I enjoy reading them all the time (and some…

Comics

13 min read

Mar 13

One month publishing a CSS webcomic

Recap of the first month of life of comicss.art — 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…

CSS

5 min read

Published in Level Up Coding

·Mar 13

Giving new meanings to the color functions in CSS

A tongue-in-cheek article about CSS and colors — When talking about colors in HTML and CSS, most people only know the “classic three”: RGB, Hex (which is a type of RGB), and HSL. But there are many ways to define colors in CSS. This article is a tongue-in-cheek review of some of the different ways to write a…

CSS

5 min read

Giving new meanings to the color functions in CSS