Yireo - Developer training

Open main menu

Magento 2 Frontending

A quick-paced but thorough coverage of Magento 2 frontend development

A quick-paced but thorough coverage of Magento 2 frontend development

Magento 2 theming allows for a lot of flexibility. However, this requires you to understand various concepts like theme inheritance, XML layout and Block programming. With our training, you will get all the information you need to customize and extend your own theme.

Jisse Reitsma

Your teacher will be Jisse Reitsma

This training will be held with Jisse Reitsma as your guide. Jisse is the founder of Yireo, three times Magento Master, member of ExtDN, trainer and author. Jisse has been in the Magento ecosystem since the beginning (v0.99) and has created numerous Magento extensions. He also has been pushing better coding practices, like CI/CD, clean coding, coding standards and testing.

Pick the learning method that fits you best

Because everyone has different needs


On Demand

  • Full access to this course with 104 lessons with 11+ hours of video
  • Student notes (345+ pages)
  • Learn at your own pace
for 1 year
per individual


  • On-Demand package of this course
  • Teacher support via email & slack
  • Prioritized requests for new lessons
  • Get the personalized help that you need
for 1 year
per individual


  • On-Demand package of this course
  • Economical for groups of 5 and more
  • Freely debate company-specific topics
  • Online or on-site at your company

Custom price

per training day
per agency

There are no scheduled live trainings available

At this moment, there are no trainings scheduled in our agenda. However, we are always busy with planning more, so make sure to check out our online agenda. Alternatively, checkout our on-demand content or feel free to contact us for a custom in-company training.

Current video lessons in one single view

We are constantly updating our courseware, but the following is a real-life snapshot

Introduction to Magento 2 frontend developmentfree09m 34s
Development toolsfree12m 34s
Development performancefree17m 28s
Deployment modesfree24m 04s
Static Content Deployment   16m 35s
Setting the DocumentRoot in the Apache webserverfree07m 06s
Troubleshooting theming files   n/a
Relevant database tables   n/a
Theme locationfree03m 40s
Creating a themefree08m 11s
Parent themesfree10m 19s
Theme inheritancefree23m 11s
Theme structure   02m 19s
Theme vs modulefree06m 48s
view.xml file   n/a
Introduction to PHTML templates   04m 33s
Using the MageSpecialist DevToolsfree08m 54s
Using mage2tv/cache-cleanfree04m 29s
Overriding a PHTML templatefree11m 08s
Creating a new template   13m 03s
PHTML vs HTML templates   05m 44s
Debugging PHTML templates   06m 07s
Understanding the root template   n/a
Escaping values in templates   n/a
XML layout concepts   07m 24s
Comparison with Magento 1   04m 19s
XML layout essentials   17m 31s
Review of homepage demofree08m 58s
Handles and handle types   21m 58s
Understanding page layouts   25m 08s
Adding labels to containers   15m 42s
Using containers   14m 48s
Adding a new page layout   n/a
The head section in the layout   10m 25s
Blocks in the layout   14m 09s
Selectable layout updates   n/a
Block and container aliases   n/a
Layout updates   19m 17s
Moving elements   07m 56s
Removing elements   02m 55s
Rendering child elements in blocks   19m 17s
Reordering elements   08m 57s
Using block templates   14m 16s
Using the `customer_account` update handle   n/a
Block arguments in the XML layout   20m 02s
Adding Google fonts   n/a
Common XML layout modifications   n/a
Understanding root.phtml   n/a
Overriding layout   04m 38s
Overriding the logo   21m 02s
Text blocks   05m 48s
Troubleshooting layout issues   n/a
Setting up Store Views for translationfree09m 48s
Translating content   17m 20s
Translating system stringsfree09m 16s
Using inline translations   n/a
Creating a custom language pack   n/a
How JavaScript translations work   20m 10s
Module essentials   n/a
Creating a Block   n/a
Using ViewModelsfree15m 42s
ViewModels vs Blocksfree07m 48s
Extending `AbstractBlock`   01m 50s
Dependency Injection into a Block class   n/a
Working with CMS Blocksfree13m 55s
Example: Show products that are on sale   n/a
Assigning variables   n/a
Example: Adding a product to the footer   n/a
Why declare strict types?   n/a
Why block setters are deprecated   n/a
Adding ViewModels to the Product Detail Page   n/a
Adding ViewModels to widgets   n/a
Extending the navigation   n/a
Working with child blocks   n/a
Customizing email templates   16m 00s
Adding a block to an email templatefree04m 15s
Using Yireo EmailTester   03m 09s
CSS strategiesfree05m 54s
How CSS is added via the XML layoutfree05m 47s
Magento its LESS strategy   n/a
LESS basics   04m 25s
To copy Fotorama into a LESS file   09m 25s
Removing calendar.css and othersfree04m 04s
One single CSS or separate CSS files?   04m 31s
Understanding the @magento_import directive   15m 50s
Example module with some LESS   09m 57s
LESS compilers   09m 59s
Debugging var/view_preprocessed/   06m 28s
Including critical CSS   n/a
CSS responsiveness - the Magento wayfree15m 41s
Best practices for overriding LESS files   09m 31s
Using SASS instead of LESS   n/a
SASS basics   n/a
Grunt vs Gulp   n/a
Using Grunt for LESS compilation   16m 28s
Grunt tips   n/a
Frontools Gulp usage   n/a
Using subodha his Gulp   05m 03s
bobmotor Gulp usage   n/a
Why is the LESS compilation slow?   n/a
General performance tips   n/a
JS bundling   n/a
Caching blocks   07m 12s
Caching of navigation block   n/a

