Learn Elm, Flexbox and Reactfire

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

`elm-ui` is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.

The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!

The approach taken by `elm-ui` is based on two big ideas: 
Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code
Enabling refactoring capabilities of Elm for UI code


Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Start Using Elm to Build Web Applications

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Flexbox Fundamentals

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

Functions in Elm

Getting Elm installed. We will install the Elm CLI with npm. This gives us access to `elm-repl` and `elm-reactor`. The repl lets us play with expressions at the command-line, and reactor starts a development server which builds Elm files on-demand.

Install the Elm Platform command-line tools

This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.


Output text in a browser using the text function in Elm

A record is a set of key-value pairs, similar to objects in Javascript. Record fields can be accessed through dot-notation, or special access functions. Records are fully type-checked and can be described by type aliases.

Store key-value pairs using Records in Elm

Functions are one of the core building blocks of Elm. In this lesson we learn how to define, call, pass parameters, receive parameters, partially apply functions, compose functions, and add correct type signatures. In this lesson we will show how to define functions with type signatures.

Write functions and Type Signatures in Elm

Elm provides a declarative way to produce DOM elements and react to DOM events, similar to HTML. Learn how to get Web content on the screen by writing functions that take in data and return Elm’s version of HTML.

Render HTML in the browser using the Html module in Elm

Sometimes a function is useful for many different types. Instead of writing a copy of that function for each different type, learn to use type variables and allow the same function to be reused.

Reuse Functions Through Type Variables in Elm

Elm is designed specifically for building applications, and it is built around a scalable and sensible application architecture. Learn the very basics of this architecture through updating application state by reacting to DOM events.

Create Apps Using the Elm Application Architecture

Elm comes with an index of publicly-usable open-source packages. Using packages from this index can substantially improve a developer’s experience. Learn how to find a package through the index, understand its API through type annotations and documentation, download it, and use it in a project.

Elm packages aren't working with embedded **Ellie**, so I've provided you with a link to the Ellie example [here](https://ellie-app.com/nNVB6RrbZa1/9). 

Discover New Packages Using the Elm Package Index

Demystifying alignment in flexbox children

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

Elm includes a data type called `Maybe` which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.

Using "Maybe" in Elm for values that may or may not exist

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Defining dimensions on flexbox children using flex-basis

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

Lists are used in Elm to represent sequences of data. The List library comes with a toolbox of useful functions. Here we cover list transformation (map), and getting single values from lists (fold).


Topics

Instructors

Content Type

Free or Pro