Welcome back to our weekly roundup of all the web design and development related articles we’ve found published on the web over the past seven days. It’s the last Friday of March, and all the madness that goes along with this month can be found here! So pull up a chair and get your reading on!

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


 

Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks

Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try
Read More

6 BigCommerce Design Tips For Big Ecommerce Results

Learn how BigCommerce design works and get six of our top tips for using BigCommerce to create an ecommerce website that gets results.
Read More

How to Freeze an Object in JavaScript: Object.freeze(), Object.seal() & More

In JavaScript you can freeze an object to make it immutable. This tutorial will show you how to do it with Object.freeze() and Object.seal().
Read More

8 Snippets for Creating Common Website Layouts with CSS Grid

A collection of common website layout concepts built using CSS grid. Each one demonstrates how they can make life easier for web designers.
Read More

15 Tools and Resources for Designers and Agencies To Use in 2021 | Codrops

You take pride in delivering a project on time, but when unanticipated issues arise, meeting a deadline can suddenly bec
Read More

Are Google's Core Web Vitals Metrics Unreasonable?

We discuss what Core Web Vitals means to sites that run on a tight budget or content management system (CMS). Is Google asking too much?
Read More

A Complete Guide To Accessible Front-End Components — Smashing Magazine

An up-to-date collection of accessible front-end components: accordions, form styles, dark mode, data charts, date pickers, form styles, navigation menu, modals, radio buttons, "skip" links, SVGs, tabs, tables, toggles and tooltips.
Read More

Open vs Closed: a Critical Question for Designing and Building Experiences

<p>As we careen into the era of conversational AI and hyperautomation, closed systems create bad experiences that stifle innovation and opportunity</p>
Read More

Creating Custom Form Controls with ElementInternals | CSS-Tricks

Ever since the dawn of time, humanity has dreamed of having more control over form elements. OK, I might be overselling it a tiny bit, but creating or
Read More

Distributed Letters Animation Layout | Codrops

A while back I stumbled upon this great Dribbble shot by Seth Eckert. I love that letter effect and so I was thinking ab
Read More

6 SEO Changes for 2021 and How They Might Affect Your Ranking - noupe

Today, nearly 93 percent of all web traffic comes through search engines. Google doesn’t share its data on the volume of searches performed, but it’s
Read More

5 UI Components in Atomic Design

The UI components of Atomic Design are very useful in your design process. Learn all you need to know about UI components.
Read More

4 Things No One Tells You About Running a Freelance Business

More people are saying goodbye to full-time gigs and hello to life as a freelancer. In fact, about 59 million Americans freelanced in 2020, up over 2 million compared to 2019. The perks are well documented, especially in the era of Covid-19 and beyond: work from the comfort (and safety) of your own home, determine […]
Read More

Going Headless: Use Cases And What It’s Good For — Smashing Magazine

One of the drivers of the popularity of headless options is that expectations for the quality of user experience are constantly going up. In this article, we explore what headless means, use cases for it, and how to decide if headless is a good fit for you.
Read More

Best Image Optimizer for WordPress

What Does Image Optimization Mean? We often hear the phrase Image Optimization in the context of site building and maintenance, but what exactly does it
Read More

Image Fragmentation Effect With CSS Masks and Custom Properties | CSS-Tricks

Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid
Read More

Interactive Web Components Are Easier Than You Think | CSS-Tricks

In my last article, we saw that web components aren’t as scary as they seem. We looked at a super simple setup and made a zombie dating service profile,
Read More

Human-Readable JavaScript: A Tale of Two Experts

JavaScript gives us many ways to do things, but deciding which way can be tricky. Laurie Barth gives us a story of two experts who solve this problem in different ways, giving some insight into how…
Read More

What Is a Competitor Website Analysis? (And How to Perform a Competitor Website Analysis)

Looking to upgrade your marketing and outperform your competitors? Learn about competitor website analysis here to find out how you can achieve that!
Read More

Branding for Web Designers: How to Create a Brand for Your Design Business - noupe

Creating a recognizable, memorable brand is challenging for nearly any business. Branding can make or break a company. If your brand is forgettable, you
Read More

How to Build a Single-Page Content Aggregator Website

Find out how to use RSS feeds to build a single-page content aggregator website that can automatically show your work or the latest news in a simple format.
Read More

How to Make User Interface Readable: Tips and Practices - Design4Users

Learn what factors influence readability and legibility in web and mobile user interfaces and check how to improve them for better user experience.
Read More

Understanding Bootstrap 5 Layout

Building Bootstrap layouts have always been a complex task since the beginning. With Bootstrap 5, there are few additional classes.
Read More

Top Life-saving Tools for Front-end Developers

In the world we live in today, web development is already widely used by businesses and other industries. If you want to stay ahead of the competition, you need the best front-end development tools. These
Read More

Women who code: “I just want to see us win”

Code Next community members, Amber Morse and Naia Johnson, share their respective stories as Black Women in tech.
Read More

Want to Write a Hover Effect With Inline CSS? Use CSS Variables. | CSS-Tricks

The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color
Read More

50 Creative Restaurant Food & Drinks Menu Design Ideas

Menus are like the business card of a cafe, restaurant or bistro. Apart from the atmosphere, the menu provides the sort of lasting impression that parks
Read More

Web Design Hacks to Make Your Site Attractive to Clients | Orphicpixel

Given the massive amount of information online, a study revealed that the attention span of people has narrowed down significantly. With more things to focus on, people have the tendency to focus on things for a shorter period of time. Thus, making a good impression counts. While content is key, businesses should also take into
Read More

Building a Full-Stack Geo-Distributed Serverless App with Macrometa, GatsbyJS, & GitHub Pages | CSS-Tricks

In this article, we walk through building out a full-stack real-time and completely serverless application that allows you to create polls! All of the app’s
Read More
Avatar photo