Adobe Commerce Front-End Dev Expert study plan

Map the full Magento layout file hierarchy (page layouts, page_layouts.xml, layout handles, and module layout overrides) and explain load order in your own notes

Trace how a layout handle is resolved for a given URL and record the resolution sequence step by step

Create a custom page layout XML and register it so it appears as an option for a CMS page

Build a child theme extending a parent theme and verify layout XML from the parent still applies

Override a core layout block via a layout XML file without editing vendor code and confirm the override renders

Add, remove, and reorder container/block children using layout XML arguments and referenceBlock/referenceContainer

Convert a hard-coded template assignment into a block defined in layout XML with arguments passed through

Explain the difference between block types, container types, and template files in written notes

Write a custom block class with public getter methods and call them from its template

Build a view model (argument-based, no block inheritance) and inject it into a template via layout XML

Replace an existing block method call in a template with an equivalent view model call

Describe when to prefer a view model over a block and record the tradeoffs

Define a custom UI component and register it in a module's ui_component XML so it renders on a front-end page

Write a Knockout.js component (JS, HTML template, and registration) and mount it on a page

Use observable, observableArray, and computed to drive a live-updating UI element

Trace the data flow from a UI component's data provider through Knockout to the rendered DOM

Extend the checkout/cart UI component via a mixin or JS layout override without modifying core files

Add a custom field to the cart or checkout step and persist its value through the quote

Explain how the checkout JS component registry and layout provider resolve components at runtime

Write a JS override that modifies cart item rendering and verify it survives a full page reload

Set up a child theme LESS file structure with variables and mixins and compile it via the standard front-end build

Override a core LESS variable and verify the compiled CSS output changes as expected

Explain the static asset deployment modes and how source maps and file merging are controlled

Demonstrate how CSS critical path and bundling settings affect the generated asset set

Enable and verify full-page cache for a CMS and category page, then confirm a block is correctly hole-punched

Configure a private-content block and prove it bypasses full-page cache while the rest of the page is cached

Identify three front-end performance bottlenecks (render-blocking assets, unoptimized images, JS payload) and fix at least two

Explain cache invalidation triggers for layout, block, and full-page cache in written notes

Build a timed practice set spanning all six domains and score it against the domain weights

Re-implement the weakest two domain tasks from scratch without notes

Review every missed item and write a one-line root cause for each

Consolidate all prior deliverables into a single reference repo with a README index