- You’re a developer tasked with converting visual designs to HTML and CSS.
- You’re a confident developer already familiar with Tailwind CSS, but you don’t necessarily perceive yourself as having a “good eye for design”.
- You want to improve the quality and fidelity of your design implementations — getting as close as possible to “pixel perfect” conversions.
- If you see yourself in this description… this workshop is definitely for you!
In this workshop, you’ll implement a redesign of the Epic Stack Homepage, starting from scratch.
You’ll work from a Figma file where the homepage is designed at 5 different screen sizes:
Throughout this hands-on workshop, you will learn how to:
- Approach a new responsive design conversion, from the ground up
- Leverage modern Figma features, such as autolayout and Dev Mode
- Translate Figma “Design Tokens” to the Tailwind config
- Leverage CSS layout tools like Grid and Flexbox to achieve complex designs
- Create CSS-only Keyframe animations on page load
- Manage dynamic styles in a Tailwind JIT-friendly way
In the process, you’ll develop acute attention to details around typography and spacing. You’ll become fluent with Figma’s Dev Mode, and confident in your ability to build high-fidelity implementations.
You will even do “screenshot overlay” tests to match the design against our build — that’s how pixel perfect we’re aiming for!
Pixel Perfection
By the end of this workshop, you will:
- Have the confidence in your ability to implement designs with high precision
- Have a repeatable process you can use to implement any design
- Have a good understanding of how designers think, and be able to better collaborate with design teams
- Get comfortable using CSS Grid to build advanced layouts
- Understand how to manage dynamic styles in a Tailwind JIT-friendly way
This workshop is your chance to take your UI design skills to the next level.
You’ll spend the day with like-minded developers looking to improve their craft.
You’ll gain a sense of ownership and pride over the design quality of the websites and applications you’re working on.
