Epic React (v1 classic)

React Interviews with Experts

Testing JavaScript (classic)

Master end-to-end user flow tests, streamline authentication, and navigate login, profile editing, 2FA, and login verification.

Content Management Systems with Alexandra Spalato

Ankita Kulkarni, tech education expert, joins Kent to explore tech leadership. Balancing skills is key; leadership complements, not replaces, technical prowess. Start small, showcase potential, and build your leadership journey.

Leadership in Tech with Ankita Kulkarni

Artem, creator of MSW, transforms API mocking. Seamless integration, nuanced control. GraphQL, Storybook support, and enhanced WebSocket, community involvement.

API Mocking with Artem Zakharchenko

Ben Johnson, from Oracle to BoltDB, unveils LiteFS & Litestream. Expanding SQLite's horizons. Deep dive into SQLite's architecture & scalability.

Enhancing SQLite with Ben Johnson

Colin McDonnell, Bun's Developer Relations, and Zod creator, dives into web dev type safety. Zod excels in data validation. TRPC ensures end-to-end type safety.

The Evolution of Type Safety with Colin McDonnell

Edmund Hung, steward of Conform, an essential part of Epic's tech stack, dives into advanced form handling. Conform bypasses native validation for better control.

Simplifying Web Form Management with Edmund Hung

Iheanyi discuss database choices, authentication, and frontend-backend balance at PlanetScale. Vitess powers scalability.

Scalable Databases and Authentication with Iheanyi Ekechukwu

Jacob Paris, web dev and digital nomad in Bulgaria, shares insights on Remix and web development challenges. Proposes solutions for user preferences and time zones.

Understanding Web Development with Jacob Paris

Jessica Sachs, Ionic software engineer, and QA expert, dives into testing paradigms. Emphasis on balanced testing approaches and realistic use case coverage. Advocates for TypeScript and static analysis tools.

The Depth of Software Testing with Jessica Sachs

Jocelyn Harper, tech lead at The New York Times, shares insights on platform engineering and system design. Career tips, networking, learning, work ethic.

Platform Engineering with Jocelyn Harper

Debbie Playwright advocate at Microsoft, shares insights on fostering a thriving community.Playwright's adaptability and versatility in testing are game changer

Navigating the Testing Terrain with Debbie O'Brien

Mark Dalgleish CSS Modules co-creator, delves into CSS progress, React and design systems. Balancing flexibility and standardization in managing design systems


Exploring the Front-End Ecosystem with Mark Dalgleish

Mark Thompson from Google's Angular team explores JavaScript, web evolution, and AI. Embrace AI as a tool in development.

Navigating Changing Web Technologies with Mark Thompson

Matt Pocock, TypeScript expert, delves into its strengths and complexities. Balancing type safety with generics. Recommends Zod for data validation.

The Magic of TypeScript with Matt Pocock

Michael Chan, aka Chantastic, on React's evolution. Deep dive into ecosystem changes, skills for modern web dev. Emphasis on depth over surface knowledge.

Building Deep Skills with Michael Chan

Monica Powell, senior software engineer, and React community leader. Founder of React Robins. MDX for interactive content. 

Examining MDX with Monica Powell

Sandrina Pereira, remote.com staff front-end engineer, advocates digital accessibility. P-O-U-R framework. Streamlining global form management. 

Efficient Form Management with Sandrina Pereira

Sergio Xalambri, web developer at Daffy, shares his transition to Remix. From Rails and Next.js to Remix, adopting Express and middleware. 

Transitioning from Rails to Remix with Sergio Xalambri

Simon Vrachliotis, Tailwind expert at Thinkmill, dives into Tailwind's productivity, inline styling, and type safety. Versatile for various tech stacks

The Capabilities and Ecosystem of Tailwind CSS with Simon Vrachliotis

Tyler Benfield, Staff Software Engineer at Prisma, dives into database efficiency, optimization, and backend-frontend synergy. 

The Crucial Role of Database Optimization with Tyler Benfield

Nevi Shah, Cloudflare PM, blends tech and business expertise, highlighting user-centric product management and Cloudflare Pages' developer-friendly approach.

Product Management with Nevi Shah

Shaundai, senior software engineer at Netflix, shares insights on transitioning from tech sales, highlighting the value of individual strengths and Netflix's collaborative culture

From Tech Sales to Engineering with Shaundai Person

Ryan Florence, Co-founder of Remix and React Training, discusses Remix's innovations, server components, and the framework's evolution post-acquisition by Shopify.

Remix Behind the Scenes with Ryan Florence

Shirley Wu, From business to data-driven art. Balancing creativity and stability. Embracing ethical considerations in tech's fast pace.

Art, Code, and Data Visualization with Shirley Wu

Will Johnson, Sr. Developer Advocate at Auth0, explores the drawbacks of passwords, advocating for WebAuthn's secure, user-friendly authentication methods.

The Future of Authentication with Will Johnson

Interviews with Experts

Artem Zakharchenko

Kent C. Dodds

Simon Vrachliotis

Learn to mock functions, time, globals, network, and modules. Practice real-world scenarios using Vitest to write effective and maintainable tests.

Mocking Techniques in Vitest

Writing tests for their own sake is a pointless chore:

```tsx
describe('add numbers', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3)
  })

  it('should add two other numbers', () => {
    expect(add(3, 4)).toBe(7)
  })
});
```

Another annoying testing problem is when tests are too brittle, and paint your logs red even though the application seems to work just fine.

When your tests lack real purpose or seem to fail for no good reason, it's no wonder you start to question their value.

Tests are supposed to give you confidence in your code, and save you from shipping broken stuff to prod. So why does writing them feel like such a burden?

