This Week In Web Design – February 21, 2020

Another week is in the books, and that means it’s time for us to catch up with all the articles we’ve found that were published about web design and development over the past 7 days. Whether it’s front end development, CSS, JavaScript, WordPress, web design, or any other related skills, we’ve got you covered with our weekly roundup. Enjoy!

Top Custom Gutenberg Blocks You Can Add to WordPress

Introduction to some of the top custom block collections available for WordPress.

How Does WordPress Work?

How WordPress works and what that means for your new WordPress website.

A Complete Guide to Data Attributes

Chris Coyier provides this guide to using data attributes including syntax, styling, and accessing data attributes in JavaScript.

How to Get Involved in the Booming Python Job Market

A discussion of actual salaries, in-demand skills, marketplaces, and what to do in order to remain competitive.

10 Amazing Web Design Showcases

A collection of web design showcases, each of which features hundreds of examples of web designs that innovate, educate, and inspire.

While You Weren’t Looking, CSS Gradients Got Better

I recently discovered most people aren’t even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.

5 Best Tools to Manage Multiple WordPress Sites from One Dashboard

People have built great tools to help you manage multiple WordPress sites from a single unified dashboard, and I’ve collected the best options in this post.

What’s Coming in WordPress 5.4 (Features and Screenshots)

WordPress 5.4 is scheduled to be released on March 31, 2020. It will be the first major release of the year and will ship with some significant improvements.

5 Things I Wish I’d Known as a Young Web Designer

I’m here to pass along some of the tidbits of knowledge that I wish someone had told me back in the day. May they help you on your journey!

The Latest Research for Web Designers Feb 2020

Reports and surveys that shed light on: The battle between mobile and desktop, Why so many websites keep getting hacked, What’s keeping ecommerce business owners awake at night, and What Google is now saying about mobile-first indexing.

10 Pros and Cons of Minimal Navigation in Web Design

Take a look at some pros and cons with examples of use.

A Complete Guide to Links and Buttons

Let’s take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them.

How to Build Vue Components in a WordPress Theme

Build independent, composable, maintainable, interactive, progressively enhanced components in a WordPress theme.

5 Terrible Web Design Clients That Will Make Your Life Hell

A list of terrible web design clients you should stay away from at all costs. Make sure to learn how to spot them and prepare yourself for any potential troubles.

How to Add Custom CSS to Your WordPress Site

A look at four techniques for adding custom CSS to WordPress.

6 Best Browsers for Developers in 2020

We’ve found some of the best browsers for web developers, to get you started.

How To Use The HTML Drag-And-Drop API In React

In this tutorial, we’ll build a React drag-and-drop component for file and image uploads. In the process, we’ll learn about the HTML drag-and-drop API. We will also learn how to use the useReducer hook for managing state in a React functional component.

Design Trend: Mixing Realism and Illustrations

There’s a trend afoot in website design that mixes real images with illustrations and art elements in interesting ways. And it’s quirky, unique, and beautiful!

Understanding Web Accessibility Color Contrast Guidelines and Ratios

You can mathematically know if two colors have enough contrast between them.

Styling The Good Ol’ Button Element

I will explain how to style the most common button styles, and shed light on some pitfalls we face while building them.

Create Diagonal Layouts Like It’s 2020

Diagonal layouts are great. You can build them easily with CSS.

Add Background Colors to SVGs Using the “rect” Element

Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.

How to Properly Organize Files in Your Codebase & Avoid Mayhem

A review of the most common systems for both small and large projects, with some easy-to-follow best practices.

Animate SVG Path Changes in CSS

Every once in a while I’m motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG.

10 Fantastic Variable Fonts to Use

A list of top super flexible and useful variable fonts that one can use in their next branding campaign.

10 Websites to Test Your Codes Online

These tools will surely come in handy when you’re scrambling to debug a block of JavaScript or PHP.

3 Strategies to Follow When Your Site is Failing

Web analytics and split testing, in-person testing, and simplifying your sales process.

A Guide to Console Commands

This guide covers what’s available in the console object of Firefox and Chrome as they are often the most popular browsers for development and they do have a few differences in various aspects of the console.

Website Statistics for 2020: 10 Critical Stats to Know for Web Design

Check out 10 critical stats for web design in 2020.

Navigation for Design Systems and Style Guides

Looking at some different common solutions and when it makes sense to use one over the other.

We Hope You’ve Enjoyed “This Week In Web Design”

Check back every Friday for the latest articles to continue growing your skills as a web designer/developer. We’ll see you next week!

Photo courtesy of ShotStash