Elm - The Complete Guide (a web development video tutorial)

Next step on learning Elm, now with a local installation

Installing Elm 0.19.1 using Ubuntu Linux 20.04

Installing Elm 0.19.1 using Windows 10

Installing Elm 0.19.1 using macOs Big Sur

Create a new Elm project at your local computer

Use the Elm project inside an HTML div

Upgrade our Elm code to a package using NPM

Create our first project as an Elm project with package support

Add a surprise Happy Birthday message using buttons

Activate auto compiling and debugging to our Elm projects

Adding a text field for the firstname of our Happy Birthday message

Refactoring our code to make it better

Adding age and firstname length to the Happy Birthday project

Using firstname and age as optional values

Refactoring the view HTML code

Install Elm UI to our new project

Adding basic colors

Adding an image with Elm UI

Using our own custom typography

Adding random sample text

Using a color tool to make our dog look nicer

Learn how to add dark and light colors

Paying tech debt and improving our code

Organizing our code external modules usage

Adding headings and more regions to improve SEO and Accessibility

Preparing our first JSON project with Elm

Modeling the JSON data we want to receive

Adding the model view update code for receive JSON data

Loading our first JSON data with Elm code

Showing the detail reason of possible JSON request errors

Using the result to control the data flow

Better JSON HTTP data flow using RemoteData

We are going to create a book shop search page

Create our books Elm project starting code

Adding the initial Elm UI layout

Adding the search text field and the search button

Search books using Books API HTTP JSON calls

Parse JSON data as Book records

Display possible errors when making HTTP API JSON calls

Painting the book covers

Make the book covers clickable

Using SVG witn Elm Svg to add a loading image

Using let blocks to show the loading image

Detect when the user press the enter key to start the search

Make the books results look like cards for better look and feel

Displaying the results on cascading cards per rows

Improving the accessibility of our web site

Create our first Browser document application to control the full web page

Add a button to increase the counter and update the browser window title

Receiving data from the browser using flags

Send signals and data to the browser using ports

Getting started drawing statistical data using Elm Charts

Customize our fruits data chart

Create our first test using Elm

Run our newly created tests

Creating more property based tests using Elm

Checking our code automatically with Elm Review

Learn about more possible types of tests