Cohort 4

Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.

Mariana Castilho


Staff Product Designer // Pierre

Derek Briggs


Director of Design // Clerk


UI Engineering 101 for Designers

Vercel

Tailwind CSS

PlanetScale

Universe

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 &amp; CSS ImplementationTranslate your Figma designs into precise HTML and CSS components, no previous coding experience needed. CSS Fundamentals and LayoutsUnderstand the CSS box model, layout properties, and various building techniques to create well-structured and polished web components. Advanced Styling TechniquesLearn 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 paceAll lessons are pre-recorded for you to learn when it's best for your schedule.

From Figma designs to high-fidelity HTML & CSS implementation


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.

Who this course is for

What you’ll get out of this course

Colors, shadows, typography, etc. Everything to take your visuals to the next level.

Utilize various Figma design techniques for high-fidelity components.


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.

Translate Figma designs into pixel-perfect code.

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.

Understand the CSS box model and layout properties.

Flexbox, concentric radii, stacking shadows, elevation highlights, etc. We'll cover many things to set your designs and implementations apart.

Apply advanced CSS techniques for stunning visuals.

Provide a brief description for each module as a way to sell the value of what students will be learning throughout the course.

First Module

Second Module

Third Module

Course syllabus

Creator of shadcn/ui, Design Engineer at Vercel

Owner: figma.academy - dive.club.
Founding designer: maven.com


What people are saying

Meet your instructors


Bi-weekly sessions to go over common questions and address specific support needs.

Live Q&A


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.

Design and build together


We'll craft common components you'll take to your own UI.

Projects that go with you


Course schedule

This course builds on live workshops and hands-on projects

Active hands-on learning

You’ll be interacting with other learners through breakout rooms and project teams

Interactive and project-based

Join a community of like-minded people who want to learn and grow alongside you

Course completed by

About this course

Get notified about the next cohort

Learn from live sessions