Kent C. Dodds

Chantastic

Simon Vrachliotis

Juri Strumpflohner

Maximize your learning experience by learning how to use the Epic Workshop App!

The Epic Workshop App is a fantastic learning environment based on research for what makes for retention-based learning. It's a unique experience so it has a learning curve of its own. This tutorial uses the Epic Workshop App to teach you how to use the Epic Workshop App!

### What You'll Learn
- Navigate the Interface: Get oriented with the Epic Workshop App interface, learn the navigation patterns, track your progress, and discover keyboard shortcuts that will speed up your workflow.
- Understand the Exercise Structure: Learn how exercises are organized—from context pages with background information to hands-on playground steps where you'll make code changes and work through solutions.
- Work with Different App Types: Discover the different types of applications you'll encounter across Epic Workshops and learn how to interact with each one, from apps with automatic previews to those requiring manual script execution.
- Track Progress and Reflect: Learn how to compare your solutions with instructor implementations, mark lessons as complete, and use reflection forms to solidify your understanding.

The Epic Workshop App is a powerful tool for learning and it takes some time to get used to. In this tutorial, we'll walk through the features of the app to make sure you're set up for success.


Welcome to the Epic Workshop App Tutorial

Introduction to Exercise Navigation

Your First Exercise Step - Problem

Your First Exercise Step - Solution

Working with Multi-Step Exercises - Problem

Working with Multi-Step Exercises - Solution

Exercise Navigation - Wrap Up

Introduction to App Varieties

Apps Without Preview - Problem

Apps Without Preview - Solution

Simple Apps Without package.json - Problem

Simple Apps Without package.json - Solution

App Varieties - Wrap Up

Congratulations on Completing the Workshop!

Learn How to Use The Epic Workshop App

Publish NPM packages using Nx release, handle versioning, changelogs, and automated publishing in a monorepo structure with interdependent packages.

Automated npm Package Publishing with Nx

Configure Nx using nx init to enable automated task running, caching, and dependency management in your monorepo.

Setting Up Nx in Your Project

Learn how to install and configure the @nx/js plugin for Nx release, enabling automated versioning and publishing of JavaScript packages in your monorepo.

Integrate Nx Release with @nx/js

Learn to manage your first package release using nx release, including version updates, changelogs, and git tags.

Getting Started with Nx Release

Compare two version control strategies, fixed keeps packages in sync, while independent enables separate package versions.

Fixed vs Independent Versioning in Nx

Map commit types to version changes and auto-generate changelogs using conventional commits in Nx release.

Versioning with Conventional Commits in Nx

Learn how to configure conventional commit types in Nx to control version bumps, changelog formatting, and custom documentation behaviors.

Configure Commit Types for Flexible Versioning

Learn to use version plans in Nx for flexible version management. Master creating, editing, and executing version plans for automated package releases.

Automated Versioning with Nx Version Plans

Learn to set up and manage individual changelogs for each project in your Nx workspace while maintaining a unified workspace-level changelog 

Managing Project Level Changelogs in Nx

Learn to customize your changelog's appearance and content in Nx release by configuring render options and conventional commit types in nx.json.

Customizing Changelog Formatting in Nx Release

Learn to create and configure a local npm registry using Verdaccio and Nx, enabling local package testing and end-to-end integration tests.

Setting Up a Local npm Registry with Verdaccio

Master tag pattern customization in Nx release to create standardized git tags and commit messages that match your team's conventions and release workflows.

Customizing Nx Release Tags and Commit Messages

Learn to build custom release automation using Nx's programmatic API. 

Creating Custom Release Scripts with Nx's API

Handle package versioning in a separate build directory using Nx release, ensuring source files remain untouched while automating the publish process.

Managing Package Versioning in a Build Directory

Learn how to manage package versions and resolve common errors when working with monorepos by setting private project settings or modifying the nx.json file.

Defining which Projects to Version

