Yireo - Developer training

Open main menu

Get trained by Yireo on

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, partner of ExtDN, trainer and author. Jisse has been in the Magento ecosystem for many years 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

  • 66 lessons with 11+ hours of video
  • Student notes (250+ pages)
  • Accessible at any moment
  • Learn at your own pace
259
per year per individual

Blended Learning

  • Everything under On Demand
  • Teacher support via email & slack
  • Prioritized requests for new lessons
  • Get the personalized help that you need
369
per year per individual

Custom Training

  • Everything under In-person training
  • Economical for groups of 5 and more
  • Freely debate company-specific topics
  • Online or on-site at your company

Custom pricing

per training

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

LessonChapterVideo lengthCreatedAction
Introduction to Magento 2 frontend development Basics09m 34s18 Nov 2021Watch for free
Development tools Basics12m 34s13 Dec 2021Watch for free
Development performance Basics17m 28s21 Jun 2021Watch for free
Deployment modes   Basics24m 04s19 Jun 2021Get access
Static Content Deployment   Basics16m 35s19 Jun 2021Get access
Setting the DocumentRoot in the Apache webserver Basics07m 06s13 Dec 2021Watch for free
Theme location Creating a basic theme03m 40s13 Dec 2021Watch for free
Creating a theme Creating a basic theme08m 11s13 Dec 2021Watch for free
Parent themes   Creating a basic theme10m 19s21 Jun 2021Get access
Theme inheritance Creating a basic theme23m 11s13 Dec 2021Watch for free
Theme structure   Creating a basic theme02m 19s19 Jun 2021Get access
Theme vs module   Creating a basic theme06m 48s19 Nov 2021Get access
Introduction to PHTML templates   PHTML and HTML templates04m 33s19 Nov 2021Get access
Using the MageSpecialist DevTools PHTML and HTML templates08m 54s13 Dec 2021Watch for free
Using mage2tv/cache-clean PHTML and HTML templates04m 29s13 Dec 2021Watch for free
Overriding a PHTML template   PHTML and HTML templates11m 08s19 Nov 2021Get access
Creating a new template   PHTML and HTML templates13m 03s19 Nov 2021Get access
PHTML vs HTML templates   PHTML and HTML templates05m 44s19 Nov 2021Get access
Debugging PHTML templates   PHTML and HTML templates06m 07s19 Nov 2021Get access
XML layout concepts   XML layout07m 24s19 Jun 2021Get access
Comparison with Magento 1   XML layout04m 19s20 Nov 2021Get access
XML layout essentials   XML layout17m 31s20 Nov 2021Get access
Review of homepage demo XML layout08m 58s13 Dec 2021Watch for free
Handles and handle types   XML layout21m 58s29 Nov 2021Get access
Understanding page layouts   XML layout25m 08s29 Nov 2021Get access
Adding labels to containers   XML layout15m 42s30 Nov 2021Get access
Using containers   XML layout14m 48s30 Nov 2021Get access
The head section in the layout   XML layout10m 25s06 Dec 2021Get access
Blocks in the layout   XML layout14m 09s06 Dec 2021Get access
Layout updates   XML layout19m 17s06 Dec 2021Get access
Moving elements   XML layout07m 56s20 Nov 2021Get access
Removing elements   XML layout02m 55s07 Dec 2021Get access
Rendering child elements in blocks   XML layout19m 17s07 Dec 2021Get access
Reordering elements   XML layout08m 57s07 Dec 2021Get access
Using block templates   XML layout14m 16s07 Dec 2021Get access
Block arguments in the XML layout   XML layout20m 02s08 Dec 2021Get access
Overriding layout   XML layout04m 38s08 Dec 2021Get access
Overriding the logo   XML layout21m 02s08 Dec 2021Get access
Text blocks   XML layout05m 48s08 Dec 2021Get access
Troubleshooting layout issues   XML layout00m 00s20 Nov 2021Get access
Setting up Store Views for translation   Multilinguality09m 48s09 Dec 2021Get access
Translating content   Multilinguality17m 20s09 Dec 2021Get access
Translating system strings   Multilinguality09m 16s09 Dec 2021Get access
How JavaScript translations work   Multilinguality20m 10s09 Dec 2021Get access
Using ViewModels   Block & View Model classes15m 42s10 Dec 2021Get access
ViewModels vs Blocks   Block & View Model classes07m 48s10 Dec 2021Get access
Extending `AbstractBlock`   Block & View Model classes01m 50s10 Dec 2021Get access
Working with CMS Blocks   Block & View Model classes13m 55s10 Dec 2021Get access
Customizing email templates   Email templates16m 00s11 Dec 2021Get access
Adding a block to an email template   Email templates04m 15s11 Dec 2021Get access
Using Yireo EmailTester   Email templates03m 09s11 Dec 2021Get access
CSS strategies   CSS, LESS, Sass05m 54s08 Dec 2021Get access
How CSS is added via the XML layout   CSS, LESS, Sass05m 47s11 Dec 2021Get access
LESS basics   CSS, LESS, Sass04m 25s11 Dec 2021Get access
To copy Fotorama into a LESS file   CSS, LESS, Sass09m 25s13 Dec 2021Get access
Removing calendar.css and others   CSS, LESS, Sass04m 04s13 Dec 2021Get access
One single CSS or separate CSS files?   CSS, LESS, Sass04m 31s13 Dec 2021Get access
Understanding the @magento_import directive   CSS, LESS, Sass15m 50s13 Dec 2021Get access
Example module with some LESS   CSS, LESS, Sass09m 57s13 Dec 2021Get access
LESS compilers   CSS, LESS, Sass09m 59s13 Dec 2021Get access
Debugging var/view_preprocessed/   CSS, LESS, Sass06m 28s16 Dec 2021Get access
CSS responsiveness - the Magento way   CSS, LESS, Sass15m 41s16 Dec 2021Get access
Best practices for overriding LESS files   CSS, LESS, Sass09m 31s16 Dec 2021Get access
Using Grunt for LESS compilation   CSS, LESS, Sass16m 28s16 Dec 2021Get access
Using subodha his Gulp   CSS, LESS, Sass05m 03s16 Dec 2021Get access
Caching blocks   Frontend performance07m 12s06 Dec 2021Get access

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

These are the options we give you:

Prepare for certification

Our Magento 2 trainings are not part of the Magento U program. However, Yireo is known for providing training with high quality. Many M2 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
  • Theme location
  • Creating a theme
  • Parent themes
  • Theme inheritance
  • Theme structure
  • Theme vs module
  • 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
  • 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
  • The head section in the layout
  • Blocks in the layout
  • Layout updates
  • Moving elements
  • Removing elements
  • Rendering child elements in blocks
  • Reordering elements
  • Using block templates
  • Block arguments in the XML layout
  • Overriding layout
  • Overriding the logo
  • Text blocks
  • Troubleshooting layout issues
  • Setting up Store Views for translation
  • Translating content
  • Translating system strings
  • How JavaScript translations work
  • Using ViewModels
  • ViewModels vs Blocks
  • Extending `AbstractBlock`
  • Working with CMS Blocks
  • Customizing email templates
  • Adding a block to an email template
  • Using Yireo EmailTester
  • CSS strategies
  • How CSS is added via the XML layout
  • 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/
  • CSS responsiveness - the Magento way
  • Best practices for overriding LESS files
  • Using Grunt for LESS compilation
  • Using subodha his Gulp
  • Caching blocks

Audience

Technical merchants
Webdesigners
Frontend developers

Requirements

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.

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo