Summer is here and do you know what that means?

That’s right, it’s time to **get really good** **at** **end-to-end testing**!

Join me for a 2-day live event where we will dive deep into testing applications with Playwright. You will learn about the value E2E tests can give you, how to get the most out of your tools, what contributes to test flakiness and how to solve it for good. All in a hands-on, exercise-driven format that will make *you* the driver of the testing effort. Let’s go!

## Who Is This Workshop For

- Developers who struggle to understand what should be tested on the end-to-end level and how to write efficient and reliable tests with Playwright;
- Developers who want to get more out of their end-to-end tests;
- Developers who dread a failing E2E test.
- Developers who haven’t used Playwright in a while (*we will go through some really neat APIs!*)

## What you’ll learn

End-to-end testing is a vast topic. For this workshop to make sense and for you to take as much as you can from it regardless your prior experience with Playwright, I’ve divided it into four sections:

1. **Basics**. Learn (or rehearse) the basics of Playwright. Install, configure, and write a simple test that interacts with your React application;
2. **Setup**. Get the answers to some of the most burning questions in E2E testing: How to mock API requests? How do I test authentication? How to mock a database? Where to get the test data from?
3. **Guides**. Next, discover advanced Playwright patterns through practical guides. From recording test interactions and creating custom fixtures to blocking unnecessary network requests and leveraging test annotations;
4. **Debugging**. Finally, explore various techniques to debug your end-to-end tests. Utilize the UI mode in Playwright, pause test execution, and use the Trace viewer to examine your tests.

## Required Experience