Learn how to pre-build packages before releasing them in an Nx workspace, ensuring a more efficient and accurate release process.

Pre-Building and Releasing Packages in Nx Workspaces

Learn how to set up GitHub releases for your NX repo, providing more visibility into changes, features, and fixes between versions.

GitHub Releases for Package Changelogs

Learn how to set up a GitHub Action to automate releases for your npm workspaces, creating a smoother publishing process and reducing manual efforts.

Streamlining Package Publishing using GitHub Actions and `npm`

Streamline your package publishing process by using GitHub Actions, npm registry, and package scopes to maintain order and efficiency.

Automating Package Publishing with GitHub Actions

Set up provenance support to sign and link your npm packages to their source commits for better security, tracking and transparency of your published packages.

Adding Provenance Support

Versioning and Releasing NPM packages with Nx

Tailwind CSS Color Tokens

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

Support enabling dark mode support in your tailwind project with just a single class.

Dark Mode

Multi-Theme Support

Color Design Tokens Outro

Color Design Tokens

Conversion to Tailwind v4 Introduction

Theme Configuration in CSS

Simplification

Conversion to Tailwind v4 Outro

Conversion to Tailwind v4

Tailwind CSS Color Tokens Outro

Outro

In this tutorial, you'll elevate your Git skills, learning from mistakes and unearthing lesser-known tricks that will help you in your everyday life as a developer.

Intro to Git Fundamentals

Improve your daily Git usage by learning essential help commands, including tutorials and subcommand instructions for a smoother workflow.

Git Help Options

Learn how to use the git init command to create and initialize new git repositories, and explore the hidden .git directory.

Creating a Git Repository with `git init`

Learn how to use git status command to view repository information, track and commit changes, and understand the importance of the .git directory.

Git Status and the Hidden .git Directory

Learn the basics of working with Git like tracking files, understanding the status, and staging changes for commit.

Git Tracking and Staging Files

Learn how to manage the staging area before creating a commit by utilizing the git reset command to exclude files and changes.

Using `git reset` to Refine Your Staging Area

Learn how to configure Git with your user information so it shows up in your commits.

Setting Up Git Configuration for Commits

Learn how to manage your code with git by committing changes, staging files, and checking the status of your working tree.

Understanding Git Commit, Add, and Status

Discover how to inspect and navigate through git commit history using `git show` and various arguments, such as commit SHA and aliases.

Inspecting Commit History with `git show`

Learn how to efficiently add, reset, and amend git commit messages with a step-by-step exercise on staging and committing changes.

Interactive Git Staging

Learn how to customize the git log output to display concise and relevant commit information. We'll be using different flags and config settings to achieve the perfect git commit overview.

Optimizing Git Log Output for Better Workflow

Learn how to synchronize local and remote repositories on GitHub, along with understanding the usage of git remote, git branch, and git push commands for seamless collaboration.

Syncing Local and Remote Git Repositories with GitHub

Learn how to use Git push to sync your local commits to a remote repository, ensuring your code stays up-to-date across platforms.

Syncing Local Commits with Remote Repository

Learn the importance of syncing your remote commits to your local repository using Git and how to do it by running the git pull command.

Syncing Remote Commits to Local Repository

Learn about the two underlying commands of Git Pull, Git Fetch and Git Merge, and how they are used to update your local and remote branches.

Keeping Branches Updated

Learn how to create, switch, and merge branches in Git, and see how to sync them with your remote repository in GitHub for effective collaboration.

Branch Management and Syncing with Git and GitHub

Take a moment to feel proud of completing this Git course and get ready to explore more tutorials and workshops on Epic web!

Concluding the Git Fundamentals Tutorial

Commands

Git Fundamentals

The goal of this tutorial is to develop a mindset that is universally applicable to any AI tool you use.

Introduction to Developing with AI Assistants

Adding custom instructions to ChatGPT is a great way to personalize its responses.

