The
JavaScript
Workshop

Built by a team of experts to help you unlock your next promotion, reboot your career, or kick off your latest side project.

Get Started Today

You'll be up and running with JavaScript in no time at all.

  • Free

    FreeThe JavaScript Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Engineered for Success

Nobody likes going through hundreds of pages of dry theory, or struggling with uninteresting examples that don’t compile. We've got you covered. Any time, any device.

  • Learn by doing real-world development, supported by detailed step-by-step examples, screencasts and knowledge checks.

  • Become a verified practitioner, building your credentials by completing exercises, activities and assessment checks.

  • Manage your learning based on your personal schedule, with content structured to easily let you pause and progress at will.

Learn By Doing

You already know you want to learn JavaScript, and a smarter way to learn JavaScript is to learn by doing.

The JavaScript Workshop focuses on building up your practical skills so that you can develop for web, mobile and desktop users. Alongside knowledge of HTML and CSS, JavaScript is a key skill for those looking to enter professional web development.

On Your Terms

Build up and reinforce key skills in a way that feels rewarding.

You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about third-party libraries. It's your choice.

An Ideal Start

The JavaScript Workshop is the ideal companion for JavaScript beginners.

You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

Begin Your Journey

A simple, straightforward and pain-free way to learn JavaScript.

  • Free

    FreeThe JavaScript Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Everything You Need

Every Workshop includes access to dedicated support, course discussions and a wider learning community. Ask questions, share answers and work with the community to expand your learning.

  • Engage and participate in live user discussions, baked right into your course from start to finish. Share, learn and grow together.

  • Get live updates and interact directly with the product development, editorial and authoring teams across the Packt network.

  • Create, showcase and share your own learning outcomes and motivational stories across the entire workshop community.

Get Build-Ready

Every Workshop includes a whole host of features that work together to help you get the job done. You’ll be ready to tackle real-world development in no time.
  • Hack Your Brain

    We've applied the latest pedagogical techniques to deliver a truly multimodal experience. It'll keep you engaged and make the learning stick. It's science!

  • Build Real Things

    Nobody likes wasting their time. We cut right to the action and get you building real skills that real, working developers value. The perfect approach for a career move.

  • Learn From Experts

    We've paired technical experts with top editorial talent. They've worked hard to deliver you the maximum impact for each minute you spend learning. It's our secret sauce.

  • Verify Your Credentials

    You can become a verified practitioner. Complete the course to get a certificate. It's perfect for sharing on social media. Hello LinkedIn!

  • Receive Free Updates

    Technology keeps changing, and so do we. We keep versions updated independently, so you'll always have access. No more worrying about third-party release cycles.

  • Access Anywhere

    All you need is an internet connection. We've built every course so that it works on desktop and mobile, giving you options that fit within your schedule.

What's Inside

