8 February 2022 | get inspired | | 0 Comments

Animation techniques for adding and removing items from a stack

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 […]

31 January 2022 | get inspired | | 0 Comments

You want enabling CSS selectors, not disabling ones

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, […]

25 January 2022 | get inspired | , , | 0 Comments

Build an accordion menu using HTML, CSS and JavaScript

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 […]

JavaScript form validation – Build a JavaScript project for beginners

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 […]

12 January 2022 | get inspired | | 0 Comments

CSS flexbox tutorial – How to build a fixed side and bottom navbar

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 […]

5 January 2022 | get inspired | | 0 Comments

Native bracket pair colourization in Visual Studio Code

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 […]

29 December 2021 | get inspired | , | 0 Comments

So many little design helper sites!

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 […]

22 December 2021 | get inspired | | 0 Comments

On the dl

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 […]

14 December 2021 | get inspired | , | 0 Comments

How to create pure CSS glitch animation for images and SVG

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 […]

7 December 2021 | get inspired | | 0 Comments

What is the DOM? Document Object Model meaning in JavaScript

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 […]

Scroll to top