JavaScript is the most popular programming language in the world, so it’s no wonder that it’s one of the most sought-after skills in the web development industry. In fact, the Devskiller IT Skills and Hiring Report (2020) reports that 72% of companies are looking to hire JavaScript experts. Additionally, of…

CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable. By using prefixes, we can use these newer CSS features with the browsers that support them — instead of waiting for all browsers to catch up. 🤓 Want…

CSS Animations are a great way to animate CSS properties from one to another. While we can use transitions to perform single movements, animations give us much finer control. Some common properties we might animate include colors (color& background-color), and numbers such as height & width. Check out the full…

In this tutorial, we’re taking a look at how to animate components using CSS transitions! A transition occurs when we tell a CSS property value to change, over a specified period of time. We do this with the transition property, which is a shorthand of the following properties: transition-property transition-duration …

As developers, we want our HTML elements to look the same way regardless of which browser is being used to view our pages. Unfortunately, this isn’t the case due to the way browsers run. Each browser has its own default stylesheet, which specifies some minimal rules that apply to elements. …

The transform property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them. For example: .element { width: 30px; height: 30px; transform: scale(10); } Despite our height and width declarations, the transform scales our element to ten times its original size! Transforms are especially fun when combined…

CSS Filters are an extremely useful way to apply visual effects to elements. Tasks that might usually be performed with Photoshop or other photo editing software, can be done right in CSS! We can use the filter property to add effects such as blur or saturation, or change the opacity…

Feature Queries are used in CSS for precise feature detection. And they’re now supported by all the modern browsers! We use the @supports keyword. For example: @supports (height: 100vh) { .container { height: 100vh; } } Here we’re checking if the vh unit is supported. …

Media queries are a CSS technique that we can utilize when making our pages responsive. We use @media to create a CSS rule that only executes if a specified condition is true. For example, if the device browser window is 600px or smaller, set the background-color to orange: @media only…