Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Adobe XD to Editor X Tutorial

Codex Community via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to convert an Adobe XD design to an Editor X website in this comprehensive 17-minute tutorial. Follow along as the instructor recreates a Frontend Mentor challenge, covering the entire process from header to footer. Master techniques for importing and resizing assets, creating responsive layouts using containers, and implementing design elements such as logos, menus, and hero sections. Gain valuable insights into no-code development and website creation while exploring features like text scaling, grid systems, and color management. By the end of this tutorial, you'll have the skills to efficiently transform Adobe XD designs into fully functional Editor X websites, enhancing your web development capabilities.

Syllabus

Intro
Design Overview
Create a New Site
Import Assets
Header
Logo
Menu
Header Text
Arrow
Text scaling
Grid
Import Image
Expand Image
Copy Paste
Progress Report
Adding Images
Resize Containers
Adding Hex Values
Client Testimonials
Avatar
Testimonial
Color
Footer
Header Logo
Social Links
Social Bar
Comparison
Conclusion

Taught by

Codex Community

Reviews

Start your review of Adobe XD to Editor X Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.