Elm: Building Reactive Web Apps
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.
“Great ramp up from total beginner to building apps and having fun!” — Evan Czaplicki, creator of Elm
“A great, practical introduction to Elm. Straightforward with a great ease-in approach to new concepts.” — Jake Trent
“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
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
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.
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
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.
“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.
“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
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.