Magento 2 Luma Frontend Development - On Demand Training

In stock
SKU
v02
€259.00
  • Courses included: 2
  • Total video time: 15 hours
  • Access period: 1Y
  • € 259 for 1 year
  • € 18 per hour of video available to you
More Information
Price €259.00
Access period 1 year

Included courses

Magento 2 Installation

Status: Complete
Last updated: 2024-06-08
Number of lessons: 67
Number of slides: 270
Videos: 2.7 hours

Magento 2 Luma Frontend Development

Status: Complete
Last updated: 2024-06-08
Number of lessons: 118
Number of slides: 369
Videos: 11.8 hours

Preview this course

Want to see what this course is like? Checkout our Courseware Demo to preview this course and others.

Preview all 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