Topic Archives

CSS Tutorials

Get step-by-step guidance on basics, advanced techniques, and best practices, to help you master CSS and create dynamic, engaging websites.

View all CSS content

25 Fantastic Tutorials For Learning UI Design in Figma

25 Fantastic Tutorials For Learning UI Design in Figma

UI Design

From UI basics to more advanced techniques, with the help of these tutorials, you’ll be able to learn and master Figma in no time.

CSS Properties to Make Hyperlinks More Attractive

CSS Properties to Make Hyperlinks More Attractive

CSS / UI Design

There are several new CSS properties available for customizing hyperlinks, giving you a higher level of control over spacing, sizing, and more.

The CSS Practices That Can Hurt Accessibility

The CSS Practices That Can Hurt Accessibility

CSS

We take a look at a few CSS practices that can hurt accessibility, including common features that will require careful consideration.

How to Target Design Elements with the CSS :not Pseudo-Class

How to Target Design Elements with the CSS :not Pseudo-Class

CSS / UI Design

:not allows you to target elements that do not match a list of provided selectors. The result is more control over niche design features.

CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials

CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials

CSS

CSS Image Filters are a simple method for adding unique styles to images. We’ve collected the best free resources to help get you started.

An Introduction to CSS Grid

An Introduction to CSS Grid

CSS

If you’re looking to learn more about CSS Grid, we provide a rundown of what you need to know, along with some helpful resources and tools.

The Dos & Don’ts for Styling Hyperlinks

The Dos & Don’ts for Styling Hyperlinks

UX Design / Web Design

What should we keep in mind when styling hyperlinks? Here are some tips for making them beautiful and keeping them usable.

How to Detect User Preferences with CSS

How to Detect User Preferences with CSS

CSS / UI Design / Web Design

Web design is all about building user interfaces (UI). It’s a massive part of what we do. We create something that we think users will like. We often use established…

How CSS Variables Can Improve Efficiency & Consistency

How CSS Variables Can Improve Efficiency & Consistency

CSS / UI Design

Learn how CSS variables can improve efficiency and consistency in your projects, allowing for easier maintenance and streamlined updates.

Better Responsive Design With CSS clamp()

Better Responsive Design With CSS clamp()

CSS / Web Design

With so many mobile devices on the market, we’re flooded with viewport sizes. That makes it especially challenging to design a fully-responsive website. CSS media queries have long been the…

The Good & Bad CSS Practices for Beginners

The Good & Bad CSS Practices for Beginners

CSS

Learn about some of the most common pitfalls when writing CSS and how to avoid them for cleaner, more efficient code.

Getting Started With CSS Flexbox Using Practical Examples

Getting Started With CSS Flexbox Using Practical Examples

CSS

Learn the basics, understand the syntax, and dive into the advanced techniques for creating flexible layouts with flexbox.

What Is Atomic Web Design and Do I Need It?

What Is Atomic Web Design and Do I Need It?

CSS

Web designers may use a number of techniques, approaches and philosophies while creating compelling and engaging with digital interfaces. Each designer has their own preferences – some prefer to work…

Simple CSS Transition, Transform & Animation Tutorial

Simple CSS Transition, Transform & Animation Tutorial

CSS

This is part 1 of a series of tutorials about practical use cases of CSS transitions, transforms, and animations. In this tutorial, we’ll look at a “flipping card” scenario, and…

How to Create Round, Flat and Flip-Style CSS Toggle Switches

How to Create Round, Flat and Flip-Style CSS Toggle Switches

CSS

In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a…

How to Create Revealing Content Overlays With CSS3 Transitions

How to Create Revealing Content Overlays With CSS3 Transitions

CSS

In this tutorial, I will show you how to create revealing content overlays with CSS3 transitions, allowing you to minimise content clutter and provide a neat user experience. Introduction I’ll…

How to Replicate the Bootstrap 3 Grid Using CSS Grid

How to Replicate the Bootstrap 3 Grid Using CSS Grid

Bootstrap / CSS

The past few years have seen a wide variety of methods for creating web page layouts. CSS Grid is one of the newest and probably the most game-changing layout technique…

Write More With Less (well actually with Sass)

Write More With Less (well actually with Sass)

CSS
12