These videos are available as an On-Demand video training (with notes). See the pricing for details.

Get ready for certification with our Yireo course

This training prepares you for undertaking the following Adobe certifications:

  • Adobe Certified Expert - Adobe Commerce Front-End Developer (AD0-E710)
  • Adobe Certified Professional - Adobe Commerce Developer (AD0-E711)

Note that more courses might be needed besides this training. For an overview, see our certification page

These are the options we give you:

Prepare for certification

Our Magento 2 (so Adobe Commerce) trainings are not part of the official Adobe ALS program. However, Yireo is known for providing training with high quality. Many Magento developers have reached official certification, thanks to Yireo. Additionally, we can supply our own Yireo Training Certificates.

At your place or ours?

Everyone learns at her/his own pace. We provide both in-house training and public training throughout Europe - whatever suits your team best. When 3 or more developers are attending, a custom training is often more economical. Contact us for more details.

You'll get courseware

Every workshop is accompanied with official Yireo coursematerial. Attendees are sent a digital version of this material after the training. It contains slides, comments and references. Additionally, our GitHub repos contain numerous more code samples.

Online classrooms

Online trainings are also our training: Via Zoom or Google Hangout sessions, our teacher is able to connect with your team. The benefit here is that the team is able to connect from various places itself as well, timeframes are more flexible. Afterwards, a video recording will be shared with all attendees for reference.

On-demand self-paced training

This training is also available as an On-Demand training: Via numerous video lessons, including accompanying student notes (equalling a book on their own), you'll learn about the topics in your own pace. And when you bump into questions, you can fall back to the teachers guidance.

This training is part of the following series

so that we'll be able to guide you all the way, step by step

Why Yireo?

  • Professional trainings at affordable prices
  • Highly involved in the Magento community
  • Passionate, enthousiastic, knowledgable

We have trained 1400+ Magento developers since 2009

