Learn 11ty, Alpine and Dart

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve. 

In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework. 

This course is beginner-friendly, but is well-suited for experience programmers as well. 

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

dart

Get Started with Dart

Eleventy, or 11ty,  is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

```
npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy
```

After watching this collection you will be able to:

* Bootstrap a simple 11ty website
* Use 11ty layouts
* Chaining multiple 11ty layouts
* Use 11ty Collections
* Create pages from data

...and much more

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Getting Started with Eleventy

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Build An Eleventy (11ty) Site From Scratch

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

In this lesson, we will cover Interfaces and Mixins. Interfaces act as a contract containing properties and methods that a class must define once it “implements” this interface. Mixins are Dart’s way of sharing properties and methods from multiple classes, since by design Dart adopts a single-inheritance model.

Define Interfaces and Share Class Members through Mixins in Dart

Futures represent a computation that does not complete immediately. Where a normal function returns a result, an asynchronous function returns a Future that will eventually contain the result. These are similar to Promises in JavaScript. In this lesson, we will learn how to program asynchronously by writing logic to capture values that are returned at a later time.

Capture and Return Asynchronous Values with Futures in Dart

Streams represent a sequence of asynchronous events. Each event is either a data event, also called an element of the stream, or an error event, which is a notification that something has failed. When a stream has emitted all its events, a single "done" event will notify the listener that the end has been reached. In this lesson, we will learn how we can capture and handle streaming data, working with various Stream classes.

Capture and Handle Data Sequences with Streams in Dart

In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

Style a Flutter Text and Container Widget

In this lesson we’ll learn how Navigation in Flutter works by navigating to a new page when clicking on a button using the push & pop methods. We'll also look at how to pass properties to a new screen dynamically.

Getting Started with Navigation in Flutter

In this lesson we’ll learn how to create an Android emulator in Android Studio & run a Flutter project on an Android Emulator.

Run a Flutter App on Android

When creating a new Flutter application, you are given a simple templated Flutter project whose primary code lives in the main.dart file. In this lesson, we walk through this file & talk about what the boilerplate code is doing.

Walkthrough of the Default Flutter Application Boilerplate

In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

Using Themes in Flutter to Share Colors and Font Styles

In this lesson we’ll learn how to render both local & network images in a Flutter application using the Image class.


Load an Image in a Flutter App with the Image Class

In this lesson we’ll learn about the main layout widgets you'll need when building your user interface in Flutter. We’ll take a look at Container, Center, Row, Column, Stack, & GridView widgets learn how they work.

Building Layouts in Flutter with Layout Widgets

In this lesson we’ll learn how to import widgets we’ve created in other files & use them in our project. We'll also look at how to create dynamic properties in our widgets in order to make them reusable across our application.

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

In this lesson we’ll learn how to create & update state in a Flutter application.

Creating & Updating State in a Flutter Application

In this lesson, we'll learn how to specify a configuration object containing all of the routes for our application & navigate between them in a Flutter application.

Navigation with Named Routes in Flutter

ListView is the most commonly used scrolling widget in a Flutter application. In this video, we'll learn how to create dynamic lists using Flutter's ListView widget to render both lists of Strings & lists of Maps

Building Dynamic Lists in Flutter with ListViews

In this lesson we’ll learn how to fetch & then display data from an API over the network in a Flutter application using the http package.

Fetching & Displaying Data from an API in Flutter using the http Package

Pub is a package management tool that makes it easy for you to install, use, share Dart libraries, command-line tools and other assets. It comes as part of the Dart SDK, and requires a dependency file called pubspec.yaml.

Manage Package Dependencies with Pub

We will learn how to work with Strings using a variety of methods made available in the **dart:core** library. We will explore the top methods for working with String values.

Learn more about Strings at https://api.dartlang.org/stable/2.2.0/dart-core/String-class.html

Topics

Instructors

Content Type

Free or Pro