The problem is that tests like these are focused on implementation details instead of the underlying behavior. Everyone talks about the importance of testing, but there's a lack of understanding about how to write tests that are actually useful.

How would it feel to have 100% trust in your tests, knowing that any failures are not a false alarm? What if you could seamlessly translate the underlying behavior of your application into tests that are easy (and even fun) to write?

It's possible, but it requires you to take a step back from just syntax.

In order to have the confidence you're testing the right things in the right ways, you need to dig into the underlying patterns behind the scenes of a testing framework.

This is exactly what you will do in Testing Fundamentals.

In this workshop, Artem Zakharchenko, testing expert and creator of the Mock Service Worker API mocking library, will guide you through creating your own version of the Vitest testing framework.

Building a testing framework from scratch will give you a deep understanding of how the pieces fit together, and change the way you think about testing for the better.

## What You'll Learn

The workshop is broken out into four parts, each with its own challenges and exercises that build upon the last:

### Principles

First, you'll explore the principles and mental models that underlie testing strategies. This is where you will begin to distinguish between the intention of your code and its implementation details. When you focus the intention of what your code should accomplish, you can write tests that are more resilient to change.

### Test Structure

Next, you'll do a deep dive into the structure of the testing framework. You'll create your own `expect` and `test` functions, configure your test environment, and use hooks to manage side effects in your tests.

### Testing Asynchronous Code

Testing asynchronous code requires a slightly different approach when compared to testing synchronous code. Here you'll practice with testing promises and async functions, as well as handling errors and rejections.

### Moving to Vitest

Once you've learned the fundamentals of testing and built your own mini-framework, you will migrate your tests to the Vitest framework. This process will cement your understanding of not just the "hows", but also the "whys" of testing.

## Who This Workshop Is For

This workshop is for developers who have some testing experience, but feel like they're missing the bigger picture. If you're tired of writing tests that feel like a chore, and want to understand how to write tests that are actually useful, this workshop is for you.

In the Testing Fundamentals workshop, you will learn testing principles, framework structure, async handling, and more by building a mini testing-framework!

Testing Fundamentals

Let’s face it, mocking can be really confusing.

First, you need to know what to mock. Then, find the right way to mock that thing so it doesn’t compromise your test suite. Over-mock, and your tests become pointless. Under-mock, and they get brittle instead.

In either case, you put in so much effort, and you don’t feel like you’re getting much in return.

This is where Artem comes in. He’s been proving developer misconceptions around mocking wrong for nearly a decade, and he’s here to make you a mocking pro.

## What You’ll Learn

In this hands-on workshop, you’ll learn:

- The purpose of mocking;
- What to mock and when;
- How to write mocks that bring value instead of being a maintenance chore;
- How to separate your mocks from implementation details;
- Type safety strategies for your mocks;
- And **all the mocking techniques** you will need to test your code!

By solving targeted, real-world problems using the Vitest framework, you’ll gain a comprehensive understanding of mocking and finally unlock it as a useful tool in your testing arsenal.

## Workshop Structure

This workshop contains 6 exercise blocks dedicated to various techniques on mocking different data types.

### Boundaries

Understand what mocking really is, and learn how it helps you create test boundaries. See what each mock you introduce does to your tested code using visual metaphors.

### Mocking Functions

Functions are at the heart of JavaScript logic. Learn how to mock functions for effective input-output testing. Create mock functions, spy on function calls, and mock function implementation to tap into the right behaviors of the tested code.

### Mocking Date and Time

Eliminate the side effects of ever-changing date and time in your tests. Learn how to freeze time and mock date/time-dependent code to ensure consistent test results across different runs and time zones.

### Mocking Globals

Explore how to mock implicit dependencies, in a non-intrusive way. Learn to mock global values, methods, and environment variables to create the perfect test setup without meddling with things you don't own.

### Mocking Network

Gain control over network communication and test your client-side code reliably. Intercept requests and mock responses using Mock Service Worker. Reproduce various network scenarios, from success and error responses to offline behavior and response timing.

### Mocking Modules

Understand when to use module mocking and explore alternative techniques before you do. Learn how to mock modules in a type-safe and efficient way using built-in APIs in Vitest.

## Who This Workshop Is For

This workshop is meant for all developers, both those who are new to automated testing and those who’ve been writing tests for years. If you are unsure when to introduce mocks into your test suite, or how to do that so you don’t have to refactor it the next day, this workshop was made specifically for you.

Mocking Techniques in Vitest Bundle

Most web applications feature user accounts in one form or another.

To the user, having a login form seems simple enough. But behind the scenes, there's a lot going on. You need to securely store and manage user sessions, handle authentication and authorization, and protect against malicious attacks.

Without knowledge of the underlying concepts, it's easy to make mistakes (even if you decide to use a third party service or library to do all the hard work for you). Weak authentication systems, misconfigured route protection, and flawed session management all lead to vulnerabilities and negative user experiences.

The Authentication Strategies & Implementation workshop is your guide to implementing industry standard user account flows in a modern web application.

Securely managing passwords, enabling two-factor authentication, and integrating with third-party providers are just some of the processes you will practice. You'll also learn how to handle user preferences, session data, and send emails to users. This will take you all the way to the point where you could easily add Single-Sign On (SSO) support–a must if you’re building a business-to-business application.

There are a lot of moving parts to consider, but this workshop will give you the confidence to tackle them all.

## Cookies

The workshop begins by diving into cookies. This fundamental part of web browsing is often misunderstood, but important to understand. We keep it simple to ramp you up slowly on the web’s original state management solution. This also introduces us to important UI patterns you’ll want to use in other areas of web development as well. It’s surprisingly deep! Topics include:

- Storing user theme preferences in a cookie
- Server-side cookie handling
- Using fetchers for non-navigation mutations
- Optimistic UI updating to apply changes immediately

