Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon

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.

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.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

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.

See all results ▶

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.

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.

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.

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.

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.

Website for a festival being displayed on the mobile breakpoint with a striking portrait in the center of the mobile page.
Headshot of an Editor X team member.
Previous slide button
Next slide button

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.

Image of a clothing store website in progress inside the Editor X workspace. The brand name SS21 is positioned in chunky letters on the left, and a mosaic box design shows off purple and gold squares, plus male & female clothing models in black and white.
Image of a clothing store website in progress inside the Editor X workspace. The brand name SS21 is positioned in chunky letters on the left, and a mosaic box design shows off purple and gold squares, plus male & female clothing models in black and white.

New in Academy X.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

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 ▶
Search icon