Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an element in a performant way that also affects the position of other elements? Tricky! That’s […]

An enabling selector is what I call a selector that does a job without disabling the particular rule. I’ll explain using the following example. Let’s say we have list items and we want to add the margin to every one except the last one. Here’s the usual, disabling way. First, we add margin-bottom to all elements. Then, […]

You can use HTML, CSS and JavaScript to create stylish and dynamic web elements. And one useful element you can build is an accordion menu. Accordion menus expand and collapse when a user clicks a button. It’s a great way to not have to show all the info about a topic up front, and instead […]

Today we’re going to learn how to do form validation in JavaScript. We’ll also add images and media queries to build out the entire project and keep it as a portfolio. You can get the source code, including the images, from here: CodePen GitHub Also, you can watch this tutorial on YouTube as well if […]

Flexbox can help you simplify the process of creating both basic and advanced layouts. And it’s pretty straightforward to create side and bottom navigation menus with CSS flexbox or Grid. These layouts are so popular that they appear almost everywhere on the web (for example check out Twitter’s sidebar, which inspired this article). Normally, to create a fixed […]

I’m a big fan of the Bracket Pair Colorizer extension, but it looks like this is native in VS Code now and much faster! Configure native bracket pair colourization Make sure to remove the Bracket Pair Colorizer extension. Update VS Code Open your user settings via CMD (CTRL for non-Mac users) + Shift + P and type settings. The […]

I had one of those little single-serving designer helper sites bookmarked the other day: getwaves.io. Randomized SVG waves! Lots of cool options! Easy to customize! Easy to copy and paste! Well played, z creative labs. But then I saw the little link at the top of the page, that it was part of something called Haikei. So I […]

The <dl>, or description list, element is underrated. It’s used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. The Anatomy of a Description List I’ve been saying <dl>, when really, I’m talking about three separate elements: <dl>, <dt>, and <dd>. We start with our <dl>. This is the description list, akin to using a <ul> for […]

A few days ago, I made a post about how to make a Glitch Effect on pure CSS. But in that post I told you how to make a similar effect only for text. Today I want to tell you about how to implement such animation for images and SVG. Images Here, in fact, everything […]

If you have just started learning JavaScript, you might have heard of the DOM. But what is it exactly? In this article, I will explain what the DOM is and provide some JavaScript code examples. We will take a look at how to select elements from an HTML document, how to create elements, how to […]