Magento 2 Power Theming course image

Magento 2 Power Theming

Learn how to build, override & extend a custom frontend theme for your Magento eCommerce storefront, based on the Luma/Blank core theme.

71 lessons

4h 42m

You may have experienced the frustration of utilizing a third-party Magento theme. This, undoubtedly, lead to a horrible experience. Having a custom Magento theme is essential for a successful storefront. Fortunately, learning how to achieve this is within reach.

This course dives into frontend theme development, teaching you how to override, customize, and extend the Blank core theme in Magento. It covers building custom LESS/CSS files, finding and customizing template files, and understanding the layout XML layer. You'll also learn the intricacies of Magento frontend development, as well as adhering to Magento's best practices to build highly-performant, optimized themes.

Say goodbye to third-party themes 👋

Build your own highly-performant custom theme

Remove spaghetti theme code 🍝

Dealing with Magento third-party themes is one of, if not the most aggravating part of a Magento build.

This course teaches you all of the fundamentals to build your own custom theme, so you don't need to use those horrible off-the-shelf themes.

  • 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

    After watching the lessons, easily reference the source code on GitHub to build out themes for your upcoming projects.

Spaghetti code of third-party theme

Layouts, Blocks, LESS & more 🎨

It can be very hard for someone to build a custom theme in Magento, even if they have years of experience.

Save time and eliminate the stress of trying to find all you need to learn by taking this course with a refined, strategically-organized course containing everything you need to know.

  • Code along while watching

    Be able to pause, rewind, fast-forward, slow down, or speed up videos as you code along with the course. Find a comfortable pace for you.

  • Responsive-friendly

    It can be difficult to understand how the theme fallback layer works along with LESS files and media queries. This course explains how things work in the most simplest way possible.

Responsive design of laptop and phone

I'm preparing for the Frontend Expert Certification exam, and the Power Theming course covered each topic in detail. For me, it was very helpful. Each concept was thoroughly explained by the explanations provided, which made it very easy for me to understand. I really appreciate you offering such a top-notch training. Again, thank you so much!”  

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, enhanced transcriptions & full source code.

Spanish translations provided by Google Translate

71 lessons

4h 42m

Just launched March 31, 2023!

Initial Setup & Configuration

Prep dev environment for theming
Prep dev environment for theming
Understand the theme structure
Understand the theme structure
Set up an initial custom theme
Set up an initial custom theme
Activate a custom theme
Activate a custom theme
Choose between Blank & Luma
Choose between Blank & Luma
Define a custom logo
Define a custom logo
Assign a preview image
Assign a preview image

Page Layouts

Understand page design concepts
Understand page design concepts
How Magento processes layout XML
How Magento processes layout XML
Magento page layout extensibility
Magento page layout extensibility
Frontend directory fallback
Frontend directory fallback
Create a new custom page layout
Create a new custom page layout
Activate a custom page layout
Activate a custom page layout

Generic Layouts

Understand generic layout updates
Understand generic layout updates
Understand layout handles
Understand layout handles
Find & target a specific layout handle
Find & target a specific layout handle
Find elements within a layout using inspection
Find elements within a layout using inspection
Exercise: Find elements within a layout by inspecting
Exercise: Find elements within a layout by inspecting
Extend a layout with XML
Extend a layout with XML
Remove elements by reference
Remove elements by reference
Hide elements by reference
Hide elements by reference
Override a layout
Override a layout
Activate a page layout for a specific handle
Activate a page layout for a specific handle
Exercise: Remove footer elements with an override
Exercise: Remove footer elements with an override

Containers, Blocks & Templates

Containers and blocks
Containers and blocks
Create a container
Create a container
Create a block and template
Create a block and template
Control the placement of a block
Control the placement of a block
Move elements around a page
Move elements around a page
Translate strings in template files
Translate strings in template files
Translate strings containing variables
Translate strings containing variables
Understand Block classes
Understand Block classes
Create a theme module
Create a theme module
Create a ViewModel
Create a ViewModel
Call a ViewModel function from a template
Call a ViewModel function from a template
Use Escaper functions to escape data input
Use Escaper functions to escape data input
Conditionally render a block with system config
Conditionally render a block with system config
Find templates using hints
Find templates using hints
Exercise: Test your frontend knowledge
Exercise: Test your frontend knowledge
Add a CMS block to a page with an argument
Add a CMS block to a page with an argument
Understand the cacheable attribute
Understand the cacheable attribute
Override an existing template file
Override an existing template file
Insert an image into a template
Insert an image into a template
Add the parent class to a custom page layout
Add the parent class to a custom page layout

