UI Engineering 101 for Designers

3.9

(12 ratings)

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.

This course is popular

20 people enrolled last week.

UI Engineering 101 for Designers

3.9

(12 ratings)

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.

This course is popular

20 people enrolled last week.

Hosted by

Mariana Castilho and Derek Briggs

Staff Product Designer at Pierre and Director of Design at Clerk

Mariana Castilho and Derek Briggs

Staff Product Designer at Pierre and Director of Design at Clerk

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

Designers wanting to learn the basics of UI Engineering. If you're curious about how to create pixel perfect polished components in code.

Engineers wanting to learn styling techniques. If you already know how to code but want to learn how to create better looking components.

This course is NOT for people wanting to learn JavaScript-related techniques. This is only for HTML and CSS building and styling techniques.

Designers wanting to learn the basics of UI Engineering. If you're curious about how to create pixel perfect polished components in code.

Engineers wanting to learn styling techniques. If you already know how to code but want to learn how to create better looking components.

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.

Course syllabus

Expand all modules

Week 1
Sep 30—Oct 6
Modules
Introduction to web development
Introduction to web development
8 Lessons
Week 2
Oct 7—Oct 13
Events
Oct
12
Optional: Mid-course Q&A
Optional: Mid-course Q&A
Sat, Oct 12, 5:00 PM - 6:00 PM UTC
Modules
Designing with an implementation mindset
Designing with an implementation mindset
6 Lessons
Week 3
Oct 14—Oct 20
Modules
States and Forms
States and Forms
8 Lessons
Week 4
Oct 21—Oct 25
Modules
Layout in components
Layout in components
8 Lessons

3.9

(12 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.

Join an upcoming cohort