
Envato Tuts Web Design
979 FOLLOWERS
Free tutorials, learning guides, and online courses to help you learn web design. Whether it's interface design, UX, front-end development, motion design, accessibility, business, or something you've not yet discovered, our team of expert instructors have you covered! Envato Tuts+ helps you learn creative skills and shape the life you want.
Envato Tuts Web Design
4d ago
In this new tutorial, we’ll use previous knowledge and learn how to build a light/dark mode toggle switch component. This is a handy feature available in many sites and apps nowadays because it can help reduce eye strain and therefore improves accessibility.
MDN's color modesSlack's color modes
It’s also worth noting that more and more CSS frameworks have started providing this functionality by default.
Bootstrap's color modes Tailwind's dark modeWhat we’re building
Here’s an introductory video to give you a taste of the functionality that we want to achieve:
And, of course, there’s the Cod ..read more
Envato Tuts Web Design
4d ago
With all the drama surrounding WordPress (more specifically, Matt Mullenweg) this past year, you’d think there’d have been a mass migration from the world’s most popular content management system.
But that’s the interesting part. What this whole circus has shown us is that people don’t have a problem with WordPress. The issue is with Mullenweg, the chaos swirling around him, and the fear that it’ll trickle over to everyone’s websites and businesses at some point.
While there are some people considering alternative options in light of the WordPress vs. WP Engine showdown, many aren ..read more
Envato Tuts Web Design
4d ago
A gradient is a blend of two or more colors that transition smoothly from one to another. Gradients add modern aesthetics to backgrounds, text, buttons, etc.
In CSS, gradients are added as a value of the background property. For example, a simple gradient might look like this:
1
background: linear-gradient(to right, red, pink);
Here, we are creating a linear gradient that transitions from red to pink horizontally. You can also set an angle to control the direction of the gradient. Check out this example:
1
background: linear-gradient(45deg, red, pink);
Here, the gr ..read more
Envato Tuts Web Design
4d ago
We’re taking some time today to showcase some fantastic dashboard UI concepts you can start using immediately. Then, we’ll explore why using concepts is beneficial and how to make the most of them in your current and future projects.
Using a dashboard UI concept can help you jumpstart your project.
Designing a visually appealing and user-friendly dashboard is crucial for enhancing user experience and boosting the overall performance of your application. Dashboard UI concepts can be a game-changer for developers and designers, offering inspiration and guidance to create stunning dashboard in ..read more
Envato Tuts Web Design
4d ago
Previously, we learned how to create a JavaScript page loading animation with GSAP. Today, let’s make another beautiful loading animation—this time without using any external JS libraries!
What You'll Be Creating
To better understand what we’re going to build, check out the demo page. Be sure to click on the menu links to repeat the page loading JavaScript animation.
As both JS animations have similarities, I'll borrow some content sections from the previous tutorial. This will help keep each tutorial detailed and independent.
Web page loading animation JavaScript demo
For this tutori ..read more
Envato Tuts Web Design
1M ago
There are over a billion websites. It’s much easier for hackers to exploit a single vulnerable resource that connects to countless websites than to go after them one at a time. This is why WordPress plugins are a popular way in which hackers break into websites.
So, let’s talk about what happens when one of your installed WordPress plugins is compromised. We’ll look at:
Some recent examples of hacked plugins.
The ramifications of having one of them on your website.
What steps you can take to re-secure your site and reduce the chances of your site being infected or exploited again.
The far ..read more
Envato Tuts Web Design
1M ago
In this new tutorial, we'll continue working with GSAP and learn how to create an easy-to-follow, attractive, button-to-modal animation. This type of animation is ideal for toggling modal forms.
Without more intro, let’s explore the final result!
1. Begin with the page markup
Inside a wrapper, we’ll place the modal trigger and an empty element. We’ll also wrap the button content within a span element.
1
<div class="wrapper">
2
<button class="open-modal">
3
<span>Contact Us</span>
4
</button>
5
<div class="nex ..read more
Envato Tuts Web Design
1M ago
In this tutorial, we will cover how to build a fully functioning Connect Four game in HTML, CSS and Vanilla JavaScript. Here’s the demo we’ll be working towards. Click on the available slots to place whichever color is next in the queue!
Begin with simple HTML markup
Alright, let’s get started. In the body of your HTML file, add the code below.
1
<div class="container">
2
<header>
3
<h1>Connect 4</h1>
4
</header>
5
<div class="board">
6
<!-- grid -->
7
</div> ..read more
Envato Tuts Web Design
1M ago
To build our page configurator, we’ll combine old-school CSS techniques with modern CSS features like custom properties and container queries.
What We’re Building
Without further ado, let’s take a look at the final project. Click the setting icon to the left of the screen to access the controls panel:
1. Begin with the panel markup
Begin by defining a toggle button and the panel configurator. Inside the panel, we’ll place five form wrappers—we’ll go over each of them later.
Here’s the starting markup:
1
<button class="btn-toggle-panel" type="button" aria-label="Toggle panel ..read more
Envato Tuts Web Design
1M ago
What is a URL Shortener?
A URL shortener is a tool that converts Long URLs into shorter, more manageable links. Once the URL has been shortened, it redirects users to the original URL.
Short URLs are easier to share on social media, emails, or any other digital platform. Additionally, many URL shorteners offer advanced features such as tracking and analytics that can be useful in providing insights into user engagement.
In this tutorial, we will cover how to create your very own URL shortener tool using JavaScript!
By the end of this tutorial, we will have something like this:
Let’s get ..read more