From A to Z, we've got you covered!

  • Workshop Onboarding

    • Welcome to The JavaScript Workshop
    • Installation and Setup
    • Credits
  • 1. Getting to Know JavaScript

    • Overview
    • Exercise 1.01: Languages Discovery
    • A Brief History of the JavaScript Language
    • Versions of ECMAScript (and JavaScript)
    • Exercise 1.02: Can I Use This Feature?
    • Accessing Web Browser Developer Tools
    • Exercise 1.03: Programming First Steps
    • Activity 1.01: Creating an Alert Box Popup in the Web Browser
    • Overview of JavaScript Capabilities
    • Summary
  • 2. Working with JavaScript

    • Overview
    • Integrated Development Environments (IDE)
    • Exercise 2.01: Creating a Working Project Directory
    • Exercise 2.02: Creating Project Boilerplate
    • Basic JavaScript Syntax
    • Exercise 2.03: Verifying an Execution Order
    • Overview of JavaScript Environments
    • A Closer Look at Web Browser Developer Tools
    • HTML Element Manipulation with JavaScript
    • Activity 2.01: Adding and Modifying an Item to/in the To-Do List
    • Summary
  • 3. Programming Fundamentals

    • Overview
    • Data Types
    • Exercise 3.01: Implementing Expressions and Operators
    • Using Variables and Constants in Expressions
    • Exercise 3.02: Working with Variables Using the Web Browser Console
    • Functions that Return Values
    • Exercise 3.03: Using Functions in Expressions
    • The Object Data Type
    • Exercise 3.04: Working with Ready-Made Objects
    • Self-Made Objects
    • Syntax
    • Conditional and Loop Flow
    • Exercise 3.05: Writing an if statement
    • Exercise 3.06: Writing an if...else Statement
    • if Statements with Multiple else if Statements
    • Exercise 3.07: Writing an if Statement with Multiple if else Statements and the else Statement
    • Exercise 3.08: Writing a switch Statement and Testing it
    • Exercise 3.09: Writing a for Loop and Testing it
    • Exercise 3.10: Writing a do...while Loop and Testing it
    • Exercise 3.11: Writing a while Loop and Testing it
    • Exercise 3.12: Writing a for...in Loop and Testing it
    • Exercise 3.13: Writing a for...of Loop and Testing it
    • continue Statement
    • Writing and Invoking Functions
    • Exercise 3.14: Writing a Function as a Statement and Invoking It
    • Exercise 3.15: Writing a Function as an Expression and Invoking It
    • Exercise 3.16: Writing an Arrow Function and Invoking It
    • Reacting to User Input Events and Updating the DOM
    • Exercise 3.17: Working with DOM Manipulation and Events
    • Debugging
    • Logic Bugs
    • Activity 3.01: The To-Do List Shuffle Program
    • Summary
    • Survey 1
  • 4. JavaScript Libraries and Frameworks

    • Overview
    • Framework Versus Library
    • Exercise 4.01: Using a Third-Party Library in Your Code
    • jQuery Versus Vanilla.js
    • Exercise 4.02: Handling Click Events with jQuery
    • Exercise 4.03: Handling the Same Event with Vanilla.js
    • Exercise 4.04: Animating a "Peek-a-boo" on Button Click
    • Exercise 4.05 : Rendering a List of To-Dos Using React
    • Exercise 4.06: Rendering a List of To-dos without a Library
    • Exercise 4.07: Creating a Library Yourself
    • Activity 4.01: Adding an Animation to the To-Do List Application
    • Summary
  • 5. Beyond the Fundamentals

    • Overview
    • Creating Variables
    • Exercise 5.01: Variables and Scope
    • Exercise 5.02: Evaluating Types from Variables
    • Fixed Types
    • Boolean Operators
    • Exercise 5.03: Odds and Evens
    • Testing the Truth of Values
    • Exercise 5.04: Free Home Delivery Eligibility Validation
    • Why You Shouldn't Compare Boolean and Non-Boolean Expressions
    • Working with Numbers
    • Exercise 5.05: Currency Formatter
    • Working with Strings
    • Exercise 5.06: Email Templates
    • The String Object
    • Exercise 5.07: Sentence Reversal
    • The toString Method
    • Working with Functions
    • Exercise 5.08: Functional Parameters
    • Arrow Functions
    • Exercise 5.09: Dynamic Currying
    • Activity 5.01: Simple Number Comparison
    • Working with Objects
    • Exercise 5.10: Converting Objects to toString
    • Working with Arrays
    • Working with Dates
    • Activity 5.02: Creating a To-Do Model
    • Summary
  • 6: Understanding Core Concepts

    • Overview
    • Event Types
    • Exercise 6.01: Custom Timer
    • Event Timers
    • Exercise 6.02: Real-Time Clock
    • The JavaScript Events Model
    • Exercise 6.03: Tabbed Content
    • Bubbling versus Capturing
    • Exercise 6.04: Conditional Event Prevention
    • Event Triggers
    • Working with Forms
    • Exercise 6.05: Simple Form Handling
    • Form Controls
    • Activity 6.01: Making Changes to the Model
    • Summary
  • 7. Popping the Hood

    • Overview
    • JavaScript Execution and the Event Loop
    • Exercise 7.01: Working with the event Loop
    • Stack Overflow
    • Exercise 7.02: Stack Overflow
    • Memory Management
    • Exercise 7.03: Identifying Memory Leaks
    • Exercise 7.04: Fixing the Memory Leak
    • Activity 7.01: Finding Out the Number of Stack Frames
    • Summary
  • 8. Browser APIs

    • Overview
    • Exercise 8.01: Drawing Shapes Using Canvas Elements
    • Manipulate Shapes Using Path
    • Activity 8.01: Creating a Simple Fractal
    • Exercise 8.02: Creating an Oscillator Waveform
    • Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators
    • Audio Visualization
    • Exercise 8.03: Storing and Populating Name Using the localStorage API
    • IndexedDB
    • Exercise 8.04: Creating an Object Store and Adding Data
    • Exercise 8.05: Querying the Database
    • IndexedDB Cursor
    • Exercise 8.06: Fetching, Storing, and Querying Data
    • Performance API
    • Exercise 8.07: Assessing Performance
    • Web Socket API
    • Exercise 8.08: Creating Chat Rooms Using Websockets
    • Activity 8.03: Audio Visualization
    • Summary
    • Survey 2
  • 9: Working with Node.js

    • Overview
    • The Node.js Environment
    • Exercise 9.01: Your First Program!
    • How to Import/Require a Module in a Node.js Application
    • Node Modules
    • Exercise 9.02: Updating URL Information Using the URL Module
    • Exercise 9.03: Fetching Details about the Operating System
    • Path Module
    • Exercise 9.04: How to Extract and Join Directories
    • HTTP
    • Exercise 9.05: Using a Node.js Server
    • Third-Party Modules
    • Working with Databases
    • Exercise 9.06: Installing, Connecting, and Processing Responses with a MySQL Server
    • Exercise 9.07: Installing and Configuring a Connection in MongoDB
    • Making Real-Time Web Apps
    • Exercise 9.08: Building a Chat Application
    • Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details
    • Summary
  • 10: Accessing External Resources

    • Overview
    • JSON
    • Exercise 10.01: Using a REST API to Make Calls
    • HTTP Headers
    • Exercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a Service
    • Exercise 10.03: More AJAX and Some CSS Styling
    • CSS
    • Activity 10.01: Implement REST Service Calls Using Various Techniques
    • Summary
  • 11. Creating Clean and Maintainable Code

    • Overview
    • What is a Regex?
    • Regexes in Detail
    • Exercise 11.01: The Effect of the g Flag
    • Other String Methods for Regexes
    • Exercise 11.02: Modifying Regex to Match a Pattern
    • Adding More Strings to the Regex
    • Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats
    • Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format
    • Useful Regexes
    • Best Practices for Clean Coding
    • Exercise 11.03: JSLint
    • Activity 11.03: Refactoring to Clean Code
    • Summary
  • 12. Using Next-Generation JavaScript

    • Overview
    • Browser Differences
    • Package Managers
    • Exercise 12.01: A Basic Babel Project
    • Babel Applications with Parcel
    • Exercise 12.02: A Basic Parcel Project
    • Babel Applications with webpack
    • Exercise 12.03: A Basic webPack Project
    • Other Popular Bundlers
    • Exercise 12.04: A Basic TypeScript Project
    • Elm and ClojureScript
    • Code Support Libraries
    • Popular Frameworks
    • Server-Side Libraries
    • Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files
    • Summary
  • 13. JavaScript Programming Paradigms

    • Overview
    • Exercise 13.01: Implementing Procedural Programming
    • Exercise 13.02: Implementing OOP
    • Exercise 13.03: Inheritance Implementation Using the extends Keyword
    • Exercise 13.04: Prototypical Inheritance Implementation
    • Anonymous Functions
    • Data Scope
    • JavaScript Memory Management
    • Activity 13.01: Creating a Calculator App
    • Summary
  • 14. Understanding Functional Programming

    • Overview
    • Pure Functions
    • Exercise 14.01: Immutable Values and Objects – Strings
    • Exercise 14.02: Immutable Values and Objects – Numbers
    • Exercise 14.03: Mutability – Arrays
    • Exercise 14.04: Mutability – Objects
    • Cloning Objects and Arrays
    • Higher-Order Functions
    • Exercise 14.05: Another Way of Using Array.prototype.map
    • Exercise 14.06: Grouping with Array.prototype.reduce
    • Composition with compose() and pipe()
    • Exercise 14.07: More Uses for Composition and Curried Functions
    • Exercise 14.08: Creating a Deck of Cards Using reduce
    • Exercise 14.09: Using the pipe Method to Create a Card Shuffling Function
    • Blackjack
    • Activity 14.01: Blackjack Card Functions
    • Managing Blackjack Game State
    • Summary
    • Survey 3
  • 15. Asynchronous Tasks

    • Overview
    • Exercise 15.01: Asynchronous Execution with setTimeout()
    • Callback Hell and the Pyramid of Doom
    • Exercise 15.02: Refactoring the Honors List to Use the Fetch API
    • An Improvement for Better Performance
    • Exercise 15.03: Creating a Utility Function to Delay Execution
    • Further Refinements to addDelay()
    • Activity 15.01: Refactoring Promise Code to await/async Syntax
    • Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters
    • Summary
  • Bonus Chapter 1: Stepping into the Future

    • Overview
    • Machine Learning
    • What is TensorFlow.js?
    • Exercise 16.01: Creating an Image Classification App Using TensorFlow
    • The KNN Algorithm
    • Exercise 16.02: Creating a Webcam Image Classification App Using TensorFlow
    • Exercise 16.03: Model Training in the Browser
    • Exercise 16.04: Preparing the Data
    • Exercise 16.05: Training the Model
    • Exercise 16.06: Using the Model for Prediction
    • Activity 16.01: Using TensorFlow.js and COCO-SSD Object Detection to Create an App
    • Summary
  • Bonus Chapter 2: Testing Your Code

    • Overview
    • Why is Testing Important?
    • Exercise 17.01: Simple Unit Test
    • Higher-Kinded Types
    • Exercise 17.02: Setting Up Tests Using Babel
    • Writing Tests
    • Exercise 17.03: Populating the Tests
    • Exercise 17.04: Building Functor Functionality
    • Exercise 17.05: Resolving Errors from Unit Tests
    • Activity 17.01: Test-Driven Development
    • Jest expect Methods
    • Exercise 17.06: Extending Jest with Functor Matchers
    • Mocking Tests
    • Activity 17.02: Sentence Parsing Test Suite
    • Summary
  • Activity Solutions

    • Activity 1.01: Creating an Alert Box Popup in the Web Browser
    • Activity 2.01: Adding and Modifying an Item to/in the To-Do List
    • Activity 3.01: The To-Do List Shuffle Program
    • Activity 4.01: Adding an Animation to the To-do List Application
    • Activity 5.01: Simple Number Comparison
    • Activity 5.02: Creating a To-Do Model
    • Activity 6.01: Making Changes to the Model
    • Activity 7.01: Finding out the Number of Stack Frames
    • Activity 8.01: Creating a Simple Fractal
    • Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators
    • Activity 8.03: Audio Visualization
    • Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details
    • Activity 10.01: Implement REST Service Calls Using Various Techniques
    • Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats
    • Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format
    • Activity 11.03: Refactoring to Clean Code
    • Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files
    • Activity 13.01: Creating a Calculator App
    • Activity 14.01: Blackjack Card Functions
    • Activity 15.01: Refactoring Promise Code to await/async Syntax
    • Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters
    • Activity 16.01: Using TensorFlow.js and COCO-SSD Object Detection to Create an App
    • Activity 17.01: Test-Driven Development
    • Activity 17.02: Sentence Parsing Test Suite

Get Verified

Complete The JavaScript Workshop to unlock your certificate.

You can unlock the certificate by completing the course. The credentials are easy to share, and are ideal for displaying on your LinkedIn profile.
A copy of a certificate for The JavaScript Workshop

Take A Step Forward

There has never been a better time to start learning JavaScript.

  • Free

    FreeThe JavaScript Workshop

    Unlock one year of full, unlimited access and get started right away!
    Learn for Free

Already Know
JavaScript?

Don't worry, we've got your back with other languages and frameworks too!

Show me my options!