This Week In Web Design – October 8, 2021

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

Design trends on top of design trends. This theme of this month’s collection is trends that seem to build on each other. These examples use multiple trends listed here: hero typography, round buttons, and big branding. Here’s what’s trending in design this month… 1. Hero Typography Big, bold, and even unusual typography choices are the […]

Use Math.round() and template literals to round the number to the specified number of digits.

Animation in websites has reached new, incredible levels since the increased availability of free looped animation on the internet. The great news is that there are numerous sources available.  These could be samples, templates, or ready-to-use animations you can simply embed on your website.

Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.

How does the design process start for you? If you want to take ideation and creation to another level, conceptual design may be the place to start. Conceptual design can actually help you better design an idea so that when you start the process of creation, it is more developed and functio...

We take a trip back in time and examine what made the WordPress sidebar so special and share some potential sidebar ideas for a new era.

Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.

In this article I'm going to talk about branching strategies and different types of Git branches. I’m also going to introduce you to two common branching workflows: Git Flow and GitHub Flow.

How to display a confirm dialog box using JavaScript. The confirm dialog box allows you to perform actions based on the user input.

Removing a background from an image is extremely useful when it comes to creating content for blogs, social media, or other online platforms. It allows creators to make sure every...

A roundup of creative websites collected over the past couple of weeks that stand out with their great design and interactivity.

Designers matter too! Learn what the biggest project management pain points are for designers, and which project management features you should be looking out for.

Dumb trick alert!

Websites with animation are pretty common nowadays and we don't even know it. The animation could be injected into a website to make it the main focus of interest - landing pages, backgrounds, headers, and more. However, there are some websites that introduce the animation so subtly, readers don't often notice it. This could be via scrolling, navigation, loaders, progress bars, and the like. 

A helper function to apply a CSS animation to an element with JavaScript.

Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.

Web designers are always looking for inspiration. Something that will jumpstart our creativity and lead us to reach new heights. Quite often, we find what we’re looking for by studying...

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can actually

PageSpeed Insights is a free performance measurement tool provided by Google. It analyzes the contents of a web page for desktop and mobile devices. It provides a single number score (from 1 to 100) that summarizes several underlying metrics that measure performance. If you have not run PageSpeed Insights on your website, then you should […]

Assume that we want to copy a given text to the clipboard. Here's how.

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that […]

With this article, I've listed a few quick and easy methods to help you speed up your design workflow in Figma.

User experience is a conversation that’s part of every website or app design conversation. It’s likely one of the first things you talk about when making choices about functionality, customer journeys, and visuals. But do you talk about UX in the greater picture of designing your entir...

If you’re looking to build a website that takes advantage of large screens, we’ve put together some general rules of thumb for you.

If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more you

In HTML, there is a very clear input type for dealing with passwords:

Any website worth its salt will have an about us page. They’re part and parcel of every website, no matter what it does, sells or practices. But some are much more effective than others.

A boolean value is one that can either be TRUE or FALSE. If you need to know “yes” or “no” about something, then you would want to use the boolean function.

Good website design is a topic that many people overlook because they think it’s not important. The truth is, if you want to rank higher on the Google search results...

WordPress has been the go-to content management system for developers and non-developers to quickly build and create stunning websites. Using a

Elementor has been making waves in the world of WordPress website design since its launch in 2016. Part of what makes this platform so appealing to creators is a constantly evolving set of features. As the web continues to transform, so too does the Elementor landscape. Recently, in Septem...

Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.

Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.

There comes a time on a project when it's worth investing in tooling to protect the codebase. I'm not sure how to articulate when, but it's somewhere after

vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract