Magento 2 Luma Frontend Development - On Demand Training

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Included courses

Course content

Magento 2 Installation

• Hosting environment
• Development platform
• Step-by-step guide for Windows WSL
• Assignment: Windows + WSL + Ubuntu Linux
• Docker overview
• Docker with Magento
• Tips for Docker & Magento
• Manual Docker (docker-run)
• Creating a network
• Running PHP-FPM manually
• Running Nginx manually
• Running MySQL manually
• Running Redis manually
• Running ElasticSearch manually
• Running Varnish manually
• Magento installation in Docker
• Resetting your environment
• Hypernode image
• Docker image of Michiel
• docker-compose stacks
• Existing Docker configurations for Magento
• Custom `docker-compose` cluster for Magento 2
• Assignment: Setup a custom `docker-compose` cluster and install Magento 2
• Assignment: Setup a custom `docker-compose` cluster with the Hypernode image
• Magento ECE Docker
• Warden
• Mark Shust Docker
• ddev with Magento
• Media CT Docker
• Magento and composer
• Magento composer root update plugin
• Magento Quality Patches
• Tips and tricks
• Magento installation
• Minimum system requirements
• Installing Magento
• Assignment: Install Magento 2 via composer
• Installing sample data
• Assignment: Install Sample Data
• Upgrading Magento
• Assignment: Enable the Developer Mode
• Is Magento properly installed?
• Deployment modes
• Post install
• Developer Tools
• Disabling Two Factor Authentication
• Assignment: Disabling Two Factor Authentication
• Using n98-magerun2
• Assignment: Install Magerun2
• Creating an admin user with `magerun2`
• Assignment: Upload Magento files to GitHub repository
• Assignment: Configure PhpStorm
• Assignment: Dump database and copy to GitHub
• Assignment: Setup Mage2TV Cache Cleaner
• Assignment: Disable static signing
• Assignment: Disable the Full Page Cache
• Disable Magento Business Intelligence
• Magento tips
• Development performance
• Deployment
• Using the Production Mode
• Deployment checks
• Deploying to production
• Stupidness of `module:uninstall`
• Using app:config commands
• Deploying new store scopes via env.php
• Deploy PHP
• Using Jenkins for deployment
• Zero downtime deployment
• Blue Green deployment
• Static content deployment
• Performance
• MySQL tuning
• PHP tuning
• Troubleshooting
• Troubleshooting composer authentication
• Reindexing issues

Magento 2 Luma Frontend Development

• Basics
• Introduction to
• Development tools
• Development performance
• Deployment modes
• Static content deployment
• Setting the Magento root
• Troubleshooting tips
• Relevant database tables
• Creating a basic theme
• Theme location
• Creating a theme
• Parent themes
• Theme inheritance
• Theme structure
• Theme vs module
• File `view.xml`
• Assignment: Create a simple theme
• Assignment: Override SVG logo in your theme
• Assignment: Override `mage/calendar.css`
• PHTML and HTML templates
• Introduction to PHTML templates
• Using the MageSpecialist DevTools
• Assignment: Install the MSP DevTools
• Using mage2tv/cache-clean
• Overriding a PHTML template
• Creating a new template
• PHTML vs HTML templates
• Assignment: Override PHTML templates
• Debugging PHTML templates
• Understanding the root template
• Escaping values in templates
• XML layout
• XML layout concepts
• Comparison with Magento 1
• XML layout essentials
• Review of homepage demo
• Handles and handle types
• Understanding page layouts
• Assignment: Change the page layout of the product page
• Adding labels to containers
• Using containers
• Adding a new page layout
• The head section in the layout
• Blocks in the layout
• Layout updates
• Moving elements
• Removing elements
• Rendering child elements in blocks
• Reordering elements
• Using block templates
• Assignment: Add a template block to the sidebar of the homepage
• Block arguments in the XML layout
• Adding Google fonts
• Assignment: Add a Google Font
• Common XML layout modifications
• Understanding root.phtml
• Overriding layout
• Adding FontAwesome
• Assignment: Add FontAwesome
• Overriding the logo
• Adding menu-items to the main or the top menu
• Text blocks
• Assignment: Add a dummy block to the sidebar of the homepage
• Troubleshooting layout issues
• Multilinguality
• Setting up Store Views for translation
• Translating content
• Translating system strings
• Using inline translations
• Assignment: Get started with translations
• Creating a custom language pack
• How JavaScript translations work
• Block classes
• Module essentials
• Creating a Block
• Using ViewModels
• ViewModels vs Blocks
• Extending `AbstractBlock`
• Working with CMS Blocks
• Example: Show products that are on sale
• Assignment: Display Store Information details in the footer
• Assignment: Analysing PHP errors in a ViewModel
• Assignment: Add advertizement on some product and category pages
• Assigning variables
• Example: Adding a product to the footer
• Layout name vs layout alias
• Email templates
• Customizing email templates
• Adding a block to an email template
• Using Yireo EmailTester
• CSS, LESS, Sass
• CSS strategies
• How CSS is added via the XML layout
• Magento its LESS strategy
• LESS basics
• To copy Fotorama into a LESS file
• Removing calendar.css and others
• One single CSS or separate CSS files?
• Understanding the `@magento_import` directive
• Example module with some LESS
• LESS compilers
• Debugging `var/view_preprocessed/`
• Including critical CSS
• CSS responsiveness - the Magento way
• Best practices for overriding LESS files
• Using SASS instead of LESS
• SASS basics
• Grunt vs Gulp
• Using Grunt for LESS compilation
• Assignment: Setup Grunt
• Grunt tips
• Frontools Gulp usage
• Using subodha his Gulp
• bobmotor Gulp usage
• Assignment: Change the body background color
• Assignment: Change the color of the add-to-cart button
• Assignment: Create a gradient switcher
• Assignment: Add custom Homepage content with styled tiles
• Frontend performance
• General performance tips
• JS bundling
• Caching blocks
• Miscellaneous
• Magento theme `type`
• Assignment: Add custom Homepage content with a custom LESS file
• Assignment: Create a parallax effect
• Tips
• Troubleshooting themes