## Session Storage

Storing user preferences in cookies is fine, but you need to be more careful when it comes to session data. It's vital that users with devtools or malicious client-side JavaScript can't access or modify the data inside of cookies. In this section, you'll learn:

- Cookie-based session data persistence
- Properly getting, setting, and updating session data
- Deleting data after reading
- The flash pattern for short-lived messages

## User Sessions

Depending on the amount of data you need to store, it may make sense to use a different storage mechanism for session data. For this workshop we will continue to use cookies, however we will switch to using a dedicated session cookie. This section will teach you:

- Create a session storage object for storing user data
- Transform form submissions into user objects for storage
- Retrieving user information from cookies then the database

## Passwords

Passwords are the most common way to authenticate that a user is who they say they are. Obviously, storing them in plain text is a bad idea, but even encryption isn't enough. You need to properly prepare to securely handle passwords:

- Create a Password model in the database
- Generate secure password hashes with the battle-tested bcrypt algorithm
- Protection against password attacks
- Update signup route to securely create records

## Login & Logout

At this point, you have the ability to create users and store their passwords. But how do you actually log them in? And how do you log them out? In this one we’re also going to learn about imperative mutations which you’ll definitely want to know for other app features. This section will teach you:

- Verify a user's password hash with bcrypt
- Handling optional vs. required user data
- Guard against timing attacks
- Clearing session data on logout
- Handle edge cases like deleted accounts
- Set expiration dates for session cookies
- Implement automatic logout after a set idle time

## Protecting Routes & Role-Based Access

Most web application have routes that you need to be logged in to access. It's one thing to prevent this in the UI, but the real thing you need to do is protect the data that powers those pages. There are also considerations for different user roles and permissions. This section will teach you how to:

- Ensure users only access data they own
- Restrict private pages to logged in users
- Implement smart redirects for login and logout
- Specify and enforce permissions with Role-Based Access Control (RBAC)

## Managed Sessions

Imagine a user logging in on a public computer, who then forgets to log out. This security risk can be mitigated by implementing a session management feature:

- Add a session model to the database
- Update auth utils, login, and logout routes to query sessions
- Refactor for session expiration support
- Create a page for displaying & managing active sessions

## Email Verification & Password Resets

Email is one of the most common ways to verify a user's identity. If a user loses access to their account, needs to reset their password, or wants to change their email address, you'll need to send them an email. While the actual sending of the email is best handled by a third-party service, the process flow behind the scenes is what you'll need to implement:

- Integrate a third-party email API
- Share session data between routes for multi-step flows
- Style HTML emails
- Generate time-based one time passwords (TOTP) for password resets
- Force verification of email address change

## Two-Factor Authentication

Two-factor authentication (2FA) is a great way to add an extra layer of security to your application. It requires the user to enter a code from a second device along with their username and password. Even if an attacker determines a password, they won't be able to access the account without the second factor. In this section, you'll add 2FA to the Epic Notes application:

- Handle the 2FA enable flow
- Provide the user with a QR code
- Implement a 2FA code input form
- Verify the code and log the user in
- Require re-verification
- Provide option to disable 2FA

## Third-Party Authentication

There are several reasons to use third-party authentication providers. It can be a great way to reduce friction for users, or allow easier access to other data. The most common way to do this is with OAuth 2. Once you’re finished with this section, you’ll be geared up to implement third party auth with any provider. Including Single-Sign On (SSO) flows. We’ll be following these steps:

- Add an authentication strategy to enable GitHub login
- Create a connections model to associate users with providers
- Prevent duplicate account connections & hijack attempts
- Pre-fill user account data based on third-party login
- Mocking third party APIs for testing
- Gracefully handle login errors
- Implement smart redirection to return to original page after login

Learn best practices for managing user sessions, passwords, 2FA, email verification, OAuth, and more in the Authentication Strategies & Implementation Workshop!

Authentication Strategies & Implementation

The closer you are to the server, the faster your experience will be.

It wasn't long ago that web app developers had to choose a region where they thought the bulk of their users would be located, leaving people on the other side of the world with longer waiting times.

Fortunately, times have changed and it's now possible to deploy an application and have it be distributed worldwide– and it's not as tough as it sounds!

This tutorial will show you how to deploy a multi-region Node.js application with a persistent database, ensuring optimal performance no matter where your users are located thanks to Fly.io.

Here are some of the topics you'll tackle along the way:

## Deployment with Fly.io

The first step is to get acquainted with configuring Docker and Fly's CLI tool by deploying the demo Counter app.

After all, you have to have everything working in one region before you make it work in multiple regions!

## Data Persistence and Health Checks

You'll learn how to create persisted volumes to avoid data loss, as well as the steps for setting up health checks and custom endpoints for monitoring the app.

## Automatic Deployment with GitHub Actions

The deployment process is pretty easy thanks to Fly's CLI tool– but automating it makes it even easier 😎

## Creating a Staging Environment

Testing your app safely in a staging environment before it goes live is a great way to ensure a smoother rollout with reduced risk of downtime. This is a huge benefit that comes from a minimal amount of configuration.

## Embrace the Distributed Architecture

Once you understand how the pieces fit together, you'll be ready to deploy the demo application to regions all around the world.  
But it's not just the app itself. Fly.io supports LiteFS, which is used to replicate SQLite databases. This means your database can live on the edge, right beside your application.

Everything you learn about deployment in this tutorial is ready for you to put into action for your own applications.

Ready to fly?

Let's do this!

Deploy Web Applications All Over the World

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

The Professional Web Forms Workshop will equip you for building complex, fully accessible forms that handle validation and file uploads while preventing spam.

Professional Web Forms

