Magento 2 Power Theming
Initial setup & configuration
Page Layouts
Generic Layouts
-
Understand generic layout updatesLocked(1:59)
-
Understand layout handlesLocked(4:38)
-
Find & target a specific layout handleLocked(3:05)
-
Find elements within a layout using inspectionLocked(2:38)
-
Exercise: Find elements within a layout by inspectingLocked(7:01)
-
Extend a layoutLocked(2:23)
-
Remove elements by referenceLocked(3:35)
-
Hide elements by referenceLocked(2:20)
-
Override a layoutLocked(5:05)
-
Exercise: Change the visibility of footer elementsLocked
-
Activate a page layout for a specific handleLocked(3:00)
Containers, Blocks and Templates
-
Containers and blocksLocked(5:25)
-
Create a containerLocked(4:18)
-
Create a block and templateLocked(5:53)
-
Control the placement of a blockLocked(3:54)
-
Move elements around a pageLocked(4:39)
-
Translate strings in template filesLocked(5:39)
-
Translate strings containing variablesLocked(2:56)
-
Understand Block classesLocked(4:19)
-
Create a theme moduleLocked(1:55)
-
Create a ViewModelLocked(5:16)
-
Call a ViewModel function from a templateLocked(4:03)
-
Use Escaper functions to escape data inputLocked(3:45)
-
Conditionally render a block with system configLocked(2:59)
-
Find templates using hintsLocked(5:22)
-
Exercise: Test your frontend knowledgeLocked
-
Add a CMS block to a page with an argumentLocked(5:49)
-
Understand the cacheable attributeLocked(3:41)
-
Override an existing template fileLocked(3:12)
-
Insert an image into a templateLocked(3:50)
-
Add the parent class to a custom page layoutLocked(6:32)
Grunt
Page Configuration
-
Define metadata with page configurationLocked(2:47)
-
Programmatically add a custom faviconLocked(2:33)
-
Include an external CSS fileLocked(4:22)
-
Add a host to CSP allowlistLocked(3:50)
-
Include an external JavaScript file with XMLLocked(2:20)
-
Including an external JavaScript file with RequireJSLocked(5:13)
-
Alias JavaScript files with RequireJSLocked(2:24)
-
Remove a static resource from the page headLocked(3:00)
Less & Styling
-
Overview of LESSLocked(3:32)
-
How Magento loads theme stylesLocked(1:44)
-
How Magento loads LESS filesLocked(7:01)
-
Override a specific theme’s LESS fileLocked(4:33)
-
Customize LESS variables in MagentoLocked(2:48)
-
Add a custom font to a themeLocked(8:00)
-
Override a specific module’s LESS fileLocked(3:19)
-
Extend a specific module’s LESS fileLocked(2:31)
-
UI Library embedded documentationLocked(3:10)
-
Responsive design and media queriesLocked(2:42)
-
Exercise: Create & style a template with LESSLocked
-
Implement a UI library element with a mixinLocked(3:32)
-
Challenge: Implement & customize a UI library mixinLocked
-
Understand merging, bundling & minificationLocked(5:32)
-
Optimize performance with critical CSSLocked(5:50)
Exercise: Change the visibility of footer elements
If you're already enrolled, log in to access this lesson.
Enroll in Course to Unlock