As we finish off the month of April 2021 and head into May, we have another edition of our weekly roundup of web design and development related articles that have been published over the past seven days. This week’s list includes website showcases, data visualization, WordPress tips and tricks, freelancing, accessibility, and much more. Ready to dive in? Let’s do it!

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


 

8 Stunning Examples of CSS Glassmorphism Effects

A collection of glassmorphism effects built with CSS. They range from common UI elements like buttons to more complex creations.
Read More

Data Visualization Design: Tools, Examples & Tips

Data visualization is one of those design trends or techniques that just seems to keep growing in use and value. From simple infographics to full data stories, this informational format is almost everywhere. And for good reason: A good data visualization makes complex content that much eas...
Read More

The CSS revert value – setting the default value for CSS properties

Bite-sized screencasts and tips about React, CSS and Javascript
Read More

Texture Ripples and Video Zoom Effect with Three.js and GLSL | Codrops

Learn how to replicate the ripples and video zoom effect from "The Avener" by TOOSOON studio using Three.js and GLSL.
Read More

When Chaos Invades: Keeping Your Freelance Business Going During a Crisis

I share thoughts on balancing life and business during chaotic times. I’m learning as I go, but here’s the good, bad, and ugly of it all.
Read More

The Biggest Web Design Mistakes to Avoid

Chances are, if you don’t like a company’s website, you’re not going to stay on it for very long. Constant disruptive pop-ups? Annoying. Wonky navigation bar? Forget it. Even the...
Read More

Three Starting Accessibility Tips for Your WooCommerce Site

Here are three great tips to start making your WooCommerce store accessible. Alternative text for images, heading order and SEO.
Read More

Fresh Resources for Web Designers and Developers (April 2021) - Hongkiat

A great product these days relies on the ecosystem. Imagine iPhone without the apps or WordPress without the plugins. They won't be as useful as they are
Read More

6 Best Canva Alternatives for Quick Designs & Mockups

Designing digital and print graphics is now easier than ever thanks to cloud-based apps and tools. These tools are so easy to use that even someone without any design knowledge can get started right away. Canva is one of the most popular apps in this category, especially among social media...
Read More

Exploring color-contrast() for the First Time | CSS-Tricks

I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate
Read More

React useState Hook in Action: What You Need to Know

The React useState hook is one of the most popular hooks in React. Learn what useState hook is & how to use it to manage state of components.
Read More

How to Create Actions for Selected Text With the Selection API | CSS-Tricks

Click, drag, release: you’ve just selected some text on a webpage — probably to copy and paste it somewhere or to share it. Wouldn't it be cool if
Read More

A Complete Guide to Custom Properties | CSS-Tricks

Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not their real name.
Read More

Rotated 3D Letters and Image Hover Effect | Codrops

A rotated 3D like letters hover effect combined with a tilted image for a menu.
Read More

Proprietary vs. Open-Source: How to Choose the Right CMS

We explain the differences between the two types of systems. The goal is to give you the information you need to make the right choice.
Read More

5 Tips for Building the Best Web Dev LinkedIn Profile - SpyreStudios

In the same way that websites need to be marketed, web developers and designers should also advertise themselves and their highly coveted skills. Building the best web dev LinkedIn profile is essential.
Read More

Shared Element Transitions | CSS-Tricks

I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh
Read More

JavaScript is Not a Programming Language - Paul Kinchla

I love JavaScript. I wrote JavaScript today that runs in a browser and I wrote JavaScript that runs on a server. It is really portable. It has a low barrier for entry comparatively . You can start with a web browser and a text editor. But, for users of the web—JavaScript is not a programming […]
Read More

Inspirational Websites Roundup #25 | Codrops

A hot new collection of amazing website designs and experiences for your inspiration.
Read More

How to Create a Multiple Steps Form with Bootstrap 5 - Designmodo

In this tutorial you will learn how to use Bootstrap 5 and JavaScript to create a multi-step form app. Download the free demo.
Read More

How to Design a Modern Business Card

Everyone wants a business card that stands out. As more people begin to return to work and physical meetings and spaces, now is the time to revamp your card to make a solid first impression. There are a few different things that help create distinction among business cards and a modern des...
Read More

10 Interesting Facts to Know about Any Website - Hongkiat

As Internet surfers, we — bloggers, designers, developers, or curious individuals — visit numerous blogs and websites every day.
Read More

6 Must-See Web Development YouTube Videos - SpyreStudios

Hundreds, if not thousands, of web development YouTube videos, are available online. There are new videos being uploaded every day. It is a matter of looking for the right channel.
Read More

You Can Label a JavaScript `if` Statement | CSS-Tricks

Labels are a feature that have existed since the creation of JavaScript. They aren’t new! I don’t think all that many people know about them and I’d even
Read More

Why you should add Wireframing to your design process

Spending the time and energy to properly define how an end-product should look and behave is an absolute must. By dedicating time on this step you can help save time, money, and other resources further down the line; and using wireframes is a great way to do this! Wireframes are seen as the skeleton of a prototype. With a wireframe,... Read More →
Read More

10 Cool Things HTML Tags Can Do - Hongkiat

At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went
Read More

Sustainable Web Design: 4 Easy Ways to Contribute to a Greener Planet - The Media Temple Blog

Want to ensure your design choices aren’t unintentionally dirtying the planet? Here are 4 sustainable web design strategies you can use.
Read More

The Humble <img> Element And Core Web Vitals — Smashing Magazine

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).
Read More

List Markers and String Styles | CSS-Tricks

Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling
Read More