There are plenty of JavaScript-based frameworks for building single-page web apps. But the common problem with all of them is… JavaScript. We need a better solution: not just a band-aid over JavaScript's ugly parts, but instead a whole new, fresh approach to browser programming. We need Elm.

Elm apps run in the browser, but you don't write them in JavaScript. Elm embraces the good parts of functional programming, but lets you ignore the theoretical underpinnings. Indeed, Elm makes functional, reactive programming not only possible, but practical and even fun!

In this course, you'll learn Elm from the ground up as we incrementally create a single-page, reactive web app. By building a real project with real code from scratch, you'll see how everything fits together. Along the way you'll discover how Elm helps you write reliable code that stays well-factored and easy to maintain even as you scale feature-rich apps.

Evan czaplicki
“Great ramp up from total beginner to building apps and having fun!” — Evan Czaplicki, creator of Elm
Jake trent
“A great, practical introduction to Elm. Straightforward with a great ease-in approach to new concepts.” — Jake Trent
Mike gehard
“Love this Elm tutorial. Time to write front end code again since I don't need to use JS.” — Mike Gehard

Craft Reactive Web Apps, The Elm Way

Elm is a functional programming language that compiles to JavaScript and runs in the browser, designed and developed by Evan Czaplicki. Elm syntax is clean and readable. Refactoring and testing is a breeze. The world-class Elm compiler always generates reliable code, so runtime exceptions are a thing of the past. And Elm can render HTML with blazing speed. But what we love most about Elm is that you can actually build practical stuff with it quickly, which is exactly what we do in this course.

Throughout this course we follow a project-based approach so you learn how to build Elms apps from start to finish. Topics are introduced only when they're required to accomplish a task that advances our app from humble beginnings to a feature-rich app. Each video tackles a new problem while reinforcing previous concepts, so you gain a deeper understanding of both the "how" and the "why". Along the way, you'll learn how to do everything the Elm way, including:

  • Organizing an Elm project
  • Compiling and running Elm programs
  • Using the Elm REPL
  • Navigating the documentation
  • Importing modules: core libraries and community packages
  • Calling functions and using the pipe operator
  • Defining named functions and using anonymous functions
  • Function currying
  • Refactoring and structuring Elm code
  • Generating HTML and CSS with the elm-html library
  • List transformations: mapping, sorting, filtering, and so on
  • Modeling application data with immutable records
  • Creating, accessing, and updating records
  • Describing possible states with union types
  • Pattern matching in case expressions
  • Let expressions
  • Understanding the underlying type system
  • Type aliases and type annotations
  • Reacting to user inputs
  • Two-way binding with input fields
  • Using the start-app package
  • The Elm architecture: the model-update-view pattern
  • Writing idiomatic Elm code

Whether you're simply curious about Elm, ready to start your first Elm project, or want to learn a new way of programming, this course has you covered. By the end of this tutorial, not only will you have a thorough understanding of the Elm language, but you'll also know how to properly architect Elm applications.

“I love that this course was practical. We built a real application... The explanations were very clear and the course flowed from start to finish. I don't think this course could have been better.” — Philip Poots

“Each lesson was short, clear, and moved the needle by building skills step-by-step. Everything was anticipated. Really, really impressive.” — Chris Jones

Learn Elm, The Pragmatic Way

  • 20 Videos

    This course includes 20 videos totaling 2 hours of step-by-step instruction. Each video is a combination of guided instruction, live coding, and animations. All the videos are downloadable, DRM-free, available in full 1280x720 HD resolution, and licensed for individual use only.

  • Example Code

    You also get all the example code so you can follow along with the videos and experiment on your own, including:

    • Instructions for installing Elm and getting your development environment set up
    • A starter project with a handful of prepared files including HTML and CSS files
    • All the Elm code for the single-page HTML app we create in the videos
  • Cheat Sheets

    For handy reference during and after the course, you also get a PDF of cheat sheets that summarize all the Elm syntax, concepts, and idioms taught in this course.

Elm Tutorial

“I really wanted to learn Elm but was intimidated. Now I look forward to building something!” — Steve Freeman

Elm |> Experienced Programmers

This course is designed for experienced developers who want to learn Elm in the context of building a web app.

  • We assume you're already fluent in HTML, CSS, and another programming language.
  • No prior experience with functional programming, Elm, or JavaScript is assumed. As such, this course likely isn't a good fit for staunch Haskell programmers or folks already using Elm in earnest.
Philip poots
“I thoroughly recommend this [series of tutorials] to Elm beginners who have gone through the introductory [Elm documentation] material but are still struggling to piece things together and it works just as well for those who have had no contact with Elm at all, to give you a flavour that tastes so good you will be back for more.” — Read Philip Poots' Full Course Review

About Mike

Mike Clark got curious about Elm in late 2014, spent the holidays toying around with it, and still just can't seem to put it down. Having programmed in many languages over the past 20 years, he found Elm to be a fresh and fun way to learn the good parts of functional programming. His enthusiasm for Elm leads naturally to wanting to teach others. Together with his wife Nicole, they own and run The Pragmatic Studio.

We are grateful for Evan Czaplicki's technical review of this course. Evan is the lead designer and developer of Elm and currently works full time on Elm at NoRedInk.