Kent C. Dodds

Chantastic

Simon Vrachliotis

Juri Strumpflohner

Learn to handle real-world data using objects, arrays, maps, sets, destructuring, spread, rest, and array methods for cleaner, more reliable code for real teams

Structured Data

Master structured data in TypeScript and JavaScript with hands-on exercises on objects, arrays, and powerful methods to enhance your coding skills.

Intro to Structured Data

Introduction to Structured Data

Master JavaScript objects by organizing data effectively, accessing properties, and leveraging optional properties for cleaner code in this engaging exercise.

Intro to Objects

Master object literals by creating user objects in a hands-on exercise, enhancing your web development skills and understanding of JavaScript syntax.

Object Literals

Master property access in JavaScript objects to enhance your coding skills and manipulate data efficiently. Dive into practical exercises now!

Property Access

Master object types by creating a type definition that enhances your coding skills. Dive in and elevate your development expertise today!

Object Types

Master optional properties in TypeScript by exploring user profiles. Enhance your coding skills and effectively handle dynamic object types.

Optional Properties

Master dynamic keys in JavaScript by creating an error pages object with bracket syntax, overcoming syntactical limitations and enhancing your coding skills.

Dynamic Keys

Master object manipulation in programming and enhance your skills. Break down concepts and solidify your knowledge with engaging exercises and community support

Break Objects

1. Objects

Master arrays in TypeScript! Discover their structure, syntax, and how to ensure type safety while managing data efficiently in your projects.

Intro to Arrays

Master array fundamentals by building an inventory system. Interact with essential data structures and enhance your coding skills today!

Array Basics

Master array types in JavaScript by exploring objects within arrays. Enhance your coding skills and build dynamic applications with this engaging exercise.

Array Types

Master array iteration with hands-on exercises using loops. Enhance your coding skills by exploring array manipulation and discover new possibilities.

Iteration

Master array manipulation in JavaScript and TypeScript to enhance your coding skills, complete fun exercises, and boost your programming confidence.

Break Arrays

2. Arrays

Master JavaScript's rest and spread operators to effortlessly combine arrays and manage object properties, enhancing your coding efficiency and elegance.

Intro to Spread and Rest

Master object spread to seamlessly combine properties in JavaScript, enhance your coding skills, and boost your development efficiency today!

Object Spread

Master rest parameters to create flexible functions that accept any number of arguments, simplifying your JavaScript code and enhancing functionality.

Rest Parameters

Master the art of retention with Break Spread and Rest. Enhance your learning, boost memory, and prepare for your next development challenge!

Break Spread and Rest

3. Spread and Rest

Master JavaScript destructuring to simplify variable assignments, enhance function parameters, and streamline your coding workflow—boost your efficiency today!

Intro to Destructuring

Master object destructuring to simplify your JavaScript code. Transform property access into concise variable assignments with ease and efficiency.

Object Destructuring

Master array destructuring syntax, uncover its differences from object destructuring, and enhance your JavaScript skills with this engaging exercise.

Array Destructuring

Enhance your skills with effective retention strategies and discover how to apply your knowledge to real projects for greater success in web development.

Outro

4. Destructuring

Master essential array methods like map, filter, and reduce to transform data efficiently and unlock powerful JavaScript programming techniques.

Intro to Array Methods

Transform your arrays efficiently with the powerful map method. Discover how to reshape data and enhance your JavaScript skills today!

Master array filtering to streamline data manipulation. Enhance your coding skills by learning to efficiently extract and refine information with ease.

Filter

Master the reduce method by comparing it with for loops and map/filter techniques, enhancing your JavaScript skills and coding efficiency.

Reduce

Master array methods in JavaScript and TypeScript to enhance your coding skills. Gain confidence with practical exercises and engaging insights.

Break Array Methods

5. Array Methods

Master object methods in JavaScript to efficiently manipulate data. Discover keys, values, and entries to transform objects into arrays for powerful coding solu

Intro to .object-methods

Master object keys and values methods to enhance your JavaScript skills, streamline your code, and improve object manipulation efficiency.

Keys Values

Master object entries and from entries in JavaScript to transform arrays effectively. Enhance your coding skills and debug with confidence!

