Log in

Courses

Magento 2 Power Theming artwork

Magento 2 Power Theming

Learn how to build, override & extend a custom Luma-based frontend theme for your Magento eCommerce storefront.

Last updated 5 days ago

This is a premium course

Only available to enrolled or University students.
Join today to unlock all lessons in this course.

Enroll now

There are 73 lessons in this course:

Initial setup & configuration

Prepare a development environment for theming in Magento
5:04

Prepare a development environment for theming

Understand the theme structure in Magento
6:32

Understand the theme structure

Set up an initial custom theme in Magento
9:24

Set up an initial custom theme

Activate a custom theme in Magento
2:17

Activate a custom theme 5

Choose between Blank and Luma in Magento
3:04

Choose between Blank and Luma

Define a custom logo in Magento
7:09

Define a custom logo 2

Assign a preview image in Magento
4:48

Assign a preview image 8

Page layouts

Understand page design concepts in Magento
3:39

Understand page design concepts

Understand how Magento processes layout XML
2:42

Understand how Magento processes layout XML

Understand page layout extensibility in Magento
3:23

Understand page layout extensibility

Understand frontend directory fallback in Magento
2:39

Understand frontend directory fallback

Create a new custom page layout in Magento
4:29

Create a new custom page layout

Activate a custom page layout in Magento
3:26

Activate a custom page layout

Generic layouts

Understand generic layout updates in Magento
1:56

Understand generic layout updates

Understand layout handles in Magento
4:35

Understand layout handles 2

Find and target a specific layout handle in Magento
3:03

Find and target a specific layout handle 8

Find elements within a layout using inspection in Magento
2:35

Find elements within a layout using inspection

Exercise: Find elements within a layout by inspecting in Magento
6:58

Exercise: Find elements within a layout by inspecting 2

Extend a layout in Magento
2:20

Extend a layout

Remove elements by reference in Magento
3:33

Remove elements by reference 3

Hide elements by reference in Magento
2:18

Hide elements by reference

Override a layout in Magento
5:03

Override a layout

Exercise: Change the visibility of footer elements 2

Activate a page layout for a specific handle in Magento
2:58

Activate a page layout for a specific handle 2

Containers, blocks and templates

Understand containers and blocks in Magento
5:23

Understand containers and blocks 3

Create a container in Magento
4:16

Create a container

Create a block and template in Magento
5:51

Create a block and template

Control the placement of a block in Magento
3:52

Control the placement of a block

Move elements around a page in Magento
4:37

Move elements around a page

Translate strings in template files in Magento
5:37

Translate strings in template files

Translate strings containing variables in Magento
2:53

Translate strings containing variables

Understand block classes in Magento
4:17

Understand block classes 5

Create a theme module in Magento
1:53

Create a theme module

Create a ViewModel in Magento
5:14

Create a ViewModel 5

Call a ViewModel function from a template in Magento
4:00

Call a ViewModel function from a template

Use Escaper functions to escape data input in Magento
3:43

Use Escaper functions to escape data input

Conditionally render a block with system configuration in Magento
2:56

Conditionally render a block with system configuration 2

Find templates using hints in Magento
5:20

Find templates using hints

Exercise: Test your frontend knowledge

Add a CMS block to a page with an argument in Magento
5:47

Add a CMS block to a page with an argument 4

Understand the cacheable attribute in Magento
3:39

Understand the cacheable attribute

Override an existing template file in Magento
3:09

Override an existing template file

Insert an image into a template in Magento
3:48

Insert an image into a template

Add the parent class to a custom page layout in Magento
6:29

Add the parent class to a custom page layout 7

Grunt

Understand Grunt in Magento
2:23

Understand Grunt

Install and configure Grunt in Magento
4:41

Install and configure Grunt

Use Grunt commands in Magento
7:45

Use Grunt commands 2

Use Grunt with LiveReload in Magento
4:13

Use Grunt with LiveReload 4

Page configuration

Define metadata with page configuration in Magento
2:44

Define metadata with page configuration

Programmatically add a custom favicon in Magento
2:31

Programmatically add a custom favicon 3

Include an external CSS file in Magento
4:19

Include an external CSS file

Add a host to the CSP allowlist in Magento
3:47

Add a host to the CSP allowlist

Include an external JavaScript file with XML in Magento
2:17

Include an external JavaScript file with XML

Include an external JavaScript file with RequireJS in Magento
5:11

Include an external JavaScript file with RequireJS 6

Alias JavaScript files with RequireJS in Magento
2:21

Alias JavaScript files with RequireJS 4

Remove a static resource from the page head in Magento
2:57

Remove a static resource from the page head

Less & styling

Understand LESS in Magento
3:30

Understand LESS

Understand how Magento loads theme styles
1:42

Understand how Magento loads theme styles

Understand how Magento loads LESS files
6:58

Understand how Magento loads LESS files

Override a specific theme's LESS file in Magento
4:30

Override a specific theme's LESS file

Customize LESS variables in Magento
2:46

Customize LESS variables

Add a custom font to a theme in Magento
7:58

Add a custom font to a theme 6

Override a specific module's LESS file in Magento
3:16

Override a specific module's LESS file

Extend a specific module's LESS file in Magento
2:28

Extend a specific module's LESS file

Use the UI Library embedded documentation in Magento
3:07

Use the UI Library embedded documentation

Understand responsive design and media queries in Magento
2:40

Understand responsive design and media queries

Exercise: Create and style a template with LESS

Implement a UI Library element with a mixin in Magento
3:30

Implement a UI Library element with a mixin 4

Challenge: Implement and customize a UI Library mixin

Understand merging, bundling, and minification in Magento
5:29

Understand merging, bundling, and minification

Optimize performance with critical CSS in Magento
5:47

Optimize performance with critical CSS 5

Conclusion

Downloadable archive of code

Understand the next steps with Magento theming