UI Engineering 101 for Designers
4.0 (13)
4 Weeks
·Cohort-based Course
Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.
UI Engineering 101 for Designers
4.0 (13)
4 Weeks
·Cohort-based Course
Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.
Teams we've worked with
Course overview
From Figma designs to high-fidelity HTML & CSS implementation
Design high-fidelity components in Figma with various design techniques to create high-fidelity web components. Colors, shadows, typography, etc. Everything to take your visuals to the next level.
Master Figma Design Techniques
Elevate your design skills using advanced Figma techniques to create high-fidelity web components, focusing on colors, shadows, typography, and more.
HTML & CSS Implementation
Translate your Figma designs into precise HTML and CSS components, no previous coding experience needed.
CSS Fundamentals and Layouts
Understand the CSS box model, layout properties, and various building techniques to create well-structured and polished web components.
Advanced Styling Techniques
Learn advanced CSS techniques like flexbox, grid layouts, stacked shadows, concentric radii, and elevation highlights to set your designs apart.
Pre-recorded lessons to learn at your pace
All lessons are pre-recorded for you to learn when it's best for your schedule.
Who this course is for
01
Designers wanting to learn the basics of UI Engineering. If you're curious about how to create pixel perfect polished components in code.
02
Engineers wanting to learn styling techniques. If you already know how to code but want to learn how to create better looking components.
03
This course is NOT for people wanting to learn JavaScript-related techniques. This is only for HTML and CSS building and styling techniques.
What you’ll get out of this course
Utilize various Figma design techniques for high-fidelity components.
Colors, shadows, typography, etc. Everything to take your visuals to the next level.
Translate Figma designs into pixel-perfect code.
Translate Figma designs into pixel-perfect HTML and CSS to bring your UI to where it's used. Perfect for designers aiming to bridge the gap between design and development.
Understand the CSS box model and layout properties.
CSS has many different ways to build with. We'll cover beginner, intermediate, and advanced building techniques for not only great structure, but amazing polish detail as well.
Apply advanced CSS techniques for stunning visuals.
Flexbox, concentric radii, stacking shadows, elevation highlights, etc. We'll cover many things to set your designs and implementations apart.
This course includes
1 interactive live session
Lifetime access to course materials
30 in-depth lessons
Direct access to instructor
Projects to apply learnings
Guided feedback & reflection
Private community of peers
Course certificate upon completion
Maven Satisfaction Guarantee
This course is backed by Maven’s guarantee. You can receive a full refund within 14 days after the course ends, provided you meet the completion criteria in our refund policy.
UI Engineering 101 for Designers
4.0 (13 ratings)
What students are saying
Meet your instructors
Mariana Castilho
Staff Product Designer // Pierre
Now building Pierre, the product engineering tool of the future, Mariana previously led product design in AI and Marketplace projects at Vercel. She specialized in bringing complex user interfaces and animations to life through code.
Derek Briggs
Director of Design // Clerk
Over 15 years of brand design, marketing design, product design, and UI engineering experience for top industry companies known for their quality and craft.
Be the first to know about upcoming cohorts
UI Engineering 101 for Designers
Course schedule
4-6 hours per week
Live Q&A
Bi-weekly sessions to go over common questions and address specific support needs.
Design and build together
We're not going to learn with existing shared assets, you're going to design and build by following along and creating your own work with us.
Projects that go with you
We'll craft common components you'll take to your own UI.
Be the first to know about upcoming cohorts