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