In this week’s roundup of the past week’s web design and development related articles, we have a variety of topics that include animation, JavaScript tips and tricks, CSS shadows, UX inspiration, spooky fonts for Halloween, and much more. Sit back and catch up on what’s been written this week.
The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!

Animation Techniques for Adding and Removing Items From a Stack | CSS-Tricks
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when
Read More 
Intro to HTML and CSS - 1stWebDesigner - Basics of HTML and CSS
In this intro to HTML and CSS, we provide a basic overview of the web development landscape and common terminology used in HTML and CSS.
Read More 
3 Essential Design Trends, October 2021 | Webdesigner Depot
Design trends on top of design trends. This theme of this month’s collection is trends that seem to build on each other. These examples use multiple trends listed here: hero typography, round buttons, and big branding. Here’s what’s trending in design this month… 1. Hero Typography Big, bold, and even unusual typography choices are the
Read More 
Round a number to a specified amount of digits - JavaScriptSource
Use Math.round() and template literals to round the number to the specified number of digits.
Read More 
Creating 3D Characters in Three.js | Codrops
Three.js is a JavaScript library for drawing in 3D with WebGL. It enables us to add 3D objects to a scene, and manipulat
Read More 
Conceptual Design: The Tool You Need to Ideate Like a Pro
How does the design process start for you? If you want to take ideation and creation to another level, conceptual design may be the place to start. Conceptual design can actually help you better design an idea so that when you start the process of creation, it is more developed and functio...
Read More 
Pondering the Future of the WordPress Sidebar
We take a trip back in time and examine what made the WordPress sidebar so special and share some potential sidebar ideas for a new era.
Read More 
Deconstructing the homunculus.jp Distortion with Three.js | Codrops
https://youtu.be/qmRqgFbNprM In this ALL YOUR HTML coding session we will be deconstructing the pixel river distortion s
Read More 
Branching Strategies in Git | CSS-Tricks
In this article I'm going to talk about branching strategies and different types of Git branches. I’m also going to introduce you to two common branching workflows: Git Flow and GitHub Flow.
Read More 
Confirm Yes or No With JavaScript - JavaScriptSource
How to display a confirm dialog box using JavaScript. The confirm dialog box allows you to perform actions based on the user input.
Read More 
3 Ways to Remove the Background from an Image
Removing a background from an image is extremely useful when it comes to creating content for blogs, social media, or other online platforms. It allows creators to make sure every...
Read More 
Inspirational Websites Roundup #30 | Codrops
Today I'm very happy to share another websites roundup with you! There is lots to discover and explore, especially when
Read More 
Project Management for Designers: How to Improve Your Day-to-Day Operations
Designers matter too! Learn what the biggest project management pain points are for designers, and which project management features you should be looking out for.
Read More 
12 Helpful Chrome Extensions For Web Designers & Developers - 1WD
As a developer, you probably already have a list of preferred browser extensions you use, but just in case, here are a few more!
Read More 
Apply a CSS animation to an element with JavaScript - JavaScriptSource
A helper function to apply a CSS animation to an element with JavaScript.
Read More Best Laravel Security Features to Secure PHP Apps - noupe
Laravel was designed to meet different requirements, including event processing and authentication mechanisms for MVC architecture. It also has a software
Read More 
How to Implement and Style the Dialog Element | Codrops
A dialog is a component of web interfaces providing important information and requiring user interaction in response. Th
Read More 
Want UX Inspiration? Look To Classic Video Games
Web designers are always looking for inspiration. Something that will jumpstart our creativity and lead us to reach new heights. Quite often, we find what we’re looking for by studying...
Read More 
Scroll Shadows With JavaScript | CSS-Tricks
Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can actually
Read More 
4 Steps to Improve PageSpeed Insights Score and SEO | Webdesigner Depot
PageSpeed Insights is a free performance measurement tool provided by Google. It analyzes the contents of a web page for desktop and mobile devices. It provides a single number score (from 1 to 100) that summarizes several underlying metrics that measure performance. If you have not run PageSpeed Insights on your website, then you should
Read More 
Copy text to the clipboard - JavaScriptSource
Assume that we want to copy a given text to the clipboard. Here's how.
Read More 
7 UX Principles to Boost SERPs | Webdesigner Depot
User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that
Read More 
9 Figma Design System Tips
With this article, I've listed a few quick and easy methods to help you speed up your design workflow in Figma.
Read More 
7 Ways Your UX Needs to Extend Beyond Your Website (And How to Do It)
User experience is a conversation that’s part of every website or app design conversation. It’s likely one of the first things you talk about when making choices about functionality, customer journeys, and visuals. But do you talk about UX in the greater picture of designing your entir...
Read More Top AngularJS Frameworks to Watch Out in 2021 - noupe
AngularJS, an open-source, front-end development framework, is ideal for developing single-page applications and enterprise-level app solutions. This
Read More 
The Challenge of Designing Websites for Large Screens
If you’re looking to build a website that takes advantage of large screens, we’ve put together some general rules of thumb for you.
Read More 
Considerations for Using Markdown Writing Apps on Static Sites | CSS-Tricks
If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more you
Read More 
The Options for Password Revealing Inputs | CSS-Tricks
In HTML, there is a very clear input type for dealing with passwords:
Read More 
JavaScript Booleans Explained - JavaScriptSource
A boolean value is one that can either be TRUE or FALSE. If you need to know “yes” or “no” about something, then you would want to use the boolean function.
Read More 
How Good Design Can Help Your Business Rank Higher
Good website design is a topic that many people overlook because they think it’s not important. The truth is, if you want to rank higher on the Google search results...
Read More 
Learn How to Create a Headless WordPress Site With Vue.js
Have you been wondering what all the chatter is about headless WordPress? Dive into what it is and learn how to use it to build an app.
Read More 
How to Design for All Screen Sizes With Elementor’s Custom Breakpoint
Elementor has been making waves in the world of WordPress website design since its launch in 2016. Part of what makes this platform so appealing to creators is a constantly evolving set of features. As the web continues to transform, so too does the Elementor landscape. Recently, in Septem...
Read More 
Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG) — Smashing Magazine
Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.
Read More 
A Guide To CSS Debugging — Smashing Magazine
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.
Read More 
Writing Your Own Code Rules | CSS-Tricks
There comes a time on a project when it's worth investing in tooling to protect the codebase. I'm not sure how to articulate when, but it's somewhere after
Read More 
CSS in TypeScript with vanilla-extract | CSS-Tricks
vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract
Read More