Custom Instructions in ChatGPT

Conversing with an AI assistant can help you make informed decisions about your technical stack.

Making Technical Decisions with AI

An AI assistant can help you explore unfamiliar topics and guide you in the right direction.

Exploring Unfamiliar Topics with ChatGPT

Install GitHub Copilot

Using AI assistants like GitHub Copilot can be a game-changer when it comes to writing tests for your code.

Writing Tests with GitHub Copilot

Generate realistic test data effortlessly for efficient database seeding with the help of your AI assistant.

Realistic Database Seeding with AI

Prompt AI for fetch request code, address issues, and optimize development tasks seamlessly.

Simplify API Interaction with AI Assistants

Gain insights, explanations, and bug identification with AI assistants, streamlining your understanding in your codebase.

Understanding Code with AI

Quickly grasp and navigate APIs with your AI assistant. Learn to filter errors, such as Chrome extensions in Sentry, with ease. Verify solutions for accuracy.

Navigating APIs Documentation with AI

Paste error messages into AI chat for quick potential causes and troubleshooting steps, expediting the debugging process

AI-Driven Debugging - Deciphering Errors

Describe in English, let AI generate SQL. Simplify database interactions.

AI-Simplified SQL Queries

Automate git commits with AI. Paste your diff, streamline version control.

Simplifying Git Commit Messages

Explore how AI aids in decoding slang, understanding emojis, and strategizing responses, making social media interactions more informed and strategic.

AI Assistants for Social Media Dynamics

Gain insights into the role of AI assistants in web development. Exciting possibilities await as these tools evolve for more efficient and creative projects.

Concluding AI Assistance for Web Developers

Real World Examples

AI Assistants

Recreate an interactive cards UI with Tailwind CSS.

Fluid Hover Cards with Tailwind CSS

Understanding how to employ Flexbox for crafting fluid, horizontally adaptable UIs with reusable elements.

Overview of the Cards Grid

JavaScript's Array methods provide a quick way to create a list of items.

Use a Loop to Quickly Create a List

A step-by-step guide on how to fetch and display images dynamically in a gallery.

DynamicallyAdd Images to the Cards

Positioning and Styling Text in Cards

Adding a background gradient can enhance the readability of text laid over vibrant images.

Enhance Text Readability with a Gradient

By adding some classes to the cards, we can hide and reveal text on hover.

Hide and Reveal Text on Hover

Learn a CSS Grid technique to animate elements from zero to their full height on hover.

Use CSS Grid to Animate Elements with Dynamic Height

Add an interactive hover effect that changes the opacity of text.

Animate Text Opacity

Update the effect so the hovered card expands and the other cards shrink using Flexbox.

Animate A Card's Width on Hover with Flexbox

Setting a fixed width for card text will prevent line break jumps when the card expands and contracts.

Prevent Line Break Jumps with Fixed Widths

This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.

Concluding the Fluid Hover Cards Tutorial

Implementation

Learn how to deploy a Node.js application that persists data to multiple regions.

Intro to Deploy Distributed Apps with Node.js & Fly

Fly.io is the service we'll use for deploying our app. The first step is signing up for an account. 

Signing Up for Fly.io

We will deploy to Fly with Docker. A Dockerfile is used to tell Docker the steps to take to run our app.

Free Web Development Tutorials

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

Learn How to Use The Epic Workshop App

Versioning and Releasing NPM packages with Nx

Tailwind CSS Color Tokens

Git Fundamentals

AI Assistants

Fluid Hover Cards with Tailwind CSS

Deploy Web Applications All Over the World

Learn How to Use The Epic Workshop App

Versioning and Releasing NPM packages with Nx

Tailwind CSS Color Tokens

Git Fundamentals

AI Assistants

Fluid Hover Cards with Tailwind CSS

Deploy Web Applications All Over the World

Join 40,000+ developers in the Epic Web community