Course Outline


  • 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
  • Declaring a global data 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


Summary and Next Steps


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


  • Developers
 14 Hours

Testimonials (5)