Adi Purdila - Envato Tuts+ Profile

Courses

FREE
This Is Bootstrap 5
Bootstrap is the most popular HTML, CSS and JavaScript framework in the world. It's very easy to use this framework to build responsive, mobile-first...
Adi Purdila
24 Sep 2021
Web Design
36 minutes
FREE
Create Your First Figma Plugin
Figma is one of the most popular UI/UX design tools out there, and one of its greatest selling points is third-party plugins. These allow users to extend the...
Adi Purdila
20 Sep 2021
Web Design
1.2 hours
FREE
Introduction to CSS Container Queries
To make a website responsive, we traditionally use media queries, a practice that's been around for years but that sometimes has its drawbacks. To fix some...
Adi Purdila
17 Sep 2021
Web Design
35 minutes
FREE
Getting Started With Hugo (Free Static Website Framework)
Static site generators have been getting a lot of attention lately because they represent a good way of creating simple websites that don’t require a...
Adi Purdila
14 Sep 2021
Web Design
47 minutes
FREE
An Introduction to CSS Logical Properties
If you’ve never heard of CSS logical properties, don’t worry— they’re pretty new, but they’re also pretty awesome! The basic idea behind them is that we can...
Adi Purdila
20 Aug 2021
Web Design
35 minutes
FREE
How to Build a Blog With Ghost and Envato Elements
If you want to create a blog, you will almost immediately think about WordPress. And for good reason: it’s very popular and very good. But that doesn’t mean...
Adi Purdila
29 Jul 2021
Web Design
53 minutes
FREE
How to Build an Online Clothing Store With Shopify
Selling clothes online can be a very profitable business, and you can do it very easily thanks to eCommerce platforms like Shopify. By getting the right...
Adi Purdila
14 Jul 2021
Web Design
1 hour
Understanding CSS Specificity
Trying to resolve CSS conflicts can sometimes be a frustrating task. Figuring out why a certain style gets applied over another is something all web...
Adi Purdila
21 Jun 2021
Web Design
27 minutes
Introduction to WooCommerce Blocks
The latest versions of WooCommerce let you use WooCommerce blocks to easily display your products in posts and pages. WooCommerce blocks are designed to work...
Adi Purdila
14 Jun 2021
Web Design
20 minutes
FREE
Advanced Adobe XD for Everyone
Adobe XD is a great tool for UI design that anyone can use, regardless of their skill level. In this Adobe XD tutorial, we’ll be focusing on its more...
Adi Purdila
12 May 2021
Web Design
1.6 hours
Introduction to UIkit
UIkit is a lightweight and modular front-end framework for developing web interfaces. It’s a great choice for quickly putting together websites or web apps,...
Adi Purdila
19 Mar 2021
Web Design
48 minutes
The Complete Guide to Using CSS Variables
CSS custom properties, also known as CSS variables, are entities that contain specific values that can be reused in a stylesheet. They are like LESS or Sass...
Adi Purdila
10 Mar 2021
Web Design
1.2 hours
Introduction to BigCommerce
BigCommerce is an eCommerce platform which powers over 50,000 small and medium-sized businesses and over 30 Fortune 1000 companies (like Ford, Toyota, and...
Adi Purdila
28 Oct 2020
Web Design
36 minutes
How to Create CSS Masonry Layouts
If you’ve ever browsed Pinterest, then you’ll have noticed that the various cards are displayed in a staggered way and don’t align horizontally. This is...
Adi Purdila
22 Oct 2020
Web Design
37 minutes
How to Create a Full-Screen Slider With CSS and Vanilla JavaScript
A slider is a very popular UI pattern and is very useful for displaying large amounts of information without taking up too much space. While there are...
Adi Purdila
19 Oct 2020
Web Design
1 hour
FREE
An Introduction to Typeface Styles
Knowing when and how to use a specific typeface can mean the difference between good and bad design. But there are so many typefaces available—how do we know...
Adi Purdila
12 Oct 2020
Web Design
42 minutes
Introduction to Moodle
Moodle is the world’s most popular learning platform. As it’s open source and incredibly versatile, this learning management system currently powers over...
Adi Purdila
28 Sep 2020
Web Design
29 minutes
FREE
Adobe XD for Beginners
Want to learn how to use Adobe XD? Join Adi Purdila for this comprehensive Adobe XD tutorial, and learn about artboards, components, responsive design, and...
Adi Purdila
17 Sep 2020
Web Design
2.5 hours
FREE
Introduction to Figma
Learn how to use Figma, a powerful tool for user interface design. If you're into UX, UI design, or app design, this Figma tutorial is ideal for you. What...
Adi Purdila
24 Aug 2020
Web Design
1.8 hours
FREE
How to Build a Shopify Store
Learn how to build a Shopify store from start to finish. If you've always wanted to create an online store, discover how to do it in this easy Shopify...
Adi Purdila
17 Jun 2020
Web Design
1.2 hours
Handy JavaScript Plugins for Web Designers
You can add great functionality to a website by using JavaScript, but sometimes writing the necessary code can be time-consuming, especially for more complex...
Adi Purdila
8 May 2020
Web Design
1.5 hours
FREE
Introduction to Design Systems
What is a design system? And how do you use visual design systems to make your web design work more effective and efficient? Find out in this free course. ...
Adi Purdila
21 Apr 2020
Web Design
40 minutes
Essential CSS Libraries for Web Designers
In this course, you’ll learn how to use eight essential CSS libraries for web designers, available today. Amongst them; normalize.css to give you a proper...
Adi Purdila
14 Apr 2020
Web Design
1.4 hours
How to Create High-Fidelity Prototypes With ProtoPie
Prototypes are key elements in any design process. They allow a designer to present clients with a realistic, interactive version of their project—all...
Adi Purdila
28 Feb 2020
Web Design
53 minutes
FREE
Sketch for Beginners
Sketch is one of the top apps professionals use for UI and icon design. This Sketch tutorial for beginners is a great way to learn Sketch from the ground up....
Adi Purdila
27 Jan 2020
Web Design
2.4 hours
An Introduction to Styling HTML Forms
Styling HTML forms with CSS can sometimes be tricky. Some elements like text inputs and buttons are really easy to style, while others, like select inputs,...
Adi Purdila
22 Jan 2020
Web Design
1.4 hours
Jump-Start Your Design Productivity With Figma’s Auto Layout
In December 2019, Figma announced a new and much-awaited feature: auto layout. With this, it’s now super easy to create buttons that resize with their text,...
Adi Purdila
15 Jan 2020
Web Design
37 minutes
Designing for WordPress
In this course, you’ll learn the basics of WordPress theme design, but with a twist. We’ll approach the process from a “design system” perspective. Instead...
Adi Purdila
10 Jan 2020
Web Design
3.1 hours
FREE
A Beginner’s Guide to Using WordPress
Learn how to use WordPress from start to finish in this free WordPress tutorial for beginners. It's the only WordPress beginner's guide you'll ever need. ...
Adi Purdila
20 Dec 2019
Web Design
2.3 hours
How to Create 3 Useful Gutenberg Custom Blocks
The Gutenberg editor is an amazing addition to WordPress that allows you to quickly create pages and posts and see them live as you’re building them. A big...
Adi Purdila
10 Oct 2019
Web Design
53 minutes
A Guide to Animation Performance on the Web
On today’s web, animations play a big role in user experience and the delivery of information. The days of slow browsers are long gone, and the browsers we...
Adi Purdila
23 Jul 2019
Web Design
1 hour
UI Design: A Practical Guide to Tabs
Tabs represent a fundamental pattern for user interfaces. They’ve been around for a long time, and while they come in all shapes and sizes, their core...
Adi Purdila
21 Jun 2019
Web Design
50 minutes
Introduction to Mason
Mason is an excellent tool for creating front-end features like forms, cards, news feeds, and more. You can choose from predefined templates or create your...
Adi Purdila
14 Jun 2019
Web Design
40 minutes
Figma Grids in Under 30 Minutes
Figma is a superb tool for UI design, and one of the things it’s really good at is creating grids. Using a grid is a vital part of many design projects, so...
Adi Purdila
20 May 2019
Web Design
28 minutes
A Short Guide to Using HTML Tables in the Modern Age
Back in the day, web pages were built with tables. These were the cornerstone of any layout. Nowadays, we have so many different and much simpler ways of...
Adi Purdila
16 May 2019
Web Design
53 minutes
Introduction to Text Masking on the Web
Text masking (also known as “knockout text”) is a technique that allows us to display images, gradients, patterns, and even videos inside the shape of a...
Adi Purdila
26 Apr 2019
Web Design
31 minutes
Creating Custom Presentation Themes for Reveal.js
Reveal.js is a powerful HTML framework used to create presentations. It comes with a lot of default themes you can choose from, but sometimes you will want...
Adi Purdila
19 Apr 2019
Web Design
1 hour
Best Practices for Displaying Form Errors
Submitting forms doesn’t always go as planned. Users might not enter information in the expected format, or they might forget to enter all the necessary...
Adi Purdila
29 Mar 2019
Web Design
37 minutes
Take Your Presentations to the Next Level With Reveal.js
When we think about making a presentation, we usually reach for Keynote or PowerPoint. But there’s a very good third option: an HTML presentation framework...
Adi Purdila
20 Mar 2019
Web Design
1 hour
Getting Started With CSS Multi-Column Layout
When it comes to creating layouts in CSS, most commonly we use floats, Flexbox, or CSS Grid Layout. But there’s another layout method that’s not used much...
Adi Purdila
26 Feb 2019
Web Design
33 minutes
Introduction to Studio 2.0
Studio is a web design tool that allows you to design, build, and publish responsive websites without writing a single line of code. All this is possible...
Adi Purdila
22 Feb 2019
Web Design
41 minutes
Going Beyond the Basics With InVision Studio
Studio is a free screen design tool from InVision. With it, you can design, prototype, and collaborate with others on your project, creating anything from...
Adi Purdila
17 Dec 2018
Web Design
42 minutes
A Beginner’s Guide to Using Typographic Scales
Using a typographic scale is essential for creating balanced and harmonious font sizing for your project. Typographic scales are used in print, web design,...
Adi Purdila
14 Dec 2018
Web Design
18 minutes
Learn to Prototype With Framer X
Framer is a new design tool that focuses heavily on prototyping. In this short course you’ll learn the basics of working and prototyping with Framer while...
Adi Purdila
21 Nov 2018
Web Design
39 minutes
5 CSS Projects: Image Hover Effects
Creating a hover effect for an image is a great opportunity to display additional information whilst also spicing up an otherwise normal design. In this...
Adi Purdila
31 Oct 2018
Web Design
38 minutes
A Guide to Prototyping in Figma
Figma is a great tool for UI design, and among its greatest strengths are its prototyping features. In this short course, you’ll learn how to prototype with...
Adi Purdila
11 Oct 2018
Web Design
30 minutes
Beyond the Basics: Figma
Figma is quickly becoming a favorite tool for UI and UX designers worldwide, many of them coming over from Sketch and Adobe XD. Figma is a super powerful and...
Adi Purdila
1 Oct 2018
Web Design
41 minutes
Beyond the Basics: CSS Grid Layout
CSS Grid Layout is a fantastic tool for creating layouts with CSS. In this short course, you’ll learn the more advanced functionality of CSS Grid including...
Adi Purdila
28 Sep 2018
Web Design
41 minutes
FREE
A Quick Introduction to CSS Grid Layout
For a long time, web designers have been used to creating layouts with CSS by using floats. Floats, however, were never meant to be used to create grid...
Adi Purdila
18 Sep 2018
Web Design
53 minutes
How to Create an Email Template With Envato Elements
Creating an email template can be a daunting task because of the complex table-based structure behind one. Thankfully, Envato Elements has a wide range of...
Adi Purdila
12 Sep 2018
Web Design
36 minutes
Design a Corporate Website Using UI Kits in Sketch
When it comes to web design, a UI kit is a fast and easy method of quickly designing a website or app. It’s simply a matter of picking the elements you want,...
Adi Purdila
1 Aug 2018
Web Design
2.2 hours
Get a Landing Page Up and Running With Envato Elements
Creating a fully functional landing page with Envato Elements couldn’t be simpler. Find one that you like, download it, and then customize it to fit your...
Adi Purdila
20 Jul 2018
Web Design
43 minutes
Theme Developer’s Guide to WPBakery Page Builder for WordPress
WPBakery Page Builder for WordPress (formerly known as Visual Composer) is probably the most popular page builder on Envato Market. Sitting at over 350,000...
Adi Purdila
2 Jul 2018
Web Design
52 minutes
User’s Guide to WPBakery Page Builder for WordPress
WPBakery Page Builder for WordPress (formerly known as Visual Composer Page Builder) is arguably the most popular page builder on Envato Market. Sitting at...
Adi Purdila
4 Jun 2018
Web Design
31 minutes
Getting Started With Slider Revolution for WordPress
Slider Revolution is one of the most successful slider plugins sold on Envato Market. Rocking over a quarter of a million sales, the plugin is popular with...
Adi Purdila
22 May 2018
Web Design
41 minutes
Practical CSS: Desktop to Mobile Navigation Patterns
Creating a website navigation that looks the same on every screen is not really possible. Owing to the smaller screen size, mobile devices often require a...
Adi Purdila
10 May 2018
Web Design
49 minutes
6 Handy CSS3 Animation Projects
Using motion in your web project and adding an extra degree of interactivity can really improve the user experience. In this short course you’ll build six...
Adi Purdila
4 May 2018
Web Design
1.1 hours
Working With Bootstrap 4 and Sass
Version 4 of Bootstrap has many significant changes compared to its predecessors, one of which is in switching from LESS to Sass. In this short course you’ll...
Adi Purdila
27 Apr 2018
Web Design
39 minutes
A Beginner’s Guide to the New Bootstrap 4 Grid System
The recently launched Bootstrap 4 comes with a lot of changes and new features. One of the biggest changes is a revamped, Flexbox-based grid system. In this...
Adi Purdila
19 Apr 2018
Web Design
50 minutes
This Is Bootstrap 4
Bootstrap is one of the most popular front-end frameworks for web designers, and its eagerly awaited version 4 just launched! In this course, which was...
Adi Purdila
22 Mar 2018
Web Design
1.4 hours

Tutorials

Quick tip: How to Make Elements Resizable with CSS Resize
In today’s quick tip video you’ll learn how to make elements resizable with CSS, just by using a property called (drumroll please) resize.
Adi Purdila
5 Oct 2021
Web Design
5 Figma Tricks and Tips for Beginners
Let me show you 5 Figma tricks and tips. These will be super helpful, especially if you’re just starting out using Figma for UI and web design.
Adi Purdila
29 Sep 2021
Web Design
How to Edit the Home Page in WordPress
In this WordPress quick tip, you’ll learn how to edit the home page in WordPress. This is a really important part of any website, and WordPress helps you...
Adi Purdila
24 Sep 2021
Web Design
Next-Level List Bullets With CSS ::marker
The CSS ::marker pseudo-element gives us styling access to the “marker box” on list items. We can then use it to replace default list bullets with icons,...
Adi Purdila
8 Aug 2021
Web Design
Exploring Creative CSS Hover Effects for Inline Links
In this tutorial we’re going to create some interesting CSS hover effects as an alternative to the standard inline link effects we’ve all been using for years.
Adi Purdila
1 Aug 2021
Web Design
How to Use Figma Variants
Let me show you how to use Figma Variants to save time and organize your work better when designing and working with components.
Adi Purdila
4 Jul 2021
Web Design
Better Focus Styles with CSS Pseudo-Class :focus-visible
In this quick tip I’m going to show you how to create better focus styles on form elements with a CSS pseudo-class called :focus-visible.
Adi Purdila
21 Jun 2021
Web Design
Build a WordPress LMS Website With the Masterstudy Theme
Let me show you how to create your own educational website (LMS) using a WordPress theme called “Masterstudy”.
Adi Purdila
17 Jun 2021
Web Design
How to Create Custom Color Palettes in WordPress Gutenberg
In this tutorial you’ll learn how to create custom color palettes for WordPress Gutenberg, making your theme even more flexible.
Adi Purdila
29 May 2021
Web Design
Organize Your Design Assets Like a Pro with Eagle App
Eagle App solves one of the hardest parts of being a designer; properly organizing design assets (like images, icons, and fonts), references, and any...
Adi Purdila
16 May 2021
Web Design
What is Adobe XD?
Adobe XD is a vector-based UI and UX design tool. Let’s take a look at what it offers designers and why it’s become such a powerful tool in the web design...
Adi Purdila
13 May 2021
Web Design
How to Build a Reading Progress Bar With CSS and JavaScript
In this tutorial we’re going to use JavaScript to build a simple “reading progress indicator” (or progress bar). Our progress bar will sit at the top of a...
Adi Purdila
29 Mar 2021
Web Design

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: