LESSONS & EXERCISES

Editor X Essentials

Design & Layouting

Interactions & Effects

Elements & Components

Web Concepts

Content Management

Code & Dev

Collaboration

VIDEO TUTORIALS

Editor X Essentials

Design & Layouting

Interactions & Effects

Elements & Components

Web Concepts

Code & Dev

Collaboration

CLASS WITH DESIGN PROS

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Learn how to size and dock elements and work with advanced flexbox and CSS grid.

Watch video →

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Site Structure

Learn how to structure a website using pages, sections and containers.

Watch video →

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

Start lesson →

ACADEMY X

Advance your web design skills.

Dive into web design on Editor X with video tutorials, lessons, hands-on exercises, webinars and more.

Video tutorials.

Watch feature demos, pause and practice as often as you like.

Watch Tutorials →

Section with a gradient background and circular text in the middle that is selected. To the right is a mobile view with text that says infinite rotation animation.

Lessons & exercises.

Read feature breakdowns and follow step-by-step exercises.

Explore Lessons →

Design team working on a beauty website with team avatars and comments panel open.The header and sidebar are highlighted to show they are being edited.

Design team working on a beauty website with team avatars and comments panel open.The header and sidebar are highlighted to show they are being edited.

Expert tips.

Learn to create advanced effects, animations and more from the X team.

Get Tips →

Design with three overlapping images and a title over the images. To the left is a dropdown to set the top image’s position to sticky.

Class with design pros.

Join the biggest names in the game for a series of design tutorials on Editor X.

Watch Now →

Intricate design for a digital magazine being created in the editor with different horizontal strips, images and a blue color theme.

Intricate design for a digital magazine being created in the editor with different horizontal strips, images and a blue color theme.

Webinars.

Watch live demos, learn best practices and get your questions answered.

View Webinars →

Website for a festival being displayed on the mobile breakpoint with a striking portrait in the center of the mobile page.

New to Academy X? Dive into these.

Thumbnail for demo showing stills of two male hosts beside the title Discover Editor X with Product Manager, Sebi Vidret.

VIDEO LIBRARY

Discover the Editor X Workspace

Watch a site come to life step by step on Editor X and get answers to FAQs.

▶

Green background showing grid with 4 columns and 2 rows on it. In the middle of the grid are three tubular shapes stacked.

LESSONS & EXERCISES

Breakpoints Part 1

Meet breakpoints and get an intro to the cascading model on Editor X.

▶

Video about hierarchy on Editor X, and how the parenting model influences how elements interact with each other across all breakpoints

VIDEO LIBRARY

Element Hierarchy

Dive into the concept of element hierarchy and parenting on Editor X.

▶

Video tutorial about creating complex layouts on Editor X using CSS Grid

VIDEO LIBRARY

Grid

See how to apply a grid, dock elements to gridlines and edit with custom units.

▶

FROM THE X TEAM

Wisdom from in-house designer, Matanya Dayfani.

Matanya shares his essential tips for designing on Editor X. Check out the must-knows from a designer who knows the platform inside out.

New in Academy X.

LESSONS & EXERCISES

Hover Interactions

Learn how to apply interactions to any element on hover.

▶

Video about how to apply and customize hover interactions on Editor X.

VIDEO LIBRARY

Hover Interactions

Learn how to apply and customize interactions to any element on hover.

▶

Thumbnail for live comments. Pink background with shaded box in the centre. Box is split into 2 uneven sized boxes. There is 1 speech bubble symbol in the middle of the big box and shapes in the bottom of the smaller one.

LESSONS & EXERCISES

Live Comments

Discover how to communicate with fellow creators in real time on the Editor X workspace.

▶

Thumbnail indicating design libraries. Pink background with a shaded pink box over it and an icon in the middle.

LESSONS & EXERCISES

Design Libraries

Learn how to create, manage and share design libraries with your team.

▶

ACADEMY MENU ▶