Entries From Entries

Master object methods in JavaScript and enhance your coding skills. Engage with interactive quizzes and retain key concepts effectively.

Break Object Methods

6. Object Methods

Master maps and sets in JavaScript to enhance data efficiency and eliminate duplicates. Unlock powerful data structures for smarter coding!

Intro to Maps and Sets

Master JavaScript maps by efficiently creating data structures to quickly access user information. Boost your coding skills and enhance your development toolkit

Maps

Explore the power of sets in programming, a unique data structure that enhances array management and optimizes data retrieval for faster performance.

Sets

Master the use of maps and sets in web development, enhancing your coding skills and optimizing data handling for your projects.

Break Maps and Sets

7. Maps and Sets

Wrap up your structured data journey with key takeaways, solidify your knowledge, and prepare to build amazing projects. Keep coding and exploring!

Outro to Structured Data

Start from zero with TypeScript and learn expressions, variables, types, logic, and functions to build real programming confidence.

Programming Foundations

Master programming basics with our Introduction to Programming Foundations. Perfect for beginners eager to start coding and build essential skills.

Intro to Introduction To Programming Foundations

Introduction to Programming Foundations

Intro to Expressions And Output

Hello World

Escaping Strings

Strings

Numbers

Template Literals

Discover the art of taking effective breaks to boost productivity and mental clarity. Learn techniques to recharge and enhance focus in your daily routine.

Break

1. Expressions And Output

Intro to Variables

Discover the key differences between let and const in JavaScript. Optimize your code with these essential ES6 variable declarations.

Let And Const

Explore the key differences between reassignment and mutation in programming. Enhance your coding skills with clear insights and practical examples.

Reassignment Vs Mutation

Discover effective strategies to break bad habits and boost productivity. Transform your routine with actionable tips for lasting change.

Break Variables

2. Variables

Discover the basics of primitive types in programming. Understand integers, floats, booleans, and more to enhance your coding skills.

Intro to Primitive Types

Master numbers and strings with this guide. Enhance your coding skills by understanding data types and their applications in programming.

Numbers And Strings

Discover key differences and similarities with our in-depth comparisons. Make informed decisions with clear insights and expert analysis.

Comparisons

Master Booleans and comparisons in programming. Enhance your coding skills with clear examples and practical applications. Perfect for beginners!

Booleans And Comparisons

Explore the differences between null and undefined in JavaScript. Master these concepts to enhance your coding skills and avoid common errors.

Null And Undefined

Explore Bigint and Symbol in JavaScript. Enhance your coding skills with these powerful data types for handling large numbers and unique identifiers.

Bigint And Symbol

Master JavaScript truthy and falsy values with this guide. Enhance coding skills by understanding data types and logical operations.

Truthy Falsy

Break Primitive Types

3. Primitive Types

Master control flow basics in programming. Enhance your coding skills with loops, conditionals, and more. Perfect for beginners!

Intro to Control Flow

Master conditional logic by building a grade calculator that maps numeric scores to letter grades. Sharpen your programming skills today!

Conditionals

Master switch statements in programming. Simplify code logic, enhance readability, and boost efficiency with this essential guide.

Switch Statements

Master loops in programming! Enhance your coding skills with efficient loop techniques. Perfect for beginners and pros seeking to optimize code.

Loops

Master nested loops in programming to enhance your coding skills. Discover efficient techniques and practical examples for optimal performance.

Nested Loops

Master the ternary operator for concise code. Discover its syntax, benefits, and examples to enhance your programming skills efficiently.

Ternary Operator

Discover common errors, their causes, and solutions. Enhance your skills by learning to identify and fix mistakes effectively.

Errors

Break Control Flow

4. Control Flow

Master the basics of functions in programming. Enhance your coding skills with clear examples and practical insights. Perfect for beginners!

Intro to Functions

Function Declaration

Parameters

Type Inference

Arrow Functions

Jsdoc

Break Functions

5. Functions

Intro to Void And Never

Void Functions

Never Type

Break Void and Never

6. Void and Never

Outro To Programming Foundations

Outro Foundations

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.

Free Web Development Tutorials

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

Structured Data

Programming Foundations

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

Structured Data

Programming Foundations

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