Creative Assets & Unlimited Downloads on Envato Elements
GET 7 DAYS FREE
Sponsor How to convert any website into fully editable Figma designs
We’ve all been there: Manually recreating website designs in Figma, desktops cluttered with screenshots for benchmarking, improving web copy without design context… But what if there was a way to import a full webpage into Figma in just a few clicks? What if you could then edit the imported webpage;…
Learn
Implementing Adaptive Dark Mode Based on User’s OS Settings: A Step-by-Step Guide
More and more users prefer browsing websites in dark mode to reduce eye strain and save battery life. To provide the best user experience, it’s…
Learn
The Importance of Color Contrast in Web Design
One of the most important aspects of web design is color contrast, which refers to the difference in brightness and/or color between two elements on…
UX Design
JavaScript Snippets For Better UX and UI
JavaScript can be used to significantly improve the user experience (UX) and user interface (UI) of your website. In this article, we will discuss some…
More Recent Articles
Learn A Guide to Choosing the Best Color Method for Web Design
When it comes to web design, color is a crucial element that can make or break the overall user experience. While there are several ways…
Learn Mastering CSS Variables and Unlocking Their Full Potential
CSS Variables, also known as Custom Properties, have revolutionized the way we manage styles and build maintainable, flexible stylesheets. They enable developers to store and…
Learn How AI Can Be Used For Web Development
AI, or artificial intelligence, has brought about significant improvements in the world of web development recently. By automating repetitive and mundane tasks, as well as…
Learn How To Get The X and Y Position of HTML Elements in JavaScript and jQuery
When developing web applications, it may be necessary to get the X and Y position of HTML elements on the page for a variety of purposes.
Learn Quick Tip: How To Disable Autocomplete on Form Inputs
Although it can be a helpful feature, sometimes autocomplete can be a privacy concern, especially on shared devices or public computers.
Learn CSS Basics: Visibility: Hidden vs. Display: None
While visibility: hidden and display: none may seem similar at first glance, there are some significant differences between them.
Learn How To Use CSS To Maintain Aspect Ratio For Responsive Design
The padding hack is a simple and effective technique for maintaining the aspect ratio of a div as the window's width changes.
Learn How To Align Checkboxes and Their Labels Consistently Across Browsers
While checkboxes are relatively straightforward to implement, aligning them with their labels can be a challenge, as each browser renders them differently. In this article,…
Learn Beginners Guide To Getting Started With NPM
NPM, which stands for Node Package Manager, makes it easy for developers to install, update, and manage packages in their projects.
Learn The Difference Between the :where() and :is() CSS Selectors
The CSS selectors :where() and :is() are two pseudo-classes that allow you to select elements based on their relationship with other elements.
Learn What Is the JavaScript Equivalent To The PHP sleep() Function?
JavaScript does not have a direct equivalent to the PHP sleep() function, which pauses the execution of a script for a specified number of seconds. However, there are a few ways to achieve similar functionality in JavaScript.
Learn How To Get a User’s IP Address With PHP
In PHP, there are several methods to retrieve a user's IP address. We will explore two of those ways in this article.Popular Posts
The most popular posts on 1st Web Designer.
Freelance Design 800+ Free & Premium Procreate Brushes
Procreate makes it easy to create stunning designs and pieces of artwork for personal and professional use. However, gathering all the resources you need, like Procreate brushes, can seem like a daunting task when you’re first starting out.
Instead of having to hunt down brushes to use in your art,…
WordPress
Building a Headless WordPress Website with GatsbyJS
Recently, we took a look at the rising trend of “headless” WordPress configurations. The term describes the process of creating content within WordPress, then pushing it out for use in…
Learn
The Top 80 Adobe Illustrator Text Effects Tutorials
For all of you who want to learn how to create different effects with your desired font, this is a goldmine. You will find 80 of the best Adobe Illustrator tutorials, that are suitable for both beginners and experts alike. Dig in!
Collections
10 Code Snippets for Creating Beautiful CSS Buttons
If you’re looking for some examples of quality CSS buttons, this post is where you should start. We’ve organized 10 unique CSS button collections and snippets from CodePen which you can study and clone for your own web projects.