Course Outline

Introduction

  • Overview of Alpine JS
  • What are the Alpine JS directives

Getting Started

  • Understanding Alpine JS’ role in modern web design
  • Learning to use Alpine JS and when to use a full-fledge web framework
  • Installing Alpine JS
  • Creating Alpine JS program

Using the AlpineJs

  • Reusing data objects with Alpine.data
  • Declaring a global data store: Alpine.store

Alpine JS Directives

  • Declaring website data: x-data
  • Adding toggles: x-show
  • Custom events and Event Modifiers with x-on
  • Setting dynamic HTML attributes: x-bind
  • Advanced attribute binding with x-bind
  • Binding data to form elements: x-model
  • Setingt the content of elements: x-text and x-HTML

Initialization of Alpine JS Component

  • Running code on element initialization: x-init
  • Responding to dependency changes: x-effect
  • Reference elements by key: x-ref

Troubleshooting

Summary and Next Steps

Requirements

  • Basic understanding of web framework
  • Experience with basic coding for web design
  • JavaScript programming experience

Audience

  • Developers
  14 Hours
 

Testimonials

Related Courses

Building Interactive Applications with React, Redux and GraphQL

  28 hours

Spring Boot, React, and Redux

  14 hours

Managing Vue JS State with Vuex

  7 hours

Managing State in Vue JS, React, and Angular Applications

  21 hours

Introduction to Svelte.js

  14 hours

Svelte

  14 hours

Advanced Svelte JS

  14 hours

Nuxt.js and Vue.js

  14 hours

Gatsby: Beginner to Advanced

  14 hours

Aurelia Javascript Framework

  14 hours

Ensuring Code Quality with ESLint

  14 hours

Electron: Build a Desktop Application with Javascript

  7 hours

Hapi.js

  7 hours

Polymer.js Fundamentals

  14 hours

Polymer LitElement

  14 hours