We all know the drill. The code works on your machine but you didn’t realize the impact of the change you made and it breaks in production. This problem grows exponentially as your application’s size and usefulness grows. Unpredictability can be a developer's worst nightmare.

However, many developers find it difficult to effectively test their code. Manual testing gets tedious fast. Complex logic and async code can be tricky to test effectively.

The Full Stack Testing Workshop will equip you with the tools you need to ensure your app works now and in the future. You'll learn how to write modular, maintainable tests that cover all of your code, from the backend to the frontend.

As the author of the de-facto standard testing library for web development (called eh… Testing Library), I have some solid opinions that have led many teams to much more confidence shipping their code. Let’s get you some of that confidence.

## End-to-End Testing with Playwright

With end-to-end (E2E) testing, you can validate a web app from the user's perspective. This is the closest you can get to a real user interacting with your app. In this section, you'll learn the ins and outs of writing a test with Playwright:

- Best practices for setup before running tests
- Simulating user actions like interacting with the UI to perform a search
- Creating a new user in the database
- Cleaning up after tests have run
- Using playwright fixtures for reliable setup/teardown

## Mocking & Authentication for E2E Tests

When your application relies on external services, you need to have a way to test them without actually using them. Similarly, you don't want to fully onboard a new account every time you test an authenticated user flow. In this section, you'll learn how to re-use the same mocks we’ve been using for development to mock third-party services and simulate logging in:

- Use Mock Service Worker to intercept network requests
- Replace email verification with a local file solution
- Attach cookies to Playwright
- Reusing 2FA logic for local testing
- Testing behavior with different HTTP responses

## Unit Testing

Sometimes you’ve got some really complicated business logic in your app. Business logic that is critical to your application. For this stuff, it’s nice to package it up in its own function or module to keep all that logic in one place. This is the perfect situation where lower level unit testing comes in handy. Here, we'll dive into unit testing with the Vitest framework to ensure that each function and module behaves as expected:

- Organizational best practices
- Asserting outcomes with `expect`
- Recording function calls with spies
- Specifying test behavior with Vitest hooks
- Keeping test output clean to avoid cluttering up the terminal

## Component and Hook Testing

When building React components, you should focus on two users: the user who interacts with a component, and the developer who renders it. By using Testing Library, we can avoid mocking React and its hooks and instead test components as they would be used in a real app:

- Render components with Testing Library
- Simulate the DOM environment on a per-test basis
- Querying for missing elements
- Testing hooks in isolation from React
- Stubbing React context
- Cleanup after testing

## Authenticated Integration

Similar to higher-level E2E tests, it is often necessary to simulate an authenticated user. However, we don't want to test the entire user flow every time we make a change. In this section, you'll learn how to test authenticated operations without the overhead of a full E2E test:

- Generating random session IDs
- Associating sessions with users
- Testing authenticated routes
- Asserting user state in responses

## Custom Assertions

Writing tests is good; writing readable and maintainable tests is better. Custom assertions can make your test code easier to understand and modify. Here you'll learn to encapsulate complex checks into simple, understandable assertions:

- Create matchers for specific states
- Share assertions across tests
- Add custom assertions to TypeScript definitions
- Format test output with colors for readability

## Test Database

There are some decisions to make when writing tests that interact with the database. Testing with the development database has benefits, but requires us to remember to delete data after each test. By using a test database, we can avoid accidents while still being able to run our test suites:

- Set up a test-specific database instance
- Seeding a minimal amount of data
- Defining a global setup for Vitest
- Understanding the importance of module import order

Learn how to write tests that cover all of your backend and frontend code. Web Application Testing covers unit testing, E2E, integration testing, and more!

Web Application Testing

This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout this workshop, you’ll be guided along essential steps—from analyzing Figma designs to implementing responsive layouts and learn advanced CSS techniques.

## Project Setup

Before implementing Tailwind in your website, it's essential to set up and analyze the provided Figma design file. This ensures alignment with design elements and sets a solid foundation for your project. By analyzing and preparing the Figma design file upfront, you streamline development and ensure your Tailwind website reflects the intended design accurately.

- Semantic HTML structure
- Color and typography integration

## Mobile First

Prepare to bring your landing page design to life by focusing first on its mobile implementation, guided by insights from the Figma design file. Understanding the mobile layout is crucial before scaling up to larger screens. You'll dissect the mobile design into key segments: the content section featuring the logo, heading, and paragraphs; the arrangement of logo tiles; and the overall structural layout. By analyzing how these elements evolve across breakpoints, you'll gain a clear strategy for organizing your page effectively.

## Responsive Design

Ensure your website maintains consistent quality across all screen sizes by implementing precise design adjustments specified at different breakpoints.

- Current layout strength
- Design-Specific adjustments
- Attention to detail
- Tools for precision

## Art Directed Grid

CSS Grid provides a powerful feature that allows you to place elements in specific grid cells according to your design. By learning the placement of elements in a CSS Grid, you'll be able to create intricate and visually appealing designs with ease.

- Grid cell placement
- Precision positioning
- Create complex layouts

## Interaction

Add interaction styles to the application to clearly indicate interactive elements such as links and logo tiles. The goal is to closely recreate the designs specified in the Figma file to enhance the user experience and clearly indicate which elements are interactive within the application.

- Implementing hover states for links
- Defining focus states using Tailwind's outline and ring utilities
- Ensuring the implemented styles match the designer's vision

## Animation

Explore how to add engaging animations by to our user interface using exclusively CSS keyframe animations.

- Implementing a visually appealing role reveal effect on logo tiles
- Creating a staggered animation delay for a stunning waterfall entry effect
- Respecting users' preferences by providing a simple fade-in alternative for those who prefer reduced motion
- Ensuring accessibility by considering users with motion sensitivity

