JavaScript Development Fundamentals for Magento 2 course image

JavaScript Development Fundamentals for Magento 2

Learn the foundations of Magento frontend programming by learning RequireJS & JavaScript components.

18 lessons

1h 4m

The JavaScript layer is one of the most complex and difficult parts of Magento to learn. Grasp the fundamentals of JavaScript in Magento in this course by starting with the basics.

How do you create a JavaScript component? Want to define a server fallback if a CDN fails? What about paths, maps, and mixins - how are they different, and when do you use each?

Mark will walk you through all of these concepts so they are no longer a mystery. At the end of this course, you'll have a solid foundation of the fundamentals of JavaScript in Magento 2.

Breath a sigh of relief

Demystify the complexity of JavaScript in Magento

All skill levels welcome

Beginner, intermediate, and advanced programmers should all be able to pick something up in this JavaScript foundations course. This course is easy to understand for everyone, and the material won't go over your head.

Those new to Magento will learn new things, while those more advanced will pick up edge tricks. You'll also have a complete collection to reference when you are complete.

  • Learn visually

    By watching the instructor program in front of your eyes, you will learn faster than trying to source and read documentation.

  • Full source code with Snippets

    Easily reference the source code with Snippets. Snippets teach topics with blocks of code & inline comments. You can view, copy/paste, & reference every lesson in this course with a Snippet.

Snippet for RequireJS aliases

Focus intensely, master quickly

Topics have been broken down into multiple smaller lessons, that are just the right length and easy to digest.

Walk through the videos at your pace. Once you are ready, follow along and code the demo project side-by-side with the teacher.

  • Don't get lost

    Ever follow along and not sure what just happened? It won't happen here. Each lesson is broken down to teach only one concept.

  • Learn without getting overwhelmed

    Rather than trying to learn multiple topics at once and getting overwhelmed, you will able to fully grasp each core concept before continuing on to more advanced topics.

M.academy links

“The flow of material in this course from lesson to lesson is excellent. It reminded me about specific concepts such as RequireJS path fallbacks that are easy to forget about, and taught me things I didn't even know. Thanks for the great course!”  

Sergii Shymko
Sergii Shymko Sergii Shymko
Co-Founder of Magento 2, Director of Engineering, MCO

Course curriculum

Each video lesson can be played back & referenced as many times as you wish at slow or fast speed, tech-friendly closed captions, and includes full source code.

Includes Spanish translations provided by Google Translate

18 lessons

1h 4m

Last updated July 14, 2021

Included screencasts

Create the initial module
Create the initial module
Disable caches for JavaScript development
Disable caches for JavaScript development
What is RequireJS?
What is RequireJS?
How Magento includes the RequireJS library
How Magento includes the RequireJS library
Create a custom RequireJS config file
Create a custom RequireJS config file
Create a custom AMD JavaScript component
Create a custom AMD JavaScript component
Write JavaScript in PHTML templates using RequireJS
Write JavaScript in PHTML templates using RequireJS
Access other JavaScript components with RequireJS
Access other JavaScript components with RequireJS
Create RequireJS aliases with map and paths
Create RequireJS aliases with map and paths
Add a host to the Content Security Policy XML
Add a host to the Content Security Policy XML
Initialize a JavaScript component with imperative notation
Initialize a JavaScript component with imperative notation
Initialize a JavaScript component with declarative notation
Initialize a JavaScript component with declarative notation
Pass data from PHP to JavaScript components
Pass data from PHP to JavaScript components
Define path fallbacks for loading JavaScript files
Define path fallbacks for loading JavaScript files
Use a RequireJS shim to define JavaScript relationships
Use a RequireJS shim to define JavaScript relationships
Locate a JavaScript component
Locate a JavaScript component
Override JavaScript files or components with map
Override JavaScript files or components with map
Override JavaScript component methods with mixins
Override JavaScript component methods with mixins

Enroll in the course

Start learning Magento 2 today

Choose the best option for you or your team.

One-time payment
$ 129
one-time payment for yourself
  • Lifetime access to this course

  • Free updates for life

  • Full source code

  • 30-day satisfaction guarantee

“Excellent videos! They are fascinating and really handy. With all of the concepts I just learned, it's time to practice more & more. Thanks for your passion for development, and especially Magento.”  

Frequently asked questions

Who is this course meant for?
This course was designed to be consumed by all skill levels. Beginners to Magento's JavaScript layer will learn all of the crazy RequireJS terminology. Intermediate developers will pick up some tips & tricks, while Advanced developers will cement their pre-existing knowledge with awesome reference material.
What do I need to know to take this course?
This course assumes you have basic knowledge of Magento 2, PHP and JavaScript. This means you should be comfortable with creating modules, writing some XML, and know some of the basic design patterns in Magento. If you are not familiar with these concepts, you can check out the Magento 2 Coding Kickstart course, which teaches all of these concepts, and more.
Do I need a development environment setup?
Yes, this course assumes you have a running development environment of Magento setup and running locally. If you don't already have a development environment setup, please set one up before enrolling in the course. M.academy has a free course, Set Up a Magento 2 Development Environment with Docker.
What version of Magento is this based on?
This course was created using concepts featured in Magento version 2.4. If a new best-practice approach is introduced in a future version of Magento 2, the course will be updated appropriately.
Will I receive anything upon course completion?
Upon completion of the course, you'll receive a certificate of completion signed by the course instructor. This demonstrates to potential employees that you have the basic underlying knowledge of Magento fundamentals. If your employer offers continuing education stipends, you may also be able to use this certificate to get the cost reimbursed by your employer.
What if I need a business invoice?
Invoices now contain fields for company name and VAT number. As long as you add your company name at checkout, you will automatically receive a business invoice emailed to you after purchase.