Best of the web for Design and Web Development April 2021

April 28th, 2021
News

This is our month tradition where we end the current month by compiling together a list of the absolute best design tutorials and web articles created throughout month.

The post features a great collection of comprehensive design tutorials photoshop, Illustrator and Pixelmator Pro. The roundup includes some great tutorials from how to create a floral pattern in photoshop to creating fat gradients using Pixelmator pro. There is also some great web and design articles to read through from vanilla JavaScript code snippets to getting read for Googles new SEO shakeup.

This post is jampacked with some great content we hope to enjoy reading through the post.

Premium design assets for
your next project

Acess to a huge libary of design resources from Photoshop brushes to vector resources.

Join today

Design tutorials

Create a Frozen Text Effect with Ice Particles in Photoshop

In this tutorial, I will show you the steps I took to Create a Frozen Ice Text Effect in Photoshop. We will mainly go though some selection techniques, as well as layer styles and image adjustments. This is an intermediate level Photoshop tutorial so some steps can be tricky – if you think you’re up to the challenge, please go ahead :)

How to Create Detailed Graphic Patterns in Photoshop

Patterns come in all kinds of styles, from simple repetitive shapes to complex graphical arrays. In today’s Photoshop tutorial I’m going to share some tips for creating detailed pattern effects that are made with full-colour illustrations. We’ll first use a must-know technique for filling the canvas with randomly placed graphics, then I’ll show you a couple of manual methods for creating seamlessly repeating pattern designs.

How to Create a Cartoon Text Effect in Adobe Photoshop

In this tutorial, I will show you how to create an easy cartoon text effect, using a pattern and a layer style.

Video Tutorial: How to Create a Neon Light Effect in Photoshop

In today’s Photoshop tutorial I’m going to show you how to create a vibrant visual effect by adding neon lights to a photo. This popular art style often incorporates simple shapes or text for the neon lights, which are illuminated in bright colours.

How to Create a Layered Floral Typography Text Effect in Adobe Photoshop

In the following steps, you will learn how to create a layered floral typography text effect in Adobe Photoshop.

Deliciously Fat Gradients in Pixelmator Pro

An easy way to create what he called deliciously fat gradients. I remember doing a similar effect back in the day when I used to play and write tutorials every week so I decided to create a simple example this time using Pixelmator Pro, my photo editor of choice for speedy workflow (it’s so fast) – plus the non-destructive elements are game changer.

Web and Design articles

Vanilla JavaScript Code Snippets

In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time around, let’s look at vanilla JavaScript code snippets — resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.

5 ways to prevent code injection in JavaScript and Node.js

Writing secure code in a way that prevents code injection might seem like an ordinary task, but there are many pitfalls along the way. For example, the fact that you (a developer) follow best security practices doesn’t mean that others are doing the same.

Headless UI v1.0

Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS.

Say Hello To CSS Container Queries

In this article, I will walk you through why we need container queries, how they will make your life easier, and most importantly, you will achieve more powerful components and layouts.

10 Figma Tricks I Wish I Knew Earlier

Figma hacks you might not have heard of.

System Fonts: All You Need to Know

In this tutorial, we’ll be taking a look at system fonts. We’ll be going over what exactly system fonts are and what they aren’t! We’ll be looking at them from a design perspective, discussing the pros and cons of system fonts. We will also be exploring system fonts in popular culture, and we’ll touch briefly on the web and technical side of things.

Get Ready For Next Month’s Google Shakeup

Google has been talking about the Core Web Vitals tool and the Page Experience Update for about a year now.

Top utility-first CSS frameworks

CSS is an easy-to-use design language for making colorful websites and applications. CSS can be fun when working on smaller projects but it becomes overly complicated on large-scale projects where you can experience naming inconsistencies and code repetition. Developers have introduced various solutions to this problem, from BEM and SMACSS methodologies to frameworks aimed at solving some of these underlying issues.