- You do **not** have to have any prior experience with Playwright to go through this workshop;
- Experience with automated testing in general is **recommended**. We won’t be focusing on things like test structure, what is an assertion, and other basics (for that, I highly recommend the [Epic Testing Bundle](https://www.epicweb.dev/testing)’s first workshop);
- Prior experience with other testing frameworks is **recommended**;
- Basic experience with TypeScript is **required** as all exercises are in TypeScript and you might need to write a type or two yourself;
- Experience with React is **optional**. You will be focusing on how to *test* apps, not write them. I’m using React because I’m comfortable with writing it, but everything you will learn during this workshop still applies even if you’re building with Vue, Svelte, or Angular.

Workshop Day 1 

Workshop Day 2

End-to-end React Application Testing with Playwright

You know this feeling when you cannot imagine your work without a certain tool? When it has become so indispensable and integral in your daily tasks it just feels right. When you’ve reached *that* level of comfort and feel empowered to solve any task, big or small, simple or soul-crushingly complex.

I’m sure you have a list of tools that make you feel this way. It’s time you added Vitest to that list.

The Advanced Vitest Patterns workshop is exactly what it sounds. A curated collection of practical, powerful, and often little-known techniques that help you do more with less. That make you say “Wait, Vitest can do that?”

You are invited to join me for a 2-day workshop to explore what else your testing framework can do and, at the end of it, get one more tool in your pocket.

## Who This Workshop Is For

- Developers who want to do more in their tests but aren’t sure how.
- Developers who crave to go beyond the basics and get *really good* at their testing framework.
- Developers who want to get a deeper understanding of what is possible in Vitest and turn it into a Swiss knife to help them test complex code.

## What You’ll Learn

This workshop covers an expanse of different techniques to apply in Vitest and how they can help you write better tests day-to-day. **Do not expect the basics**. I put “advanced” in the title for a good reason.

**Here’s what you will do:**

- Explore the optimal Vitest setup for great developer experience and faster feedback loop—from having multiple workspaces to running tests right from your IDE.
- Design custom test environments to tailor to the most intricate of use cases.
- Create custom type-safe matchers (symmetric and asymmetric) to make your tests expressive, clean, and powerful.
- Define custom fixtures to encapsulate and reuse common actions.
- Discover the strategies for dealing with slow tests—from profiling to making the most out of concurrency, test isolation, and sharding to make tests fast again.
- And countless more tips and patterns that will make you a Vitest superuser.

The entirety of the workshop features real-world examples I took from my own years of automated testing. Everything is written in TypeScript. Everything is there to help you make the most out of Vitest.

## Required Experience

- Prior experience with testing frameworks like Jest or Vitest is **required**.
- Basic level of TypeScript is **recommended** since all the exercises are written in TypeScript and you would have to write a type or two yourself.
- Visual Studio Code or Visual Studio Code-based editor is **recommended** as a few exercises feature extensions for that editor. The majority of the topics, however, is editor-agnostic.

Learn advanced Vitest techniques: custom environments, type-safe matchers, fixtures, performance optimization, and powerful testing strategies.

Workshop Day 1

Advanced Vitest Patterns

It's time for you to **stop testing components in browser-like environments**, like JSDOM and HappyDOM—and start testing in the actual browser.

This isn't about end-to-end tests. This workshop focuses on the same integration level tests you know and love. The robust kind. The heart of your testing trophy.

For too long, developers have been testing code meant for the browser in Node.js. While that yielded some immediate benefits, it introduced more and more issues as browser and Node.js APIs grew closer together. The tooling simply wasn't there.

**Now it is, and that tooling is Vitest.**

Join this 2-day workshop to learn how to test your React components in the actual browser with Vitest Browser Mode! This workshop will push the quality of your tests through the roof.

## Who This Workshop Is For

* Developers familiar with and experienced in integration level testing
* Those eager to understand how browser-like environments degrade test quality
* Developers wanting to explore in-browser testing with Vitest

## What You'll Learn

Integration testing is a broad topic with lots to unpack. This workshop **isn't focusing on the basics of integration tests**, but instead **dives deep into component testing in the real browser**.

Through numerous exercises you'll:

* Install and configure Vitest to run tests in the real browser
* Migrate existing JSDOM test suites to Vitest Browser Mode
* Use React Testing Library to write user-driven automated tests
* Master testing user interactions including clicks, form submits, drag and drop, and more
* Learn techniques in RTL and Vitest to help debug test failures

The workshop uses TypeScript throughout this exercise-packed learning experience.

## Required Experience

You'll benefit most from this workshop if you understand testing basics and have written tests before. Fundamental TypeScript knowledge is preferred. No prior Vitest experience needed.

Learn to test React components in real browsers using Vitest. Move beyond JSDOM to write better integration tests with React Testing Library & TypeScript.

React Component Testing with Vitest Browser Mode (live)

React Component Testing with Vitest Browser Mode

Mocking is one of those topics that can easily split a room of engineers in half.

Some strongly advise you to test your code as-is, avoiding mocks as much as possible. Others would encourage the use of mocking to keep your tests focused on one particular thing, one behavior.

And as much as it is important for you to know different mocking techniques, it is even more so to understand what mocking truly is.

It is time you learned the truth about mocking. And that truth is rather simple:

**Mocking is a tool**.

It is as good or bad as any other tool out there. What matters is how well you understand what it’s for and how it affects your tests.

This is precisely what you are going to learn in this 2-day workshop! I will help you understand what mocking is, what it has to do with test boundaries, and also master various mocking techniques in Vitest and when to use them.

## Who is this workshop for

This workshop is for you if you’ve ever asked yourself any of these questions while testing:

- Isn’t mocking bad?
- Should I mock this?
- How do you even mock this?
- What is the difference if I mock this or not?

## What you will learn

I’ve split this workshop into several blocks, depending on *what* you will be mocking:

1. **Boundaries**. First, you will see how mocking is a tool to establish test *boundarie*s. You will understand what a boundary is and how it affects your test based on where you put it (if you decide to put it at all!).
2. **Functions**. Learn how to mock and spy on functions in TypeScript.
3. **Date and time**. Wield the power of space and time to mock date, time, timers, and event loop ticks.
4. **Globals**. Go through the three fundamental techniques in mocking globals: monkey patching, proxying, and spying. Learn the difference between them, and which one to use in your tests.
5. **Network**. Gain full control over the HTTP requests in your tests. Learn how to use [Mock Service Worker](https://mswjs.io) to mock “happy path” and error responses, as well as network errors and response timings.
6. **Modules**. Finally, discover the ways to mock both local and third-party modules in tests.

This is *a ton* of exercises waiting for you to solve them so you can finally wield mocking with confidence, and also know when you are better off without it.

## Required experience

You can make the most out of this workshop regardless of whether you’ve used mocking before.

Having a solid understanding of the [Testing Fundamentals](https://www.epicweb.dev/workshops/testing-fundamentals) is preferable as we won’t be spending much time on things like intentions in tests and test structure.

Past experience with testing frameworks like Jest or Vitest is a plus but is optional.

Learn key mocking techniques in Vitest: establish test boundaries, mock functions, date/time, globals, network requests, and modules effectively.

Mocking Techniques in Vitest

Mocking Techniques in Vitest (live)

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!

## The design

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:

![screenshot of a responsive design](https://res.cloudinary.com/epic-web/image/upload/v1705402523/screenshot-of-a-responsive-design.png)

## Topics the workshop covers

Throughout this hands-on workshop, you will learn how to:

<ul className="md:pl-0 pl-0">
<ChecklistItem>Approach a new responsive design conversion, from the ground up</ChecklistItem>
<ChecklistItem>Leverage modern Figma features, such as <strong>autolayout</strong> and Dev Mode</ChecklistItem>
<ChecklistItem>Translate Figma “Design Tokens” to the Tailwind config</ChecklistItem>
<ChecklistItem>Leverage CSS layout tools like Grid and Flexbox to achieve complex designs</ChecklistItem>
<ChecklistItem>Create CSS-only Keyframe animations on page load</ChecklistItem>
<ChecklistItem>Manage dynamic styles in a Tailwind JIT-friendly way</ChecklistItem>
<ChecklistItem>Prepare for the new Tailwind v4 CSS-only configuration 🔮</ChecklistItem>
</ul>

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!

<Video url="https://res.cloudinary.com/epic-web/video/upload/v1705401730/Pixel_Perfection.mp4" title="Pixel Perfection" poster="https://res.cloudinary.com/epic-web/image/upload/v1705403227/pixel-perfection-video-poster.jpg" />

## Here's why you should register for the workshop

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
- Be ready to **hit the ground running** when Tailwind v4.0 ships

This workshop is your chance to take your UI design skills to the next level.

You’ll spend two days 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.

## What to expect from Simon's workshop

You’ll be interacting and participating a lot throughout a series of **hands-on exercises.** 

This is no boring “webinar” lecture where you listen to an instructor drone on for hours straight.

Simon is an experience educator, and formally trained school teacher. He knows how to create engaging and entertaining learning environments!

Over the years, Simon has converted hundreds of designs to Tailwind. He is a former member of the Tailwind Labs core team, where he has been teaching Tailwind CSS to thousands of developers.

You’ll be hanging out with Simon for the whole two days — with ample time to ask questions and have meaningful conversations.

## Required experience

This workshop is intended for developers who are already familiar with Tailwind CSS.

If you’re not, great free resources to quickly up-skill are the official [Tailwind docs](https://tailwindcss/com) and [YouTube channel](https://youtube.com/tailwindlabs). The [From Zero to Production](https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0) video series in particular is a great introduction to Tailwind. 

Basic familiarity with JavaScript and React is also beneficial, since we’ll be using a React + Vite app to build our UI. 

Again, not critical as the workshops stays firmly focused on HTML and CSS.

## Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.

This live workshop teaches how to convert Figma designs to pixel perfect web pages using HTML, CSS, and Tailwind CSS. 

Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind (live)

<div className="aspect-video"><MuxPlayer poster="https://image.mux.com/ILmwkMtB7AdjNPM4EHdXKjp3SnSjIr3dqvQ3XFvzXOQ/thumbnail.jpg?width=920&fit_mode=pad&time=1" playbackId="ILmwkMtB7AdjNPM4EHdXKjp3SnSjIr3dqvQ3XFvzXOQ" accentColor="#93A1D7" className="rounded" /></div>

If you're looking for a job in web development, there's a good chance you've noticed most of them are looking for React experience.

Over the last decade, React has continued to evolve and as a result has **remained dominate** in the full stack web app landscape and it's only innovating more to maintain its **growing lead**.

While React cares a great deal about backward compatibility, the innovations of React and the ecosystem around it mean you're likely missing important **quality of life improvements** for yourself and your users.

This workshop series will give you the knowledge you need whether you're a seasoned React expert or a complete novice. That knowledge will enable you to deliver **better user experiences** more efficiently and will make you **more attractive to employers**.

This workshop series will give you a solid foundation on React fundamentals so you're **more efficient using React**. You'll find yourself fighting React less and working with it more.

To top it off, you'll finally understand what the heck **React Server Components** and **Server Actions** are. You'll understand how they're a revolutionary new piece of technology that will enable a UX and DX that was not possible before.

This workshop series will get you up to speed and even **ahead of the game** with React, the most widely used UI framework in the world. I'm excited for you to join us!

<div>

<div className="flex items-center gap-5">
<Image src="/kent-c-dodds.png" alt="Kent C. Dodds" width={160} height={160} className="rounded-full bg-foreground/10" />
<strong className="sm:text-2xl text-xl">Hey, I'm Kent C. Dodds</strong>
</div>

Over my years as a web developer, I've built applications at every scale, enterprise apps, startups with dozens of users, internal tools, and consumer-facing giant tech co. apps with millions of users. I've managed to stay on top of what users have come to expect from applications. You know the *feeling* you get when an app gives you a modern user experience that just works™️? I know how to get your app there with React. And that’s what you’re going to learn in this series.

I couldn't be more excited to have you join me for this experience. I've reached well over half a million software developers with my educational content and open source software over the years. I get really jazzed hearing back from developers who apply my ideas to their apps and get jobs, promotions, improved sales, and reduced shipping stress. 💪

</div>

Workshops with me are **intense in the best way**. You’re expected to learn and **learning is hard work**. But that doesn’t mean it should be frustrating or impractical. The workshop learning environment I’ve developed will have you in your own familiar development environment with a well structured series of exercise steps based on examples that build on top of each other.

I’ve been teaching web development workshops for over a decade and I’ve solicited over 25,000 bits of feedback on my exercises. I know what works and what doesn’t and I’m constantly improving my teaching method and exercises so I can give you a first class education based on research and experienced.

This **five-week workshop series** covers the React side of web applications, using modern techniques and offering modern user experiences 
in a way that gears you up with React so you can use it effectively with full stack frameworks.

---

## What's included

### React Fundamentals

**March 5th & 7th, 8am-2pm (Pacific)**

React itself is relatively simple, but if you skip over the fundamentals (as many people do), then you’ll find yourself confused and lost and ultimately working around your gaps in knowledge.

As we are busy building applications, we often find ourselves bumping into the edge of our understanding. But we’re so busy with the pressures of deadlines that we fumble around until we get it working then move on without truly understanding why and how it works. No shame, this is the reality for all of us under pressure and deadlines. This workshop will fill in the gaps you may not even know you have with the core fundamentals of React and expand your knowledge so you stop fumbling around.

If you’ve never used React before, this will be the perfect introduction for you because you’ll be able to start your React journey without those gaps in the first place. You’ll have a complete understanding of what React is doing under the hood when you describe your UI with JSX, create custom components, handle rendering errors, and more.

In this workshop we will cover:

- Rendering React-generated UI in the browser
- Using JSX
- Custom Components
- TypeScript with React
- Styling with React
- Building forms with React
- Handling rendering errors with Error Boundaries
- Using React’s key prop for rendering Arrays

Prerequisites:

- Read through ["JavaScript to Know for React"](https://kentcdodds.com/blog/javascript-to-know-for-react)
- Some basic TypeScript experience (you can go through [“Beginner’s TypeScript”](https://www.totaltypescript.com/tutorials/beginners-typescript) and that should be enough)

### React Hooks

**March 12th, 8am-2pm (Pacific)**

You’ve heard of React components. React’s component model changed the landscape of UI development on the web and beyond. It has evolved over time up to now where a component is literally just a function that returns something that renders (like React elements). However, components aren’t the atomic unit of React. There’s a lower level primitive and that is React hooks. React hooks make your components truly interactive. Hooks make it possible to create powerful abstractions in the form of components and even custom hooks.

In this workshop you’ll get introduced to the concepts of React Hooks and dive deep in the most common use cases for the most common hooks you’ll use in any React application. We’ll have practical examples that are focused for your learning and exploration of how to use these hooks in the best way (yes, you can use hooks the wrong way and we’ll talk about how to avoid that).

In this workshop we will cover:

- Managing UI State
- Subscribing to events and cleanup
- Refactoring state properly
- Avoid state synchronization issues
- Interacting with the DOM and integrating with third party libraries

Prerequisites:

- Watch my talk [Why React Hooks](https://www.youtube.com/watch?v=zWsZcBiwgVE&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)

### Advanced React Hooks

**March 14th, 8am-2pm (Pacific)**

Every application needs more than the basic React hooks offer. You need to build more generic abstractions that you and your team can use throughout the application. You need to handle more complex use cases. This is where the advanced React hooks come into play.

When building generic abstractions, you often need to handle more edge cases. The dependency array in the useEffect hook relies on referential stability, so you need to add React’s memoization hooks to accomplish this. useState works most of the time, but sometimes you run into more complex state interactions where multiple elements of state affect the state changes in one another. And sometimes you really just need to have an imperative API for the user experience you’re trying to build.

This workshop will level you up in your react hooks experience so you’re prepared to dive deeper into building useful abstractions and handling complex use cases. In this workshop we’ll cover:

- Managing Complex UI State
- Creating generic Custom Hooks and utilities
- Sharing state throughout a React application
- Fine-tuning DOM interactions
- Providing an imperative API to your components and hooks

Prerequisites:

- Watch [Getting Closure on React Hooks by Shawn Wang](https://www.youtube.com/watch?v=KJP1E-Y-xyo)

### Advanced React Patterns

**March 19th & 21st, 8am-2pm (Pacific)**

You’re at the stage in your React experience where people turn to you for the abstractions you need in your application. You’ve got a set of UI elements in your designs that are unique to your application and you either need to build it or customize an off the shelf UI library. You may think you’re free and clear if you just customize a UI library, but just like with everything, if you don’t understand how it works, you’re doomed to “hold it wrong.”

And if you can’t find something that fits your use case, I’m afraid to say you’re doomed to make a lot of mistakes without the right tools and patterns.

And you’ll likely have a chance to do a bit of both building and customizing in your apps. So this workshop will be invaluable to you.

Oh, and this isn’t just about abstractions either. We’ll also cover good patterns you can use in your regular app code as well.

In this workshop we’ll cover:

- Improve perf and reduce prop drilling with composition
- Managing user focus with flushSync
- Make components work together with compound components
- Handle common use cases for hooks with prop getters
- Invert control with state reducers and control props
- Granting ultimate layout flexibility and behavior reuse with slots

Prerequisites:

- Read my blog post [Inversion of Control](https://kentcdodds.com/blog/inversion-of-control)

### React Performance

**March 26th & 28th, 8am-2pm (Pacific)**

One of the best ways to lose the trust of your users is to have a slow or unresponsive application. Sure your app may be fast on your souped up M2 MacBook Pro, but your users are using your application on low-end phones and in spotty network conditions. You need your app to perform well for these users too.

React is pretty darn fast as it is, but there are some user experiences we are required to build that can stress it out. In this workshop we’ll cover some of the most common scenarios you’ll run into as you build your React application and show you approaches to improve performance without sinking into tech debt.

In this workshop we’ll cover:

- Properly measuring performance issues (both in React and vanilla JS)
- Root cause analysis
- Lazy loading code
- Memoizing expensive derived state
- Reducing unnecessary rerenders with React.memo and externalizing state
- Windowing large lists to reduce the amount of DOM rendered

Prerequisites:

- Install the React DevTools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
- Read “[Analyze runtime performance](https://developer.chrome.com/docs/devtools/performance)”
- Experience with React and all hooks

### React Suspense

**April 1st, 8am-2pm (Pacific)**

Your web application has lots of asynchronous interactions. You don’t download all the data and code the user might view onto the device at once. That would cost you and the user dearly in performance and bandwidth. As a result, the user’s going to have to deal with loading data on demand and you’re going to have to deal with managing those loading states.

That’s where React suspense comes into play. Having a declarative, component-driven approach to managing pending UI is a great model for this kind of user experience. By the end of this workshop, you’ll feel confident using React suspense features to improve your code and the user experience your application offers around asynchrony.

In this workshop we’ll cover:

- How to properly render-as-you-fetch
- Load data with the use hook and manage pending UI with Suspense
- Using useTransition and useDeferredValue for improved loading states
- Integrate Suspense with Images

Prerequisites:

- Watch Dan Abramov's talk [Beyond React 16 | JSConf Iceland 2018](https://www.youtube.com/watch?v=nLF0n9SACd4)

### React Future (Server Components and Actions)

**April 3rd, 8am-2pm (Pacific)**

You’re interested in how far React can take the component model. Everyone is. While React has not yet officially released server components and actions as features in a stable version of React, you want to understand how these features work because you’d like to use them within one of the frameworks built on top of React which has support for them.

In this workshop we won’t be using any frameworks. In fact you might say we’ll be building our own framework. It’s important for you to understand at least one or two layers below where you typically operate to be able to use your abstractions effectively. So we’ll be working with the raw/unreleased/experimental/futuristic APIs for React Server Components and React Server Actions.

Once you finish this workshop, you’ll finally have the proper mental model for what server components and actions will do for you as an every day React app developer. Whatever kind of React app you’re building (and whatever architecture you have), you’ll find ways to apply these future features to your application eventually and after this workshop you’ll be eager to do so for the DX and UX improvements they provide.

In this workshop we’ll cover:

- The relationship between client and server components and their respective module graphs
- Streaming serialized React elements
- Submitting forms to server actions
- Managing pending state for server actions
- Providing great loading UX with optimistic UI

Prerequisites:

- Currently working on this (stay tuned).

---

I couldn’t be more excited to have you join me on this journey. This is going to be a killer workshop series that I’m sure will get you to your goals of becoming an epic web developer building React applications. And it’s a critical step on your journey to be able to build full stack web applications.

So what are you waiting for?

Let’s go! 🚀

### Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.

5-week workshop series on modern React for web apps.

React Fundamentals

React Hooks

Advanced React Hooks

Advanced React Patterns

React Suspense

React Performance

React Future (Server Components and Actions)

Epic React Workshop Series

Getting started with automated testing can be extremely intimidating. There’s just so much to learn! 

What to test, how to test, testing setup, assertion libraries, test frameworks… It’s overwhelming, to say the least.

But it doesn’t have to be. Even a rocket ship can be broken down into smaller pieces that make up its foundation. And testing code is not rocket science. 

I am here to teach you the fundamentals, essential mental models, and practical skills so you can tackle any test at any level.

This workshop is aimed at beginners and developers who have already been writing tests for some time but feel that something is missing and that each test is still a struggle and a challenge.

A walk in the dark. If you want to turn on the light and get confident when testing, you’ve come to the right place.

## What this workshop covers

Throughout this workshop, you will:

<ul className="md:pl-0 pl-0">
<ChecklistItem>Understand why you write tests and what to test in any situation. </ChecklistItem>
<ChecklistItem> Learn how to address and find value in failing tests.</ChecklistItem>
<ChecklistItem> Nail down the three-step test structure.</ChecklistItem>
<ChecklistItem> Master the assertions. Know why, when, and how you want your tests to fail.</ChecklistItem>
<ChecklistItem> See the practical importance of the testing setup and how it helps with handling side effects introduced by the code.</ChecklistItem>
<ChecklistItem> Write reliable tests for asynchronous code to prevent flakiness.</ChecklistItem>
</ul>

## Required experience

You don’t need any prior experience with automated testing to complete this workshop.

This workshop is in TypeScript, so make sure you are comfortable with declaring functions, creating and manipulating objects, and working with imports and exports in ESM in TypeScript.

Learn automated testing fundamentals. Testing challenges, test structures, and gain confidence in writing reliable tests for TypeScript.

Testing Fundamentals in TypeScript

<p className="text-lg">You’re a developer tasked with converting visual designs to HTML and CSS.</p> 

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!

## The design

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:

![screenshot of a responsive design](https://res.cloudinary.com/epic-web/image/upload/v1705402523/screenshot-of-a-responsive-design.png)

## Topics the workshop covers

Throughout this hands-on workshop, you will learn how to:

<ul className="md:pl-0 pl-0">
<ChecklistItem>Approach a new responsive design conversion, from the ground up</ChecklistItem>
<ChecklistItem>Leverage modern Figma features, such as <strong>autolayout</strong> and Dev Mode</ChecklistItem>
<ChecklistItem>Translate Figma “Design Tokens” to the Tailwind config</ChecklistItem>
<ChecklistItem>Leverage CSS layout tools like Grid and Flexbox to achieve complex designs</ChecklistItem>
<ChecklistItem>Create CSS-only Keyframe animations on page load</ChecklistItem>
<ChecklistItem>Manage dynamic styles in a Tailwind JIT-friendly way</ChecklistItem>
</ul>

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!

<Video url="https://res.cloudinary.com/epic-web/video/upload/v1705401730/Pixel_Perfection.mp4" title="Pixel Perfection" poster="https://res.cloudinary.com/epic-web/image/upload/v1705403227/pixel-perfection-video-poster.jpg" />

## **Here's why you should register for the workshop**

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.

## What to expect from Simon's workshop

You’ll be interacting and participating a lot throughout a series of **hands-on exercises.** 

This is no boring “webinar” lecture where you listen to an instructor drone on for hours straight.

Simon is an experience educator, and formally trained school teacher. He knows how to create engaging and entertaining learning environments!

Over the years, Simon has converted hundreds of designs to Tailwind. He is a former member of the Tailwind Labs core team, where he has been teaching Tailwind CSS to thousands of developers.

You’ll be hanging out with Simon for the whole day — with ample time to ask questions and have meaningful conversations.

## **Required experience**

This workshop is intended for developers who are already familiar with Tailwind CSS.

If you’re not, great free resources to quickly up-skill are the official [Tailwind docs](https://tailwindcss/com) and [YouTube channel](https://youtube.com/tailwindlabs). The [From Zero to Production](https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0) video series in particular is a great introduction to Tailwind. 

Basic familiarity with JavaScript and React is also beneficial, since we’ll be using a React + Vite app to build our UI. 

Again, not critical as the workshops stays firmly focused on HTML and CSS.

## Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.

Epic Events

Live Events and Workshops

Epic Web Conference 2024

End-to-end React Application Testing with Playwright

Advanced Vitest Patterns

React Component Testing with Vitest Browser Mode

Mocking Techniques in Vitest

Pixel Perfect Figma to Tailwind

Epic React Workshop Series

Testing Fundamentals in TypeScript

Pixel Perfect Figma to Tailwind