Training topics

  • Introduction to Magento 2 frontend development
  • Development tools
  • Development performance
  • Deployment modes
  • Static Content Deployment
  • Setting the DocumentRoot in the Apache webserver
  • Troubleshooting theming files
  • Relevant database tables
  • Theme location
  • Creating a theme
  • Parent themes
  • Theme inheritance
  • Theme structure
  • Theme vs module
  • view.xml file
  • Introduction to PHTML templates
  • Using the MageSpecialist DevTools
  • Using mage2tv/cache-clean
  • Overriding a PHTML template
  • Creating a new template
  • PHTML vs HTML templates
  • Debugging PHTML templates
  • Understanding the root template
  • Escaping values in templates
  • XML layout concepts
  • Comparison with Magento 1
  • XML layout essentials
  • Review of homepage demo
  • Handles and handle types
  • Understanding page layouts
  • Adding labels to containers
  • Using containers
  • Adding a new page layout
  • The head section in the layout
  • Blocks in the layout
  • Selectable layout updates
  • Block and container aliases
  • Layout updates
  • Moving elements
  • Removing elements
  • Rendering child elements in blocks
  • Reordering elements
  • Using block templates
  • Using the `customer_account` update handle
  • Block arguments in the XML layout
  • Adding Google fonts
  • Common XML layout modifications
  • Understanding root.phtml
  • Overriding layout
  • Overriding the logo
  • Text blocks
  • Troubleshooting layout issues
  • Setting up Store Views for translation
  • Translating content
  • Translating system strings
  • Using inline translations
  • Creating a custom language pack
  • How JavaScript translations work
  • Module essentials
  • Creating a Block
  • Using ViewModels
  • ViewModels vs Blocks
  • Extending `AbstractBlock`
  • Dependency Injection into a Block class
  • Working with CMS Blocks
  • Example: Show products that are on sale
  • Assigning variables
  • Example: Adding a product to the footer
  • Why declare strict types?
  • Why block setters are deprecated
  • Adding ViewModels to the Product Detail Page
  • Adding ViewModels to widgets
  • Extending the navigation
  • Working with child blocks
  • Customizing email templates
  • Adding a block to an email template
  • Using Yireo EmailTester
  • CSS strategies
  • How CSS is added via the XML layout
  • Magento its LESS strategy
  • LESS basics
  • To copy Fotorama into a LESS file
  • Removing calendar.css and others
  • One single CSS or separate CSS files?
  • Understanding the @magento_import directive
  • Example module with some LESS
  • LESS compilers
  • Debugging var/view_preprocessed/
  • Including critical CSS
  • CSS responsiveness - the Magento way
  • Best practices for overriding LESS files
  • Using SASS instead of LESS
  • SASS basics
  • Grunt vs Gulp
  • Using Grunt for LESS compilation
  • Grunt tips
  • Frontools Gulp usage
  • Using subodha his Gulp
  • bobmotor Gulp usage
  • Why is the LESS compilation slow?
  • General performance tips
  • JS bundling
  • Caching blocks
  • Caching of navigation block


Technical merchants
Frontend developers


Experience with Magento 2 Admin Panel
An installation of Magento 2 running locally
Basic knowledge of object-oriented PHP and XML
Skilled in HTML and CSS

Frequently Asked Questions

There is a minimum number of attendees listed. What does this mean?

The training is only held when there is a number of attendees. This number is usually 4 but sometimes we bring this down to 2 or 3. This minimum number simply means that if a class is not "full", either you get a refund or your ticket is transferred to another date.

Jisse Reitsma

The teacher: Jisse Reitsma

Thus it came to be

When Jisse started with Magento, he already had years of experience programming in Joomla (back in the days when Joomla was actually the #1 CMS - believe it or not). Back then, open source cart solutions were lacking and Magento 1.0 brought a lot of hope.

Quickly Jisse dived into the new architecture: In 2009, he built his first extensions, among which the fundaments of a bridge between Joomla and Magento (MageBridge) and various project-specific extensions (among which payment providers and custom MVC/EAV modules).

A relieve

Over the years, he experienced what most Magento developers experienced with M1: A lot of power, but also frustration. After a couple of years, it no longer was cutting-edge and it barely adopted new developer standards. When the new Magento 2.0 alpha 1 came out, Jisse started playing with it. And he was relieved to see modern tools in its architecture: Composer, PHP namespacing, testability, CLI-driven management, proper design patterns.

Again, after building some modules and dummy projects, the first Magento 2 developer training was given in January 2017 (two months after the official release) and numerous M2 trainings have followed for both backend developers, frontend developers and devops.

Frontend sagas

Currently, with Magento 2 being several years old now, the fuzz is no longer about its backend architecture: It is the frontend that matters. Jisse has given numerous frontend development trainings, where people complain about LESS (and not SASS) being used, loading times to be slow (while in fact M2 allows for enough tuning to make it bloody fast), an archaic combo of Knockout/RequireJS (while they both serve their purpose in regards to backwards compatibility).

PWA is the new keyword. Jisse has dived into React, Redux & service workers in combination with GraphQL and NodeJS tools. He is currently working in various initiatives to help developers embrace the new frontend stack (ExtDN, Vue Storefront, DEITY). Also, he has added Docker and Kubernetes to his vocabulary.

As of yet, it is fair to say that Magento holds little surprises for Jisse. He is your guy to train you or your developers properly in both backend and frontend technology.