Add Animations Using Code Snippets
Add to favorites
Bring your mobile layout to life with fade-in and slide-in animations using pre-made code snippets no coding experience required.
Master AI Prompting for Stunning UI
1
A Practical Guide to Prompting for UI
44:16
2
Mastering Remixing, Tailwind, and Animated Backgrounds
44:25
3
Master Image to HTML with AI
21:22
4
Customize your UI for 10x Conversion
28:43
5
Remix Templates with Aura
58:09
6
Compose UI with References
54:53
7
Using GPT 5.1 for Creating UIs
31:07
8
Gemini 3 Changes Everything for Web Design
37:15
9
Design and Code with Aura Introduction
5:52
10
Prompt Builder
13:10
11
Animation Prompting
17:12
12
Animation Code Integration in Aura
10:19
13
Design Mode in Aura
5:15
14
Customize Fonts in Aura
1:23
15
Selection Colors and Theme Modes
1:42
16
Animated Assets with Spline
2:44
17
Custom Images and Responsive Preview
3:15
18
Image to HTML
3:38
19
Gradient Colors in Aura
5:43
20
Midjourney to Aura
7:16
21
Embed and Fonts
5:53
22
Add Sections and Quick Edit Prompt
8:43
23
AI Model for UX and UI Design
6:46
24
Aura to Figma
10:35
25
One-Shot Landing Page with ChatGPT-5
7:04
26
Creating Mobile App UI
5:24
27
Replace Components
5:07
28
Remix Feature
3:44
29
Image to HTML Section
3:47
30
Layers Explorer and Public Components
5:06
31
From Prompt to Polished
5:16
32
Editing with Tailwind Classes
4:20
33
Building Multi-Page
6:17
34
Full Design Process
4:54
35
Remix Full Template
3:36
36
Edit Animated Layouts
2:43
37
Fix Span Text in Code
3:16
38
Aura-Using Element IDs for One-Page Navigation
5:00
39
Image Generation and Remove Background
5:10
40
Add Animations Using Code Snippets
4:47
41
Turn Any Web Layout into Mobile Layouts with a Simple Prompt
3:42
42
Add Entrance and Scroll Animations
6:16
43
Border Gradient with CSS
5:30
44
Edit Your Design Faster with Edits
5:15
45
Create a Unicorn Background
8:47
46
Integrate a Unicorn Background into Aura Build
3:29
47
One-Shot Design Using Reference
6:47
48
How to Use Aura’s Image Generation Feature
5:21
49
Mastering the New Alpha Mask & Z-Index
5:02
The content you are trying to access is only available for subscribing users of Design+Code.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Videos
1
A Practical Guide to Prompting for UI
A step-by-step guide for designers and developers to harness AI tools like Aura
44:16
2
Mastering Remixing, Tailwind, and Animated Backgrounds
Add your personal touch and make use of advanced features like remixing templates, shaders, and Tailwind utilities
44:25
3
Master Image to HTML with AI
Transform your design workflow with AI and free resources
21:22
4
Customize your UI for 10x Conversion
Transforming AI-Generated Designs into Stunning, Personalized UI. How to break free from cookie-cutter AI designs.
28:43
5
Remix Templates with Aura
How I built a new way to design and code with AI
58:09
6
Compose UI with References
Three powerful features that let you create beautiful landing pages in minutes
54:53
7
Using GPT 5.1 for Creating UIs
GPT-5.1 just dropped and it's a game-changer for web design
31:07
8
Gemini 3 Changes Everything for Web Design
We're living in what I call the "golden era" for AI-powered web design
37:15
9
Design and Code with Aura Introduction
Master UI/UX Design with AI — A Practical Modern Course
5:52
10
Prompt Builder
How to Use Aura's Prompt Builder to Create and Animate UI Designs
13:10
11
Animation Prompting
How AI Is Changing the Way We Design Animated Interfaces
17:12
12
Animation Code Integration in Aura
Add real JavaScript animations into your design using tools like Vanta.js, CodePen and tsParticles without writing a single line of code
10:19
13
Design Mode in Aura
How to edit your UI using design mode in Aura
5:15
14
Customize Fonts in Aura
Easily manage fonts across your entire project with Aura’s Global Font Panel — perfect for fast, consistent, and beautiful UI design
1:23
15
Selection Colors and Theme Modes
Customize your entire color system and toggle light/dark mode instantly with aura’s selection colors, no manual updates needed
1:42
16
Animated Assets with Spline
Bring your UI to life with animated spline assets in aura — no code, just one click to add motion, depth, and polish to your design
2:44
17
Custom Images and Responsive Preview
Add custom images and preview your design on all screen sizes
3:15
18
Image to HTML
Learn how to turn any image into a fully functional HTML layout
3:38
19
Gradient Colors in Aura
Add depth and style using gradient colors
5:43
20
Midjourney to Aura
How to add motion by integrating Midjourney into your UI with Aura
7:16
21
Embed and Fonts
How to use Midjourney and Aura to turn a music app into a unique, minimalist design that feels personal and custom-built
5:53
22
Add Sections and Quick Edit Prompt
How I created 3 different UI designs in 20 minutes using Aura’s Image to HTML, Add Section, and Quick Edit Prompt features
8:43
23
AI Model for UX and UI Design
A practical guide to choosing between Claude 4, GPT-4.1, o3, and more for smarter, faster UI creation
6:46
24
Aura to Figma
How I combine the speed of Aura with the flexibility of Figma to refine and share my designs
10:35
25
One-Shot Landing Page with ChatGPT-5
How to create a complete landing page in a single prompt
7:04
26
Creating Mobile App UI
How to turn screenshots into functional app designs with aura
5:24
27
Replace Components
Replace Components in Aura: A Game-Changing Update for Designers
5:07
28
Remix Feature
How to Use Aura’s Remix Feature to Adapt Any Template
3:44
29
Image to HTML Section
How to Replace Sections with Image-to-HTML in Aura
3:47
30
Layers Explorer and Public Components
Exploring Aura’s new features to manage layers and share components with ease
5:06
31
From Prompt to Polished
How to Get Better Results Using Inspiration and Structure
5:16
32
Editing with Tailwind Classes
How to duplicate, adapt, and polish AI designs without wasting prompts
4:20
33
Building Multi-Page
How to Keep Consistency, Link Pages, and Publish with a Subdomain
6:17
34
Full Design Process
Learn how to generate a full layout without design experience
4:54
35
Remix Full Template
Learn how to edit a full template and easily add a Unicorn background with a Project ID
3:36
36
Edit Animated Layouts
How to Edit Scrolling and Modal Layouts with Play Mode
2:43
37
Fix Span Text in Code
Understanding span in Headings and How to Fix Common Issues
3:16
38
Aura-Using Element IDs for One-Page Navigation
Learn how to connect your navigation menu to different sections of the same page using Element IDs and when to choose one-page vs multi-page
5:00
39
Image Generation and Remove Background
Create custom logos and edit image in just a few clicks with Image-to-Image
5:10
40
Add Animations Using Code Snippets
Bring your mobile layout to life with fade-in and slide-in animations using pre-made code snippets no coding experience required.
4:47
41
Turn Any Web Layout into Mobile Layouts with a Simple Prompt
Learn how to instantly transform any web design into mobile layouts using the Remix Template feature and a single, well-structured prompt.
3:42
42
Add Entrance and Scroll Animations
How to Add Entrance and Scroll Animations Using the Code Snippet Feature
6:16
43
Border Gradient with CSS
How to Create a Border Gradient with CSS and Customize It Like a Pro
5:30
44
Edit Your Design Faster with Edits
A smarter way to refine your designs without wasting time or too many prompts
5:15
45
Create a Unicorn Background
Learn how to create a Unicorn Studio background the easy way using presets, color controls, and motion settings for your website in minutes.
8:47
46
Integrate a Unicorn Background into Aura Build
Learn how to export, clean, and embed your Unicorn Studio background directly into Aura Build—no coding experience required
3:29
47
One-Shot Design Using Reference
Build a full landing page in minutes by referencing templates, components, and previous chats — all in one shot
6:47
48
How to Use Aura’s Image Generation Feature
Create, modify, and remix visuals directly inside your design panel, no Midjourney required
5:21
49
Mastering the New Alpha Mask & Z-Index
Learn how to create smooth fades, frosted backgrounds, and clean layering directly from the Design panel no code or prompts needed
5:02
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Sourany Phomhome
UI Designer
Designer at Design+Code.
10 courses - 43 hours
Build an Interactive Site with Wix Studio
Discover Wix Studio: the no-code platform ideal for agencies and enterprises. This beginner-friendly video course guides you through web design basics, using intuitive tools for building responsive, professional websites. Learn to create animations easily—no coding required. Gain the skills to craft your own standout sites confidently.
1 hrs
3D UI Interactive Web Design with Spline
Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites
3 hrs
Design and Prototype for iOS 17 in Figma
Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.
6 hrs
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
8 hrs
Learn Figma Prototyping
Master interaction design with Figma Prototyping. Create an animated app experience using after delay, scrolling content, video prototype
1 hrs
UI Design for iOS 16 in Sketch
A complete guide to designing for iOS 16 with videos, examples and design files
3 hrs
Prototyping in Figma
Learn the basics of prototyping in Figma by creating interactive flows from custom designs
1 hrs
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Quick Apps in Figma
Design application UIs from scratch using various tricks and techniques in Figma
12 hrs
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma. Not affiliated with or endorsed by Figma, Inc.
6 hrs
