Autoplay
Autocomplete
Previous lesson
Complete and Continue
Magento 2 Power Theming
Initial setup & configuration
Prep dev environment for theming
Preview
5:06
Understand the theme structure
Preview
6:35
Set up an initial custom theme
Preview
9:27
Activate a custom theme
Preview
2:19
Choose between Blank & Luma
Preview
3:06
Define a custom logo
Preview
7:11
Assign a preview image
Preview
4:51
Page Layouts
Understand page design concepts
Locked
3:42
How Magento processes layout XML
Locked
2:44
Magento page layout extensibility
Locked
3:26
Frontend directory fallback
Locked
2:41
Create a new custom page layout
Locked
4:32
Activate a custom page layout
Locked
3:28
Generic Layouts
Understand generic layout updates
Locked
1:59
Understand layout handles
Locked
4:38
Find & target a specific layout handle
Locked
3:05
Find elements within a layout using inspection
Locked
2:38
Exercise: Find elements within a layout by inspecting
Locked
7:01
Extend a layout
Locked
2:23
Remove elements by reference
Locked
3:35
Hide elements by reference
Locked
2:20
Override a layout
Locked
5:05
Exercise: Change the visibility of footer elements
Locked
Activate a page layout for a specific handle
Locked
3:00
Containers, Blocks and Templates
Containers and blocks
Locked
5:25
Create a container
Locked
4:18
Create a block and template
Locked
5:53
Control the placement of a block
Locked
3:54
Move elements around a page
Locked
4:39
Translate strings in template files
Locked
5:39
Translate strings containing variables
Locked
2:56
Understand Block classes
Locked
4:19
Create a theme module
Locked
1:55
Create a ViewModel
Locked
5:16
Call a ViewModel function from a template
Locked
4:03
Use Escaper functions to escape data input
Locked
3:45
Conditionally render a block with system config
Locked
2:59
Find templates using hints
Locked
5:22
Exercise: Test your frontend knowledge
Locked
Add a CMS block to a page with an argument
Locked
5:49
Understand the cacheable attribute
Locked
3:41
Override an existing template file
Locked
3:12
Insert an image into a template
Preview
3:50
Add the parent class to a custom page layout
Locked
6:32
Grunt
What is Grunt?
Locked
2:25
Install & Configure Grunt
Locked
4:44
Grunt commands in Magento
Locked
7:47
Grunt with LiveReload
Locked
4:15
Page Configuration
Define metadata with page configuration
Locked
2:47
Programmatically add a custom favicon
Locked
2:33
Include an external CSS file
Locked
4:22
Add a host to CSP allowlist
Locked
3:50
Include an external JavaScript file with XML
Locked
2:20
Including an external JavaScript file with RequireJS
Locked
5:13
Alias JavaScript files with RequireJS
Locked
2:24
Remove a static resource from the page head
Locked
3:00
Less & Styling
Overview of LESS
Locked
3:32
How Magento loads theme styles
Locked
1:44
How Magento loads LESS files
Locked
7:01
Override a specific theme’s LESS file
Locked
4:33
Customize LESS variables in Magento
Locked
2:48
Add a custom font to a theme
Locked
8:00
Override a specific module’s LESS file
Locked
3:19
Extend a specific module’s LESS file
Locked
2:31
UI Library embedded documentation
Locked
3:10
Responsive design and media queries
Locked
2:42
Exercise: Create & style a template with LESS
Locked
Implement a UI library element with a mixin
Locked
3:32
Challenge: Implement & customize a UI library mixin
Locked
Understand merging, bundling & minification
Locked
5:32
Optimize performance with critical CSS
Locked
5:50
Conclusion
Downloadable archive of code
Locked
Course feedback & certificate for the Magento 2 Power Theming course
Locked
Programmatically add a custom favicon
Lesson content locked
If you're already enrolled,
log in to access this lesson
.
Enroll in Course to Unlock