How to Use Animations in CSS

Using CSS Animations CSS animations add beauty to the webpages and make transitions from one CSS style to the other beautiful. To create a CSS animation sequence, we have different sub-properties in the animation property in CSS : * animation-delay * animation-direction * animation-duration *

Read More

The Hexadecimal Number System Explained

Hexadecimal numbers, often shortened to “hex numbers” or “hex”, are numbers represented in base 16 as opposed to base 10 that we use for everyday arithmetic and counting. In practical terms, this means that each column of a number written in hexadecimal can represent up to 16 values. Digits in

Read More

CSS Grid tutorial: Learn to prototype websites quickly with CSS Grid

The CSS Grid module is a fantastic tool for creating mockups of websites. It allows you to experiment with the layout faster than any other system I’ve tried. In this article, I’ll teach you how. I’ve also created a free CSS Grid course. Click here to get full access to

Read More

Ember QuickTips: How to breakup and import SASS/CSS files separately

There are times when it’s desirable to break up your stylesheets into multiple files and import them into your project separately. This came up in a side project I started recently, and I thought y’all might benefit from what I came up with as a solution. It’s a quick and

Read More

Z Index in CSS: What it Is and What it Does

What is a Z Index? Z Index (z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements (position:absolute, position:relative, or position:fixed). Possible

Read More

React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (with examples)

There’s no one right way to style your React components. It all depends on how complex your front-end application is, and which approach you’re the most comfortable with. There are four different ways to style React application, and in this post you will learn about them all. Let’s start with

Read More

How to tackle CSS specificity issues and when to use the !important keyword

by Muna Mohamed How to tackle CSS specificity issues and when to use the !important keyword A Case Study Recently, there was a Twitter poll floating around where the user asked their followers a question about CSS specificity . Unfortunately, I was unable to find the original tweet (comment below

Read More

An intro to CSS Image Sprites: they’re easy to learn and great to know

by Zlatan Bekric An intro to CSS Image Sprites: they’re easy to learn and great to know Photo by Markus Spiske [https://unsplash.com/@markusspiske?utm_source=medium&utm_medium=referral] on Unsplash [https://unsplash.com?utm_source=medium&utm_medium=referral]Image sprites have been here since the 1970s. They were used for the first computer animations on Atari and other consoles. As time went on

Read More