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
Locked
(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
Next steps with Magento theming
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