Another Friday means another edition of “This Week In Web Design” here at 1WD. In this week’s roundup of web design and development articles published around the web over the past seven days, we have some CSS tips and tricks, JavaScript, design, a little WordPress, a freebie, and much more! Let’s dive in!

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month!



Free icon set - COVID-19

Free COVID-19 Icon Set - 1stWebDesigner - Free Icon Set!

A free icon set with 20 COVID-19 themed icons in Adobe Illustrator, Affinity Designer, SVG, & PNG file formats for commercial & personal use.
Read More

14 Real Freelance Business Cards to Inspire You (and How to Make Your Own)

Looking for freelance business cards? Here's our tips for creating yours, plus the best places you can get your cards printed.
Read More

How to target your design portfolio to get the client you want

We all have that dream client we really want to work with. Maybe it’s a particular company, or maybe it’s a more general industry. Regardless, your portfolio is a key component of your strategy to actually get those clients.
Read More

When Does Using Headless WordPress Make Sense?

To know if headless WordPress is right for your project, it’s important to consider the pros and cons. The following guide is here to help.
Read More

Tips for designing colorful websites for your clients

Color is a crucial component of high-quality web design. Not only can it grab visitors' attention, but it can also offer them a more pleasant experience while promoting the brand effectively. 
Read More

Fresh Resources for Web Designers and Developers (August 2020) - Hongkiat

While we tended to focus our list on specific fields in the previous installment of this series, our list for today will be more diverse. In fact, we've
Read More

10 Tips for Optimizing Your Website for SEO in 2020

A few basic guidelines for optimizing the front-end performance of your website's speed and performance to provide a better user experience.
Read More

How To Configure Application Color Schemes With CSS Custom Properties — Smashing Magazine

In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite useful: a palette (or scheme), functional colors (or theme), and component colors (local scope).
Read More

20 Skills Design Software Won't Ever Replace

A list of very important human skills great designers have that software never will—no matter how advanced developers get.
Read More

18 Grid Layouts for Building Stunning Websites - 1stWebDesigner

Grid layouts are a great choice for displaying a lot of content in an attractive, well-organized manner. Use our collection to find the perfect match.
Read More

Embracing Competency and Letting Go of Design Perfection

Since design (and even code) is so subjective – is aiming for perfection really a thing? So, if we’re not after perfection, just what are we aiming for?
Read More

6 Tips for Reducing Client Loss on Your Portfolio Website

As I’ve been coaching freelancers and agency-builders for the last 11 years, I’ve noticed there can be a real tension when it comes to the topic of portfoli
Read More

Enhancing User Experience With CSS Animations by Stéphanie Walter - UX designer & Mobile Expert.

How to build CSS animations and transitions in your interfaces that are inclusive, accesible and will enhance your users' experience.
Read More

Objects, [[Prototype]] and Prototypal Inheritance in JavaScript

Prototypal inheritance is topic every developer should know. Learn about what prototypal inheritance is, how it works and how to use it.
Read More

Halfmoon: A Bootstrap Alternative with Dark Mode Built In | CSS-Tricks

I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short
Read More

Performance is an issue of equity

Website speed and performance are a question of equity. Fast and lightweight sites mean that everyone can access your content equally. It’s not only an economic imperative; it’s a moral imperative.…
Read More

The Ultimate 150+ Best Modern Fonts Collection - 1stWebDesigner

Huge collection of free modern fonts for you to use. There is nothing you can't use them for, web or print. Find the best for your project!
Read More

Practical Use Cases for JavaScript’s closest() Method | CSS-Tricks

Have you ever had the problem of finding the parent of a DOM node in JavaScript, but aren’t sure how many levels you have to traverse up to get to it?
Read More

What is Gamification in UX And How It Makes Us Better - The Designest

The world is a huge mess now, so don't we all need some discipline and encouragement from the apps we use?
Read More

4 Lessons Web App Designers Can Learn From Google — Smashing Magazine

Google knows exactly what consumers want and it has designed simple, intuitive, and useful solutions for them. This article explains why it’s a company whose product features you should be mirroring.
Read More

The Top 10 Tools for Optimizing Images for Your Website - Vandelay Design

Photos, graphics, and images are a huge part of the internet today. Although the average internet user has a pretty good connection, large image files can still impact page load speed, especially for mobile users. Photos and images that you use on your website should be optimized, which minimizes the file size of the image […]
Read More

Font Pairing Tools for Designers

Choosing the right font is crucial for creating great designs, but it doesn’t end there. If you are using more than two fonts - say one for the heading and the other for the body- then you need to make sure there is a level of coherence and synergy b
Read More

Stacked Cards with Sticky Positioning and a Dash of Sass | CSS-Tricks

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Read More

3 additional income streams to explore as a graphic designer

It’s easy to get wrapped up in the idea that the only way to make more money as a designer is to get more clients, bigger projects, or work more hours. Here are some additional income streams all designers should consider—some of which require much less time and effort with a higher return.
Read More

Natively Format JavaScript Numbers

Leverage native formatting capabilities such as locale, currency, units, compact mode, etc…
Read More

Gradient angles in CSS, Figma & Sketch

Do you know the feeling when a subject never lets you go? In the last years, I have worked with different graphics programs and have written many lines of CSS. Even though it is now easy to copy CSS code for gradients directly from e.g. Figma, I always had the feeling that gradients in graphics programs behave somewhat differently than gradients created with CSS. Especially the angle of a gradient sometimes seemed more like a random product to me. In the end, copying the CSS code often leads to
Read More

Vertical text alignment in buttons and inputs | CodyHouse

How to center text vertically in buttons and input elements using the padding and line-height CSS properties.
Read More