Magento 2 Frontending course
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, LESS compilation, XML layout and Block & ViewModel classes. With our training, you will get all the information you need to customize and extend your own theme.
11+
Hours of video
118
Lessons
371
Pages
Your teacher Jisse Reitsma
Jisse Reitsma is the developer of 60+ Magento extensions and has given technical Magento trainings for years. Besides his ability to understand complex technology, he is skilled in making this knowledge understandable for everyone. With him, you can expect in-to-depth guidance plus lots of practical tips. Jisse is the mastermind of MageTestFest, Reacticon and MageUnconference and former Magento Master.
Pick your On-Demand Magento video course
And you can start right away
On-Demand Preview
€
0
(USD 0)
No strings attached
- Access to 24 preview lessons
- More than 248+ minutes of video
- Student notes where available
- Free access before diving in full
On-Demand Solo
€
259
(USD 272)
per year per individual
- Full access to this course
- More than 11+ hours of video
- Student notes of 371+ pages
- Learn at your own pace
On-Demand Bulk
€
1249
(USD 1315)
per year per individual
- Access to 93+ hours of Magento courses
- Student notes of 5212+ pages
- Ideal if you want to grasp everything
Or go for a teacher-led session
Because everyone has different needs
Classroom
Live Training
See our schedule below
- Everything under On-Demand Standard
- Instructor-led classroom
- Benefit from a real-time interaction
- Ask any question that you have
Agency
In-House
per training per agency
- Everything under On-Demand Standard
- Economical for groups of 5 and more
- Freely debate company-specific topics
- On-site at your company office
Agency
Online
per training per agency
- Everything under On-Demand Standard
- Ideal for online or hybrid teams
- Recordings available afterwards
- Online via Zoom, Teams or similar
Join our upcoming training in Baarn
Monday, July 8, 2024 - Thursday, July 11, 2024
Schedule for live training
| Date | Training | Location | Details | |
|---|---|---|---|---|
|
Jul 8 - Jul 11 |
Magento Frontend Development Bootcamp |
NL |
Yireo, Baarn, The Netherlands
|
Learn more
|
|
Sep 23 - Sep 26 |
Magento Frontend Development Bootcamp |
NL |
Yireo, Baarn, The Netherlands
|
Learn more
|
|
Dec 2 - Dec 5 |
Magento Frontend Development Bootcamp |
NL |
Yireo, Baarn, The Netherlands
|
Learn more
|
Date
Jul 8 - Jul 11
Training
Magento Frontend Development Bootcamp
NL
Location
Details
Date
Sep 23 - Sep 26
Training
Magento Frontend Development Bootcamp
NL
Location
Details
Date
Dec 2 - Dec 5
Training
Magento Frontend Development Bootcamp
NL
Location
Details
Do these dates not fit you well? Do you want to switch to another language?
Feel free to contact us to see what other options there might be.
Magento training topics
Explore your topics of choice
- Introduction to
- Development tools
- Development performance
- Deployment modes
- Static content deployment
- Setting the Magento root
- Troubleshooting tips
- Relevant database tables
- Theme location
- Creating a theme
- Parent themes
- Theme inheritance
- Theme structure
- Theme vs module
- File view.xml
- 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
- Layout updates
- Moving elements
- Removing elements
- Rendering child elements in blocks
- Reordering elements
- Using block templates
- Block arguments in the XML layout
- Adding Google fonts
- Common XML layout modifications
- Understanding root.phtml
- Overriding layout
- Adding FontAwesome
- Overriding the logo
- Adding menu-items to the main or the top menu
- 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
- Working with CMS Blocks
- Example: Show products that are on sale
- Assigning variables
- Example: Adding a product to the footer
- Layout name vs layout alias
- 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
- General performance tips
- JS bundling
- Caching blocks
- Magento theme type
- Troubleshooting themes
This course has been updated for compatibility with Magento 2.4.7-p1
Watch a preview now
See for yourself
Introduction to
Development tools
Development performance
Or browse through all lessons in our courseware portal
We are constantly updating our courseware, but the following is a real-life snapshot
Static content deployment
16m 35s
Troubleshooting tips
Relevant database tables
Theme structure
02m 19s
File view.xml
Introduction to PHTML templates
04m 33s
Creating a new template
13m 03s
PHTML vs HTML templates
05m 44s
Debugging PHTML templates
06m 07s
Understanding the root template
Escaping values in templates
XML layout concepts
07m 24s
Comparison with Magento 1
04m 19s
XML layout essentials
17m 31s
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
The head section in the layout
10m 25s
Blocks in the layout
14m 09s
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
Block arguments in the XML layout
20m 02s
Adding Google fonts
Common XML layout modifications
Understanding root.phtml
Overriding layout
04m 38s
Adding FontAwesome
Overriding the logo
21m 02s
Adding menu-items to the main or the top menu
Text blocks
05m 48s
Troubleshooting layout issues
Translating content
17m 20s
Using inline translations
Creating a custom language pack
How JavaScript translations work
20m 10s
Module essentials
Creating a Block
Extending AbstractBlock
01m 50s
Example: Show products that are on sale
Assigning variables
Example: Adding a product to the footer
Layout name vs layout alias
Customizing email templates
16m 00s
Using Yireo EmailTester
03m 09s
Magento its LESS strategy
LESS basics
04m 25s
To copy Fotorama into a LESS file
09m 25s
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
Best practices for overriding LESS files
09m 31s
Using SASS instead of LESS
SASS basics
Grunt vs Gulp
Using Grunt for LESS compilation
16m 28s
Grunt tips
Frontools Gulp usage
Using subodha his Gulp
05m 03s
bobmotor Gulp usage
General performance tips
JS bundling
Caching blocks
07m 12s
Magento theme type
Troubleshooting themes
These videos are available as an On-Demand video training (with notes). See the pricing for details.
This course has been updated for compatibility with Magento 2.4.7-p1
Target group
- Technical merchants
- Trainees or interns
- Webdesigners
- Frontend developers
- Junior backend developers
Jisse gives cool training courses that you can put to good use in practice. Besides being informative, it is also fun to listen to.Roy van Os (Active Ants)
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
These are the options we give you
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.
We recommend the following training flow
Magento 2 Luma Frontend Development training
11h of videos
118 lessons
Option for in-house training
Level: Intermediate Type: Frontend Developer
Option for in-house training
Level: Intermediate Type: Frontend Developer
A quick-paced but thorough coverage of Magento 2 frontend development
featured
Magento 2 Backend Development I training
11h of videos
84 lessons
Option for in-house training
Level: Intermediate Type: Backend Developer
Option for in-house training
Level: Intermediate Type: Backend Developer
Configure DI XML with wisdom and build powerful extensions following from this
Magento 2 Luma JavaScript Development training
13h of videos
76 lessons
Option for in-house training
Level: Expert Type: Frontend Developer
Option for in-house training
Level: Expert Type: Frontend Developer
A clear and in-depth explanation of JavaScript in Magento 2 Luma
featured
Magento 2 Backend Development II training
10h of videos
102 lessons
Option for in-house training
Level: Expert Type: Backend Developer
Option for in-house training
Level: Expert Type: Backend Developer
Everything you need to create advanced modules following best practices
Jisse challenges my thinking by asking questions during the course, showing edge case implementations and pointing out the various hurdles to consider when developing software.Isolde van Oosterhout (Sols Webdesign)
Customer quotes
The training was great! We learned all the golden nuggets, presented clearly and accessible. Essential for anyone who works or will work with Magento! Rick Bouma (Epartment)
I really enjoyed the Magento 2 Hyvä Theme Development course. The information is useful and well-structured. I appreciated the extensive practice, which helped me understand how to develop a frontend using Hyvä. Jisse is easy to listen to and engaging, which made the course even better. Nadezhda Ivanova (HYPR)
At Yireo you will quickly get to know the world of Magento with all the new best practices. Kevin van Welzenis (Vendic)
Yireo could be the right partner for you
We have trained 5000+ developers in numerous disciplines since 2005
- Professional training at affordable prices
- Truely active with numerous open source projects in the community
- Trainings, bootcamps, hackathons, events
- Passionate, enthousiastic, knowledgable in the right combination
Some of the customers that we have trained in the past years
Frequently Asked Questions
There is a minimum number of attendees listed. What does this mean?
When this course is organized in the form of a classroom-training, it is only held if there is a minimum 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. With On-Demand courses (video courses), this number is not applicable.
Do you have any PPP discount available?
Yes, we do have a PPP (Purchasing Power Parity) discount available. Just enter `PPP` as a coupon code and the discount will be applied to your cart. We are using the Big Mac Index to recalculate prices. Note that - when ordering for a specific PPP rate - the country that you're entering in your billing address needs to match the exact country that you are visiting from (in other words: your IP needs to match the country you say you're from).