## Subgrid Alignment

CSS subgrid is a powerful feature that aligns a nested grid with its parent grid's cells. This section demonstrates its effectiveness in a specific design scenario, illustrating how it enables precise alignment and layout control.

## Migrate to Tailwind v4

Discover the enhanced flexibility of Tailwind CSS version 4, which introduces a streamlined method for configuring your theme directly in CSS using CSS variables. This update simplifies the customization process compared to the previous reliance on JavaScript config files.


Learn to implement 'pixel-perfect' designs from Figma with responsive layouts, advanced CSS techniques, and Tailwind v4 migration in this workshop.

Pixel Perfect Tailwind

Pixel Perfect Figma to Tailwind

Developers working on modern web applications today face a myriad of challenges.

The apps we build are expected to be good looking, fast, and secure. They need to be interactive, responsive, and accessible. They need to be SEO-friendly, and they need to be resilient to errors.

In order to be successful, you need to ensure you have a solid foundation to build on.

Full Stack Foundations is a comprehensive, in-depth workshop that sets the stage for the rest of the Epic Web series. It's designed to equip you with the current best practices for handling CSS, routing, data loading, and more.

This isn't some basic "intro" workshop! Even if you're an experienced developer, you'll learn new skills and techniques that will help you build better apps.

<Testimonial author={{name: "Gwen Shapira"}}>

It was 🤯. A lot of fun, and I learned so much in one day. Even with 23 years as a software engineer, I have a much clearer understanding of how the web actually works. Now, months after this workshop, I’m working on a web project and this gave me the mental framework I needed to quickly ramp up and feel competent. I’m not even using the same tools Kent uses in the workshops! 13/10.

</Testimonial>

## Styling

In recent years, CSS has seen a lot of evolution in its usage and tooling. There are new best practices for importing stylesheets, managing assets, and optimizing styles. Failing to follow them can lead to slow-loading pages and a maintenance nightmare.

Here, you'll learn how to handle styling right:

- Loading external stylesheets & other resources
- Managing assets with fingerprinting and caching
- Compilation with PostCSS and Tailwind CSS
- Bundling CSS for libraries and components

## Routing

The URL is critical for the web, and is closely tied to your application's routing. Making suboptimal decisions affects loading performance, navigation, and overall experience.

This section is a deep dive into routing, from the basic filesystem structure through nested routes and dynamic parameters:

- Conventions for signifying routes
- Layout and URL nesting
- Navigation and linking
- Dynamic route params
- Resource routes

## Data Loading

The web is all about data, and nothing frustrates users more than when loading is slow or broken. This section introduces you to AJAX/fetch and Remix loading features, giving you the tools to build stable, fast-loading applications:

- Working with `Request` and `Response` objects
- Fetching data for initial and subsequent loads
- Accessing environment variables
- Connecting routes to loaders

## Mutations

Interactivity makes apps engaging, but also introduces complexity. You need to ensure that the thing that happens when a form is submitted is what the user expects. Here you will use form methods and actions to mutate existing data in a mock database:

- Creating forms with `method` and `action`
- Storing and extracting form data
- Handling invalid submissions
- Form state management
- Specifying intent

*This module sets the stage for the complete Professional Web Forms workshop.*

## Scripting

The browser is capable of quite a lot on its own. Up until this point of the workshop, the Epic Notes application will work without any JavaScript. However, scripting allows us to enhance the user experience in ways that would otherwise be impossible.

In this section, you'll incrementally add in features like client-side pending UI, prefetching, and optimistic updates:

- Scroll position restoration
- Considerations when overriding default browser functionality
- Server and client bundles & entry files
- Preloading data & code for anticipated actions
- Transitions with the `useNavigation` hook

## Search Engine Optimization

Ignoring SEO is like building a store without a sign— people simply won't find you. If you want to be successful, your site needs to be discoverable and optimized for presentation on those platforms.

SEO is a very broad topic, but this section will get you set up on the technical side of the equation:

- Essential tags and attributes
- Overriding default metadata for specific pages
- Dynamically set metadata for social sharing
- Reusing parent data for nested routes

## Error Handling

Even the best apps can break, but what separates the good from the great is how they recover. Lack of proper error handling can lead to frustrated users and lost business.

This section will teach you how to anticipate, handle, and recover from errors, making your application resilient and user-friendly.

- HTTP status codes
- Using `ErrorBoundary` components to contain errors
- Handle thrown errors when fetching data
- Error bubbling from child routes to parent routes
- Implement useful 404 pages

The Full Stack Foundations workshop covers modern web development best practices including Styling, Routing, Data Loading, Forms, SEO, Error Handling, and more!

Full Stack Foundations

Data modeling is as a critical skill for the full stack developer. After all, data is the foundation of your application.

If you don't do it right, you'll find yourself stuck before you even get started. A poorly designed database schema can lead to a lot of headaches down the road when you need to make changes or add new features. Inefficient queries can slow down your application, leading to a poor user experience. Analyzing root causes to issues like these can be a time-consuming and frustrating process.

Web developers spend a ton of time into making their UI handle a slow backend well which is great and you should do that too (you don’t control network latency after all). But *****great***** web developers put effort into making it so their users hardly ever experience that great pending UI by making the backend as fast as possible. Your UI can’t be any faster than your slowest database query.

The Data Modeling Deep Dive Workshop will help you develop a keen understanding of databases and how to manage them. You'll learn the same tools and techniques used at the top tech companies to design robust database architectures and optimize query performance.

We'll be using production grade tools like Prisma and SQLite, but the concepts you learn in this workshop will be applicable to other database systems as well.

## Database Schema

