Adi Purdila - Envato Tuts+ Profile

Courses

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
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
18 Jan 2021
Web Design
1.6 hours
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
25 Nov 2020
Web Design
1 hour
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
FREE
How to Build a WordPress Portfolio Site in 1 Hour
Building a portfolio site is a daunting and time-consuming task for many people, but with the right tools it can easily be done in a single hour. In this...
Adi Purdila
16 Feb 2018
Web Design
1.1 hours
Best Practices: Planning & Designing Pricing Tables
Pricing tables are essential elements in any website that sells a range of products or services. If done correctly, they can increase conversion rates. If...
Adi Purdila
14 Dec 2017
Web Design
47 minutes
Practical CSS: Build a Dropdown Menu
One of the most common patterns in web design is a navbar with a multi-level dropdown menu. While this is relatively simple to create, it’s still problematic...
Adi Purdila
27 Nov 2017
Web Design
1.1 hours
The Web Designer’s Guide to Gulp
Gulp is a tool that can be of great help to any web designer, but it can be intimidating for beginners. In this course you’re going to learn what Gulp is,...
Adi Purdila
27 Oct 2017
Web Design
1.8 hours
Building a WordPress Theme Documentation Template
Creating a good WordPress theme means more than just good aesthetics and well-written code. It must also be well documented, especially if you’ll be handing...
Adi Purdila
29 Sep 2017
Web Design
4.7 hours
Getting to Know the Foundation XY Grid
Foundation 6.4 brought us a new grid system called the XY grid. It’s based on the awesome Flexbox layout module, and it’s super easy to use. In this course...
Adi Purdila
13 Sep 2017
Web Design
38 minutes
Advanced Foundation: Using the ZURB Stack
Foundation is an amazing collection of frameworks by itself, but its creators at ZURB have taken things one step further by releasing a build system called...
Adi Purdila
31 Aug 2017
Web Design
1.2 hours
Introduction to Anime.js
Anime.js is a small but powerful JavaScript animation engine. In this course you’ll learn the basics of this library, and you’ll also build a simple “Formula...
Adi Purdila
18 Jul 2017
Web Design
46 minutes

Tutorials

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
How to Handle Text Overflow (with a CSS Ellipsis)
When a string of text overflows the boundaries of a container it can make a mess of your whole layout. Here’s a cool trick to handle text overflow by...
Adi Purdila
27 Mar 2021
Web Design
How to Create an Elementor Coming Soon Page for WordPress
The Elementor page builder for WordPress allows you to build websites quickly and easily with drag-and-drop tools. In this video, you’ll learn how to use the...
Adi Purdila
22 Mar 2021
Web Design
How to Create an Elementor Contact Form for WordPress
Being able to get in touch is one of the most common goals for your website users. In this video, you’ll learn how to use the free version of Elementor along...
Adi Purdila
16 Mar 2021
Web Design
How to Backup Your WordPress Site
This one’s an important one: in this tutorial you’ll learn how to backup your WordPress site through your hosting provider, with a plugin, or manually.
Adi Purdila
15 Mar 2021
Web Design
How to Create an Elementor Landing Page for WordPress
The Elementor page builder makes it easy to create great-looking WordPress websites by dragging and dropping elements into place. In this video, you’ll learn...
Adi Purdila
11 Mar 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
15 Feb 2021
Web Design
How to Create Smooth Page Transitions with JavaScript
In this JavaScript tutorial you’ll learn how to create an animated page transition with a JavaScript library called Highway.
Adi Purdila
29 Dec 2020
Web Design
Creating a Figma Design System: Buttons, Links, Icons, and Images
In this tutorial I’m going to show you how to develop a few sections of a design system in Figma, giving you an idea of how to implement your own: buttons,...
Adi Purdila
22 Dec 2020
Web Design
Creating a Figma Design System: Colors and Forms
In this video tutorial I’m going to show you how to develop two more sections of our design system in Figma, giving you an idea of how to implement your own:...
Adi Purdila
17 Dec 2020
Web Design
How to Use the New Figma Auto Layout Features
In this video I’ll show you how Figma’s new and improved Auto Layout features make designing responsive components and layouts easier than ever!
Adi Purdila
30 Nov 2020
Web Design
“Roxxe” Shopify Theme Review: Multipurpose, Easy to Set up
In this theme review we’ll take a look through a multipurpose Shopify theme called Roxxe. Shopify allows you to quickly create your own online store, and...
Adi Purdila
9 Nov 2020
Web Design

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: