This is a study guide for the official Magento 2 FE study guide.
In which folders can themes be located?
What determines where a theme is installed?
What is the difference if a theme is installed in one or the other of the possible directories?
Which folders can exist within a theme?
Which folders are optional and which are required?
What is the purpose of each of the folders?
Which files are required to be present in a theme?
Which files are optional?
What is the purpose of each of the different file types?
Which design areas exist?
What is the difference between them, and what do design areas have in common?
What are design areas used for?
How can design areas be utilized for custom themes or customizations?
What type of relationships can exist between themes?
What is the difference between a parent theme and a child theme?
How can the relationship between themes be defined and influenced?
How is that taken into account when creating a custom theme or customizing an existing theme?
2.2 Configure the design system using the options found in the Admin UI under Content > Design > Configuration
How do the configuration settings affect theme rendering?
What happens if a theme is added or removed?
What common mistakes can be made in regard to these settings?
2.3 Apply a temporary theme configuration to a store view using the options found in the Admin UI under Content > Design > Schedule
What is the purpose of this feature?
How does it influence rendering if a design change is scheduled? What happens at the end of a scheduled design?
How is full page caching involved?
2.4 Understand the differences and similarities between Content > Design > Configuration and > Schedule to configure the design fallback
What is the effect if both options are used at the same time?
What layout XML elements exist and what is their purpose?
What is the purpose of the attributes that are available on blocks and other elements?
How can the page layout be specified?
What is the purpose of page layouts?
How can a custom page layout be created?
Where are the existing page layouts used?
How can the root page layout be specified for all pages and for specific pages?
How can the available layout handles for a given page be determined?
How do you add a new layout handle?
What is the purpose of layout handles?
What are the most commonly used layout handles? How can layout handles be used during theme customization?
What is the purpose of blocks? What is the purpose of containers?
How can containers be used in theming?
How can blocks be used in theming?
What is the default block type?
How can the order of rendered child blocks be influenced both in containers and in blocks?
How can layout XML be overridden?
How can layout overriding be used in theming?
What are consequences of layout overrides during upgrades?
What is the effect of layout overrides on compatibility?
What is layout merging?
How do design areas influence merging?
How can merging remove elements added earlier?
What are additive changes and what are overriding changes during layout merging?
In what order are layout handles processed?
In what order is layout XML merged within the same handle?
How can the processing order be influenced?
What are common problems arising from the merge order of layout declarations?
How can arguments be set on blocks?
Which data types are available? What are common arguments for blocks?
What is the etc/view.xml file used for?
How can it be used to customize a theme? How can values from etc/view.xml be used during theming?
How does theme inheritance influence values from etc/view.xml?
How can a customized template file be assigned to a block using layout XML?
How does overriding a template affect upgradability?
What precautions can be taken to ease future upgrades when customizing templates?
How can the design fallback be used to render customized templates?
How does that influence upgradability?
How can you determine which template a block renders?
What conventions are used in PHP templates?
Why aren’t the common PHP loop and block constructs used?
Which common methods are available on the $block variable?
How can a child block be rendered?
How can all child blocks be rendered?
How can a group of child blocks be rendered?
How can values set on a block in layout XML be accessed and rendered in a template?
How can dynamic values be rendered securely in HTML, HTML attributes, JavaScript, and in URLs?
What commands must be executed to deploy static file types?
What are common mistakes during the process?
What are the differences between development and production mode in regard to frontend development?
Which LESS compilation options are available in Magento? How are they different?
How do they influence the developer workflow during theming?
What options exist to include custom JavaScript on a page?
What are the advantages and disadvantages of inline JavaScript?
How can JavaScript be loaded asynchronously on a page?
How can JavaScript on a page be configured using block arguments in layout XML?
How can it be done directly in a .phtml template?
Demonstrate understanding of jQuery and jQuery UI widgets.
Demonstrate understanding of how to use Magento core jQuery widgets.
How can jQuery UI Widget methods be instantiated?
How can you call jQuery UI Widget methods?
How can you add new methods to a jQuery UI Widget?
How can a jQuery UI Widget method be wrapped with custom logic?
How do you load a file with require.js?
How do you define a require.js module? How are require.js module dependencies specified?
How are module aliases configured in requirejs-config.js?
How do you regenerate the compiled requirejsconfig.js file after changes?
How do you configure module aliases in requirejs-config.js?
How do you debug which file a requireJS alias refers to?
Demonstrate that you understand how to create and configure Magento JavaScript mixins.
What options are available to configure JavaScript minification and bundling?
How does Magento minify JavaScript?
What is the purpose of JavaScript bundling and minification?
How can you specify configuration options on a UiComponent widget in JSON and in Layout XML?
What configuration options are available on UiComponents?
How do you specify the ko template for a UiComponent? Demonstrate an understanding of default.tracks
How do you use knockout.js bindings?
How do you bind a ko view model to a section of the DOM with the scope binding?
How do you render a ko template of a UiComponent?
Demonstrate an understanding of the different types of knockout observables.
What common ko bindings are used?
Demonstrate an understanding of ko virtual elements.
Demonstrate an understanding of the links, imports, exports, and listens UiComponent configuration directives.
Demonstrate an understanding of ES5 string literal templates like
Describe features like file import via @import directive, reusable code sections via mixins together with parameters and the usage of variables.
Demonstrate your understanding of the special variable @arguments.
Demonstrate how to use the nesting code formatting, and the understanding of media queries together with nesting.
Describe how the & (Ampersand) works and its function.
Describe how calculations are possible as well.
Demonstrate the process from magento-less files via php preprocessing into real LESS files with extracted @import directives. Where can the intermediate files be found?
What do you have to remember, when you change a less file?
Which files will be re-processed on file changes?
Are the original files copied or symlinked in developer environments?
Demonstrate LESS has no fallback capabilities and therefor magento created @magento_import directives to enable FE devs to inject or replace parts of existing less structures of modules and themes.
Demonstrate the primary use case for merging and minifaction.
Determine how these options can be found in the backend.
Understand the implications merging has in respect to folder traversal.
Demonstrate your understanding of magento's UI library, a LESS-based library of mixins and variables for many different standard design elements on websites.
How can you take advantage of the UI library?
What do you have to do to enable it in your theme?
Which file is primarily used for basic setup of variables?
Where can UI library files be found? How can it be extended?
How can you change specific parts of the UI library?
Demonstrate an understanding of customizing generic page elements that can be found on most pages: page header and footer, quick search, store view (language) switcher, mini cart, breadcrumbs, and sidebar menu.
How can design changes (page layout) be configured on product detail pages?
How can design changes be configured for specific product types?
How can you use custom layout updates for specific product pages?
Demonstrate an understanding of how to use the container blocks provided by Magento to display additional information on category pages.
How can design changes (page layout) be configured on category pages? How can the layered navigation be configured?
Demonstrate an understanding of configuring design inheritance for category pages.
How can a CMS block be configured as a category landing page?
How can design changes (page layout) be configured on CMS pages?
Demonstrate an understanding of static variables in CMS blocks and pages.
Demonstrate an understanding of the use of CMS template directives (var, store, block, …).
How is a widget instance created?
Where can widgets be used?
How can a custom widget target be created?
Demonstrate an understanding of configuring a widget instance.
How do you create and insert CMS blocks?
Demonstrate an understanding of the use of CMS template directives (var, store, block, …).
How do you remove or add an item from the customer account navigation using layout XML?
Demonstrate an understanding of formatting customer addresses.
Demonstrate an understanding of the container blocks provided in the Magento checkout to display additional information.
Demonstrate an understanding of internationalization (i18n) in Magento. What is the role of the theme translation dictionary, language packs, and database translations?
Understand the pros and cons of applying translations via the translate.csv file versus the core_translate table. In what priority are translations applied?
{{trans "Translate me"}}