A well-designed database schema is the foundation of your application. It's critical to get it right from the start, as it can be difficult to make changes down the road. This section provides a background on SQL before introducing Prisma's suite of tools. You'll learn:

- SQLite database initialization with Prisma
- Prisma's Object Relational Mapper (ORM)
- Defining a schema with Prisma's declarative schema language
- Converting a schema to SQL with the Prisma CLI
- Viewing and editing your database in Prisma Studio

## Relationships

Poorly planned relationships between database models can lead to data inconsistencies and increased query complexities and performance problems. To avoid these issues, you need to understand the different types of relationships and how to implement them. This section provides you with practical experience in recognizing relationships:

- One-to-many relationships (User has many Notes)
- One-to-one relationships (User has one UserImage)
- Updating the database with Prisma
- Planning models for the future
- Generate an Entity Relationship Diagram (ERD) for visualization

## Migrations

As your application evolves, so will your database schema. It's not uncommon for there to be "breaking changes" that affects one or more of your database models. This is where migrations come in.

Migrations allow you to track and synchronize schema changes across environments. Traditionally migrations have been tricky to manage, but this section will teach you how to use migrations to ensure your development, staging, and production environments are always in sync:

- Generating SQL migration code with Prisma
- Best practices for documenting & tracking migrations
- The "widen then narrow" approach for eliminating downtime
- Experimenting with migrations before permanently applying them

## Seeding Data

Manually adding data to a database is not only time-consuming but also prone to errors. Scripting to the rescue!

Here you'll learn how to populate your databases with consistent data for development and testing purposes:

- Initializing a SQLite database
- Idempotent scripting
- Resetting the database with Prisma
- Nesting SQL queries to simplify foreign key connections

## Generating Seed Data

Using hardcoded seed data works great for small applications, but it won't provide the best idea of how your application will perform at scale. You also shouldn't use real user data during development for plenty of obvious reasons.

A better approach is to use a library like Faker.js. This section will teach you how to use Faker.js to generate seed data for your database:

- Balancing realism with practicality when generating data
- Creating realistic user information
- Varying data quantities and randomness
- Validating against the schema
- Enforce data uniqueness

## Querying Data

In SQL, queries are written with the `SELECT` statement. This is one of the most powerful statements available, but it can also be one of the most complex. This is where tools like Object Relational Mappers (ORMs) come in, helping developers write SQL in a more intuitive way. Although it isn't a traditional ORM, the Prisma Client is an indispensable tool for modern web development. In this section, you'll learn how to get the most out of it:

- Understanding how Prisma's API maps to SQL
- Handling Hot Module Replacement (HMR)
- Logging slow queries
- Pre-connecting the client to the database

## Updating Data

Data mutation is a common task, but doing it incorrectly can lead to data corruption or loss. Especially when a single user action results in multiple database changes (for example, transferring money between user’s bank accounts). Getting mutations wrong can be a serious problem for your app’s success. This section will walk you through techniques for working safely:

- Deleting and updating data
- Conditional upserts
- Combining multiple queries into a transaction
- Rolling back to a previous transaction

## SQL

No matter how great an ORM is, sometimes you have to write raw SQL. In this section, you'll learn how to write raw SQL queries and execute them with Prisma. You'll also practice with:

- Wildcard queries
- Runtime schema validation with Zod
- Using joins to enable more complex queries
- Specifying query result ordering for more efficient searching

## Query Optimization

Nobody likes a slow application.

There are many stories of companies spending millions of dollars on scaling hardware, adding multiple levels of caching, and even rewriting their entire application in pursuit of a faster performance– only to find out later that the solution was optimizing their database indexes and queries.

In this final section, you'll learn how to optimize your queries for maximum performance:

- Identifying the index
- Analyzing raw SQL queries
- Multi-column indexing
- Balancing premature optimization with practicality

The Data Modeling Deep Dive Workshop will teach you best practices for designing database schemas, managing relationships, data mutations, and optimizations.

Data Modeling Deep Dive

React Fundamentals

React Server Components

React Performance

React Hooks

Advanced React APIs

Advanced React Patterns

React Suspense

Kent C. Dodds is joined by expert developers, library creators, and tech industry leaders who share their insights and experience working within the ever-evolving world of web development.

These conversations cover a wide range of topics ranging from the intricacies of database efficiency, the future of authorization, the role of leadership in tech, and everything in between.

No matter your level of experience in web development, these conversations offer a wealth of knowledge and ideas that will inspire you to refine your craft, push boundaries, and become an Epic Web dev!

## Content Management Systems with Alexandra Spalato

Alexandra Spalato, a Developer Relations Engineer at Storyblok, discusses the future of content management systems. She emphasizes the significance of a CMS in simplifying complex processes into user-friendly interfaces and making content creation more accessible to non-developers.

## Leadership in Tech with Ankita Kulkarni

Developer and leadership educator Ankita Kulkarni discusses the intersection of leadership and development. The conversation explores the acquisition of leadership skills, and how to find the balance between coding and leadership roles. Ankita provides strategies for advancing into leadership positions, emphasizing the importance of proactive career management.

## API Mocking with Artem Zakharchenko

Artem Zakharchenko, the creator of Mock Service Worker (MSW), joins Kent to discuss the evolution of MSW from a weekend project into to a powerful open-source tool for API mocking and debugging.

## Enhancing SQLite with Ben Johnson

Ben Johnson is a developer with a 20-year coding career spanning roles from Oracle to creating BoltDB. In this conversation, Ben discusses LiteFS and Litestream, both tools aimed at expanding SQLite's utility. Topics include a dive into SQLite's architectural elements, and how LiteFS enhances scalability on a single node.

## The Evolution of Type Safety with Colin McDonnell