Grunt

What is Grunt?
What is Grunt?
Install & Configure Grunt
Install & Configure Grunt
Grunt commands in Magento
Grunt commands in Magento
Grunt with LiveReload
Grunt with LiveReload

Page Configuration

Define metadata with page configuration
Define metadata with page configuration
Programmatically add a custom favicon
Programmatically add a custom favicon
Include an external CSS file
Include an external CSS file
Add a host to CSP allowlist
Add a host to CSP allowlist
Include an external JavaScript file with XML
Include an external JavaScript file with XML
Including an external JavaScript file with RequireJS
Including an external JavaScript file with RequireJS
Alias JavaScript files with RequireJS
Alias JavaScript files with RequireJS
Remove a static resource from the page head
Remove a static resource from the page head

LESS & Styling

Overview of LESS
Overview of LESS
How Magento loads theme styles
How Magento loads theme styles
How Magento loads LESS files
How Magento loads LESS files
Override a specific theme’s LESS file
Override a specific theme’s LESS file
Customize LESS variables in Magento
Customize LESS variables in Magento
Add a custom font to a theme
Add a custom font to a theme
Override a specific module’s LESS file
Override a specific module’s LESS file
Extend a specific module’s LESS file
Extend a specific module’s LESS file
UI Library embedded documentation
UI Library embedded documentation
Responsive design and media queries
Responsive design and media queries
Exercise: Create & style a template with LESS
Exercise: Create & style a template with LESS
Implement a UI library element with a mixin
Implement a UI library element with a mixin
Challenge: Implement & customize a UI library mixin
Challenge: Implement & customize a UI library mixin
Understand merging, bundling & minification
Understand merging, bundling & minification
Optimize performance with critical CSS
Optimize performance with critical CSS
This course retails for
$ 299
* Individual course enrollment no longer available.
Enroll in the University to access this course 👇
Graduation cap on M.academy

University

Get access to all current & future courses at M.academy.

My peers constantly use your Docker images and follow Magento news from you. Your University offering has been a huge gift... a dream come true. The material was familiar to me, but I understood it at a much deeper level, especially JavaScript, Knockout.js, and modifying the checkout. The subtitles also helped me a lot, as my English is weak to understand by ear. Development and prosperity to your project!”  

Frequently asked questions

What will I get out of this course?
Upon completing this course, you will have all of the basic knowledge to build a custom frontend theme for Magento 2. This includes building custom LESS/CSS files, finding and customizing template files, understanding the layout XML layer, customizing template files of third-party modules in your theme, and writing media queries in LESS, with all code adhering to Magento's coding guidelines & best practices.
What do I need to know to take this course?
Those new to Magento should first becoming familiar with Magento core development before taking this course. Knowledge of Knockout.js is not required, but is helpful if you want to dive a bit more deeper into customizing Magento template files with JavaScript.
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 on how to Set Up a Magento 2 Development Environment with Docker, which is the recommend environment for Magento 2 development.
Who is this course meant for?
This course was designed to be consumed by developers with a working knowledge of Magento 2, who want to improve their frontend theming skills. Blank is Magento 2's main core theme of which Luma is built off of, and we'll go into detail on extending & customizing it in detail.
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 creating a custom theme in Magento 2. If your employer offers continuing education stipends, you may also be able to use this certificate to get the cost reimbursed by your employer.
This course comes with access to Maggie, your personal Magento tutor!

Maggie Bolt 💁‍♀️

Hi, I'm Maggie! 👋

Your dedicated Magento 2 mentor, on-hand 24/7 within all premium courses to help guide you through your learning journey.

Maggie's avatar