Colin McDonnell, a Developer Relations representative at Bun and the creator of Zod, discusses how Zod has grown from its original usage in medical software into a prominent tool in the TypeScript ecosystem. Colin also touches on TRPC, an end-to-end type safety library, and the challenges it addresses.

## Navigating the Testing Terrain with Debbie O'Brien

Debbie O'Brien, a community advocate for Playwright at Microsoft, discusses the adaptability and versatility of Playwright as a testing tool. She emphasizes its value in various testing scenarios and its role in Microsoft's application testing, including VSCode, Bing, and Teams.

## Simplifying Web Form Management with Edmund Hung

Edmund Hung, web developer at Delivery Hero, discusses how Conform has become a crucial component of the Epic Stack. He highlights Conform's unique approach to form management, which bypasses native browser validation in favor of its own system.

## Scalable Databases and Authentication with Iheanyi Ekechukwu

Iheanyi Ekechukwu, a software engineer at PlanetScale, explore database and hosting options, highlights PlanetScale's scalability and the role of Vitess in the technology. The conversation also covers authentication solutions, and cautions against over-reliance on external services.

## Understanding Web Development with Jacob Paris

Jacob Paris joins Kent to discuss his work on Remix. He highlights some of the challenges of server rendering, including handling user preferences and time zones. One the client side, Jacob emphasizes the importance of server output for correct client rendering, especially when users disable JavaScript.

## The Depth of Software Testing with Jessica Sachs

Jessica Sachs, software engineer at Ionic and a testing & QA expert, joins Kent in a conversation about various testing paradigms. They discuss topics ranging from Test-Driven Development to End-to-End testing, emphasizing the importance of a balanced approach.

## Platform Engineering with Jocelyn Harper

Jocelyn "Josie" Harper, tech lead at The New York Times, discusses her tech journey into roles including platform engineering and system design. Additional topics include backend optimization and the significance of documentation.

## Exploring the Front-End Ecosystem with Mark Dalgleish

Mark Dalgleish, co-creator of CSS Modules and contributor at Shopify, discusses the evolution of CSS, React, and design systems. Touching on CSS Modules and CSS-in-JS, the conversation also goes into the challenges of managing design systems, particularly when it comes to balancing flexibility with standardization.

## Navigating Changing Web Technologies with Mark Thompson

Mark Thompson from Google's Angular team joins Kent to share his career journey, the web's evolution, and AI's role in software development. Additional topics include the transformational role of APIs and Angular's transition from the View Engine to Ivy.

## The Magic of TypeScript with Matt Pocock

Matt Pocock, internet-renowned as the "TypeScript guy", discusses the merits and challenges of the TypeScript ecosystem. Highlighting its benefits in IDE capabilities and bug reduction, Matt also touches upon complexities in managing types and creating libraries.

## Building Deep Skills with Michael Chan

Educator and enthusiast Michael Chan shares his thoughts on the changing React landscape, emphasizing the significance of TypeScript and libraries like React Query. He advocates for building a deep understanding over surface-level knowledge. Both Michael and Kent stress the joy of creating meaningful projects and the importance of a comprehensive web development understanding.

## Examining MDX with Monica Powell

Monica Powell, a senior software engineer at Newsela, dives into MDX, which allows for developers to combine JSX with Markdown for creating rich content. She highlights MDX's role in the Unify ecosystem, as well as its challenges when getting started with CMS integration.

## Efficient Form Management with Sandrina Pereira

Sandrina Pereira, a staff front-end engineer at remote.com, emphasizes the significance of web accessibility using the POUR principles. Additional topics include the complexities of managing large-scale forms dynamically for users across the world. 

## Transitioning from Rails to Remix with Sergio Xalambrí

Sergio Xalambrí shares his experience transitioning from a Rails and Next.js setup to Remix at fintech startup Duffy. Some of the challenges include highlighting challenges in internationalization and adding middleware. The conversation also into remix-auth's authentication strategies and contrasting Remix's modular approach with Rails' cohesive framework.

## The Capabilities and Ecosystem of Tailwind CSS with Simon Vrachliotis

Simon Vrachliotis, a Tailwind expert at Thinkmill, praises the benefits and adaptability of Tailwind CSS, emphasizing its alignment with React's component-level concerns. Simon discusses solving for type safety in addition to recommending tools for enhancing the Tailwind workflow.

## The Crucial Role of Database Optimization with Tyler Benfield

Tyler Benfield, a software engineer at Prisma, dives into the intricacies of database efficiency, emphasizing backend optimization for enhanced frontend performance. Tyler also explores the advantages and limitations of ORM tools like Prisma, the potential of SQLite in production, and the universal importance of SQL knowledge across platforms.

## Product Management with Nevi Shah

Nevi Shah, a product manager at Cloudflare, combined her technical and business skills to  transition from academia and consulting into product management. She highlights the role of a product manager in understanding user needs and introduces Cloudflare Pages as a solution for serverless architecture, while also discussing alternative hosting options like Fly.io.

## Remix Behind the Scenes with Ryan Florence

Ryan Florence, co-founder of Remix and React Training, discusses the innovations behind Remix and its transition from React Router. The framework's compatibility with the web's fetch API broadens its server architecture reach, and its recent acquisition by Shopify promises a bright future for Remix.

## From Tech Sales to Engineering with Shaundai Person

Shaundai Person, a senior software engineer at Netflix, joins Kent to discuss transitioning from tech sales to software engineering. She highlights the importance of recognizing and building individual strengths, especially communication, in large corporate settings.

## Art, Code, and Data Visualization with Shirley Wu

Shirley Wu, an award-winning creator specializing in data-driven art, transitioned from the business sector to web development. She shares how her work offers artistic fulfillment and financial stability, but she emphasizes the importance of ethical considerations.

## Understanding the Future of Authentication with Will Johnson

Will Johnson from Auth0 highlights the limitations of password-based authentication and discusses the potential of alternatives like the Web Authentication API (WebAuthn). Will shares his anticipation for a future where biometrics or digital verification replace traditional passwords, as well as a need for more nuanced access controls in growing organizations.


Epic Megabundle

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

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.

Mocking Techniques in Vitest (live)

Workshop Introduction

Test boundaries

Boundaries

Mock functions

Spies

Mock implementation

Functions

Date and time

Timers

Ticks and tasks

Global methods

Global values

Environment variables

Globals

Set up MSW

Mock responses

Error responses

Network errors

Response delay

Network

Dependency injection

Private side effects

Modules

Workshop Outro

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!

## 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 autolayout 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.

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 (live)

Full Stack Vol 1

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 autolayout 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.

Introduction

In this lesson, we'll use Figma to design the semantic structure of the Epic Stack homepage and then write the corresponding React markup in a Vite-powered site.

In this lesson, we'll add the HTML that will serve as the basis for our page. We'll import the logos from data and add the corresponding markup to the page. We'll also see how to use the size utility to ensure the logo has a good size on the page without having to specify both the width and the height.

Functional and Semantic Markup

Unstyled Markup

Learn how to configure Tailwind's theme to create bespoke, project-specific utilities that reflect your design system.

Tailwind config to change the breakpoints, colors and the font family and size as specified by our designer in Figma. 

Customizing Tailwind CSS Configuration for a Responsive Design

Tailwind Theme Customization and Configuration

Project Setup

 We will create a basic page layout using the `div` wrappers and see how they can be used to define the structure of the page.

 We'll start with the `min-h-screen` class to create a full page container, then we'll add some padding using the `px` and `py` utility classes. 

Dynamic Layout Containers

Structural Layout

Start to design the HTML structure of the header section of the page. You will use CSS grid to contain the content and set the size and spacing of the elements.

We'll learn how to build a layout in Tailwind by creating a centered container with max width, and add some space between elements. 

Creating Layouts with Flexbox and Grid

Implementing the Content Section

In this lesson, you will recreate the logo list design using CSS grid. Pay attention to the max width container and the gaps between elements.

use Tailwind to build a responsive design for a component that will scale with the width of the container. 

Styling Lists with Flexbox & Grid

Building a Responsive Logo

Mobile First

learn how to use the `Typography` component to ensure that the font sizes of your headings and paragraphs are responsive. 

Learn how to use Tailwind's utility classes to make responsive typography adjustments for headings and paragraphs.

Responsive Typography

Implementing Responsive Typography 

In this lesson, you will learn how to use the spacing scale to manage the spacing around and between elements.

Importance of breaking out design into components when working on a responsive design.

Responsive Spacing

Spacing Around and Between Elements

At the Excel breakpoint we want to place the contents section on the right and the tiles on the left. We will use the grid to define the column widths.

Learn how to create a two column layout with auto-sizes and one fraction units, use the `order` feature to invert the order of the grid cells.

Responsive Grid Layouts

Creating Responsive Two-Column Layouts

refactor our flexbox layout to use the CSS Grid layout, create a grid with 5 columns and 6 rows and change the tile flow 

We will cover the simple process of switching from flexbox to css grid, changing the grid structure, and changing the auto flow direction.

Responsive Grids with Auto Flow Columns

Building a Structured Grid Layout

Responsive Design 

Learn how to use CSS grid lines as a coordinate system to place grid elements exactly where you want them to be inside the grid with Tailwind.

In this lesson, we will add a `column` and `row` property to each logo object, and use these properties to position each logo in the top left of the grid.

Adding Grid Coordinates to Logo Objects

Assign Coordinates to Elements

In this exercise, you will use the lookup directory pattern to dynamically compose grid classes based on an object’s values.

Leverage the power of TypeScript and dynamic styles to create a simple yet flexible grid system with Tailwind.

Dynamic Grid Placement 

Lookup Objects for Grid Placement

Art Directed Grid 

Learn how to apply the hover and focus states for links by adding the hover "hover" and focus "focus" class to the link.

In this lesson, we’ll use Tailwind to remove the underline on

Accessibility with Focus and Hover Styles

Styling Text Interactions

In this lesson, you will learn how to style the logo tiles on hover and focus using the CSS `

In this lesson, you will learn how to use the utilities in Tailwind to completely customize the

Customizing Hover and Focus Styles 

Logo Interaction Styling

Interaction

Learn how to create a keyframe animation in Tailwind and apply it to any element in your markup.

Controlling Animation Delays and Fill Modes

Add an Enter Animation

In this exercise, you will learn how to set a responsive animation keyframe that will be applied at a specific breakpoint.

We'll create a new keyframe animation for the slide left and update our config to support it. We'll then apply the animation based on the Excel breakpoint.

Responsive Animations

Change Animations Based on Breakpoints

Learn how to create a cool logo reveal animation using keyframes and easing curves, leverage the open props library for advanced spring easing curves.

Learn how to create a reveal animation in Tailwind using Open Props. 

Roll Reveal and Fade-In Keyframe Animations

Implementing Roll Reveal Effect

Learn how to use the CSS `animation-delay` property to create a staggered reveal effect.

learn how to create an animated stagger effect using CSS and a render prop.

Delayed Animations Based on Loop Index

Adding Stagger Reveal to Animations

In this lesson, we'll add a small delay to the first keyframe so that the animation doesn't steal the focus from the rest of the page loading animation.

In this lesson, we'll add an animation delay to the logo and heading elements to create a balanced look in the Epic Stack animation.

Professional Development Workshops

A collection of exercise-driven, in-depth Web Development workshops.