background

jul. 8, 2024 - jul. 11, 2024

Magento Frontend Bootcamp cursus

One single week with only Magento frontending

  Check the details below

One single week with only Magento frontending

Can't miss one developer too long? But you still want to make sure that that developer gets in-depth fast? Our bootcamp concept offers a quick solution: A set amount of time to cover numerous topics in a fast pace.

Zelf als je denkt al wat te weten over Magento, krijgt Jisse het voor elkaar een paar bruikbare details te vertellen waaraan je nooit hebt gedacht.
Ruben Zuidervaart (Epartment)

Details van dit bootcamp

Start datum
maandag, juli 8, 2024
Eind datum
donderdag, juli 11, 2024
Tijden per dag
09:30 - 16:30
Dagen
4 dagen
Locatie
Yireo, Baarn, NL
Maximum aantal deelnemers
3
Maximum of attendees
8
Prijs
€1795 (excluding VAT)
Inclusief
Lunch, snacks, fruit, drinks, goodies, cursusmateriaal
Bemachtig nu een ticket

Outline van dag tot dag

jul. 8, 2024 Dag 1
Luma basic theme
Hyvä basic theme
Template overrides
XML layout definitions
jul. 9, 2024 Dag 2
Block & ViewModel classes
Frontent Performance
Magewire basics
jul. 10, 2024 Dag 3
Luma JavaScript basics
KnockoutJS & RequireJS
Luma checkout
jul. 11, 2024 Dag 4
Hyvä theme modifications
TailwindCSS and AlpineJS
Compatibility modules
Bemachtig nu een ticket
Of neem contact met ons op, als je alleen een specifieke dag wilt bijwonen of andere requirements hebt

Onderwerpen van dit bootcamp

Basic theme skeleton Static content deployment Working with the pub/ folder Deployment modes essentials Dealing with view.xml XML layout updates Page handles and other handles Page layouts and layout structuring Changing block layouts PHTML templating Removing unneccessary CSS Dealing with blocks and containers Rendering child blocks Block caching vs Full Page Caching Creating a simple module Working with ViewModels vs Blocks Grunt and Gulp Customizing CSS the right way LESS and SASS Responsiveness Performance optimizations Module patterns, invokation patterns JavaScript classes and prototype chain jQuery widget instantiation vs jQuery plugins AMD and RequireJS scripts Declaritive vs imperative invocation RequireJS configuration and overrides RequireJS mappings and pathings RequireJS overrides vs mixins KnockoutJS ViewModels and observables Subscribing to Knockout events Analysing UIComponents like the minicart and the checkout Knockout templating with child components Adding a step in the checkout Modifying fields in the checkout Loading data from the server via customerData Config Providers and Layout Processors Private Content versus Public Content Using the uiRegistry Debugging KO ViewModels and the XML layout Christmas Tree Overview of Hyva Themes Running projects with Hyva successfully Kickstarting TailwindCSS Using the ViewModel registry Kickstarting AlpineJS Working with customerData Working with custom Hyva events AlpineJS components in Hyva Making GraphQL and other AJAX calls Run-through of Hyva Checkout (React) Migrating existing Magento extensions

Deze lessen zijn onderdeel van dit bootcamp

Met dit bootcamp krijg je ook toegang tot de volgende online video's

Introduction to free 09m 34s
Development tools free 12m 34s
Development performance free 17m 28s
Deployment modes free 24m 04s
Static content deployment   16m 35s
Setting the Magento root free 07m 06s
Troubleshooting tips  
Relevant database tables  
Theme location free 03m 40s
Creating a theme free 08m 11s
Parent themes free 10m 19s
Theme inheritance free 23m 11s
Theme structure   02m 19s
Theme vs module free 06m 48s
File `view.xml`  
Introduction to PHTML templates   04m 33s
Using the MageSpecialist DevTools free 08m 54s
Using mage2tv/cache-clean free 04m 29s
Overriding a PHTML template free 11m 08s
Creating a new template   13m 03s
PHTML vs HTML templates   05m 44s
Debugging PHTML templates   06m 07s
Understanding the root template  
Escaping values in templates  
XML layout concepts   07m 24s
Comparison with Magento 1   04m 19s
XML layout essentials   17m 31s
Review of homepage demo free 08m 58s
Handles and handle types   21m 58s
Understanding page layouts   25m 08s
Adding labels to containers   15m 42s
Using containers   14m 48s
Adding a new page layout  
The head section in the layout   10m 25s
Blocks in the layout   14m 09s
Layout updates   19m 17s
Moving elements   07m 56s
Removing elements   02m 55s
Rendering child elements in blocks   19m 17s
Reordering elements   08m 57s
Using block templates   14m 16s
Block arguments in the XML layout   20m 02s
Adding Google fonts  
Common XML layout modifications  
Understanding root.phtml  
Overriding layout   04m 38s
Adding FontAwesome  
Overriding the logo   21m 02s
Adding menu-items to the main or the top menu  
Text blocks   05m 48s
Troubleshooting layout issues  
Setting up Store Views for translation free 09m 48s
Translating content   17m 20s
Translating system strings free 09m 16s
Using inline translations  
Creating a custom language pack  
How JavaScript translations work   20m 10s
Module essentials  
Creating a Block  
Using ViewModels free 15m 42s
ViewModels vs Blocks free 07m 48s
Extending `AbstractBlock`   01m 50s
Working with CMS Blocks free 13m 55s
Example: Show products that are on sale  
Assigning variables  
Example: Adding a product to the footer  
Layout name vs layout alias  
Customizing email templates   16m 00s
Adding a block to an email template free 04m 15s
Using Yireo EmailTester   03m 09s
CSS strategies free 05m 54s
How CSS is added via the XML layout free 05m 47s
Magento its LESS strategy  
LESS basics   04m 25s
To copy Fotorama into a LESS file   09m 25s
Removing calendar.css and others free 04m 04s
One single CSS or separate CSS files?   04m 31s
Understanding the `@magento_import` directive   15m 50s
Example module with some LESS   09m 57s
LESS compilers   09m 59s
Debugging `var/view_preprocessed/`   06m 28s
Including critical CSS  
CSS responsiveness - the Magento way free 15m 41s
Best practices for overriding LESS files   09m 31s
Using SASS instead of LESS  
SASS basics  
Grunt vs Gulp  
Using Grunt for LESS compilation   16m 28s
Grunt tips  
Frontools Gulp usage  
Using subodha his Gulp   05m 03s
bobmotor Gulp usage  
General performance tips  
JS bundling  
Caching blocks   07m 12s
Magento theme `type`  
Troubleshooting themes  
Luma JavaScript standards  
Invocation patterns free 17m 34s
jQuery in Magento  
jQuery and the keyword this  
jQuery noConflict mode  
How JavaScript translations work   20m 10s
AMD standard free 12m 07s
RequireJS basics free 05m 58s
RequireJS config per Magento module free 19m 19s
RequireJS configuration free 07m 48s
RequireJS rewrites free 21m 18s
RequireJS shims   11m 59s
RequireJS mixins   33m 55s
Component initializations   34m 10s
Return values of RequireJS modules free 22m 58s
Example: Changing background color   48m 57s
Changing options of the StoreView switcher   13m 35s
Dynamic dependencies  
RequireJS tips  
Introduction to Knockout.js free 09m 17s
Knockout Context Debugger browser plugin free 03m 41s
Binding Knockout the Magento way free 17m 13s
Binding variables in Knockout free 07m 13s
Text input with Knockout observable   11m 05s
Using `ko.observableArray`   11m 28s
Simple counter with Knockout free 26m 32s
Interacting with Knockout ViewModels free 08m 07s
Interacting with Magento uiComponents   16m 23s
Simple Knockout ViewModel linking free 48m 33s
Analysing the customer greeting   14m 14s
Subscribing to the minicart   36m 47s
Working with computed observables  
Knockout Components  
Debugging Knockout  
Using the uiRegistry free 12m 04s
Definition of UiComponents   16m 01s
Advanced UiComponent   18m 29s
Knockout HTML templates   17m 51s
Analysing the minicart free 22m 33s
Rendering child components   30m 35s
Adding extra info to the minicart free 13m 28s
State component with Knockout  
ConfigProviders for `window.checkoutConfig`   10m 56s
Layout processors free 23m 12s
Adding a new Layout Processor   15m 52s
Adding a child component to the checkout free 27m 45s
Adding a new step in checkout free 37m 52s
Component configuration   15m 01s
Adding a field to the address form  
Adding a CMS block in checkout   24m 04s
Data sources in the checkout free 06m 59s
Add additional email validation  
ZIP code validation  
Payment validators  
Observer quote changes  
Calling upon `checkoutProvider`  
Add a block to the sidebar  
Observing field validation  
Definition of Private Content   02m 42s
Dealing with `customerData`   17m 09s
Example for using `customerData`   10m 23s
Add a new customerData section   11m 21s
How `customerData` sections get their data   11m 26s
Showing `customer().lastname` in a Knockout template   11m 40s
Depersonalizer  
Introduction to Hyvä Themes free 12m 37s
Overview of Hyvä theme packages free 16m 39s
Overview of Hyvä modules free 06m 01s
Hyvä Admin free 05m 41s
Running a project in Hyvä   10m 41s
Requirements for Hyvä free 06m 32s
Development tools for Hyvä   06m 41s
Installation of Hyvä packages   12m 00s
Creating a new Hyva theme   13m 16s
Extending the `Hyva/default` theme free 20m 31s
Discovering the `Hyva/default` theme   15m 20s
Using browser syncing free 06m 52s
Introducing Tailwind   19m 00s
Quick start   23m 49s
Using Windy for Tailwind CSS development free 03m 00s
Hyvä build modes free 06m 12s
Tailwind configuration file free 10m 03s
Configuring breakpoints   12m 49s
Configuring colors   17m 17s
Working with PostCSS   06m 54s
Optimizing CSS classes   22m 16s
Purging Magento modules  
Configuring fonts free 13m 36s
Tailwind plugins   05m 49s
Using the prose plugin   11m 23s
The workings of `@apply`   04m 49s
Tips and tricks  
Just-In-Time Mode   14m 17s
Hyva_CmsTailwindJit module free 13m 46s
Tailwind 3 upgrade  
Using PHPStorm for Tailwind development   04m 14s
Using ViewModels   14m 13s
Creating a ViewModel for Hyva   10m 14s
Working with icons  
Introduction to AlpineJS free 04m 35s
Basic syntax free 17m 08s
`x-model` directive   05m 21s
Magics   01m 54s
The `$el` magic   01m 31s
The `$nextTick` magic   05m 13s
`x-ref` directive   06m 26s
Watching variables   03m 49s
`x-cloak` directive   03m 50s
`x-spread` directive   04m 14s
Nested data  
AlpineJS state   03m 47s
Copying a slider from alptail   19m 45s
JavaScript events in Hyva   09m 39s
Hyva private content   27m 27s
Depending on `window.hyva`   04m 00s
Mixing AJAX call with events  
Loading a CMS Block via GraphQL   34m 59s
Checkout options free 11m 35s
Hyvä React Checkout free 06m 50s
Customizing the React checkout   11m 08s
Fixing the cart ID   04m 11s
Fix duplicate React versions   03m 14s
Fix the vendor folder   03m 55s
Overriding components   06m 11s
React or Preact developer tools   06m 08s
React checkout architecture   24m 15s
Using context in the React checkout  
Using the React checkout in production  
Dealing with CORS issues  
Compatibility modules   07m 50s
Rewrite Luma scripts to Alpine   07m 23s
Using compatibility modules   08m 05s
Creating a compatibility module   24m 07s
Converting an Example Widget module   20m 06s
Introduction to Hyvä widgets  
Performance tips  
Equal heights solutions  
Registreer nu voor dit bootcamp

Ontmoet de docenten

Jisse Reitsma

Jisse Reitsma

Jisse Reitsma is de lead developer van 60+ Magento extensies en heeft technisch Magento verzorgd trainingen voor jaren. Naast zijn vermogen om complexe technologie te begrijpen, is hij bedreven in het maken deze kennis begrijpelijk voor iedereen. Bij hem kun je diepgaande begeleiding en veel verwachten van praktische tips. Jisse maakt deel uit van het Zend Z-Team, maker van MageTestFest & Reacticon en is bekroond met Magento Master "Mover" 2017-2018-2019.

Len Lorijn

Len Lorijn

Len heeft door de jaren heen als Magento backend developer gewerkt voor diverse bureaus, waaronder Guapa, Youwe en Elgentos. Ook hielp hij bij de organisatie van MageTitans Groningen en was hij vrijwilliger bij MageUnconference NL. Hij kent de technologie, hij houdt van de technologie, hij is de juiste man om je in de technologie te begeleiden. In zijn vrije tijd speelt hij ook in een band.

Target group

Doelgroep

  • Technische merchants
  • Trainees of stagiaires
  • Webdesigners
  • Frontend developers
  • Junior backend developers
Requirements

Vereisten

  • Experience with Magento 2 Admin Panel
  • An installation of Magento 2 running locally
  • Basic knowledge of object-oriented PHP and XML
  • Skilled in HTML and CSS

We geven jou deze opties

Bij jullie of bij ons?

Iedereen leert in haar/zijn eigen tempo. Wij verzorgen zowel interne trainingen als publieke trainingen door heel Europa - wat het beste bij uw team past. Wanneer er 3 of meer ontwikkelaars aanwezig zijn, is een training op maat vaak voordeliger. Neem contact met ons op voor meer informatie.

Je krijgt cursusmateriaal

Bij elke workshop wordt officieel Yireo-cursusmateriaal meegeleverd. Deelnemers ontvangen na de training een digitale versie van dit materiaal. Het bevat dia's, commentaar en referenties. Bovendien bevatten onze GitHub repositories nog veel meer codevoorbeelden.

Online klaslokalen

Online trainingen zijn ook onze trainingen: Via Zoom- of Google Hangout-sessies kan onze docent connecteren met jouw team. Het voordeel hiervan is dat het team ook zelf vanaf verschillende plekken verbinding kan maken, tijdsframes zijn flexibeler. Na afloop wordt ter referentie een video-opname met alle aanwezigen gedeeld.

On-demand training in eigen tempo

Deze training is ook beschikbaar als On-Demand training: Via talrijke videolessen, inclusief begeleidende aantekeningen van de leerling (wat gelijk staat aan een boek op zichzelf), leer je in je eigen tempo over de onderwerpen. En als je vragen tegenkomt, kun je terugvallen op de begeleiding van de docent.

background background

Yireo kan de juiste partner voor jullie zijn

We hebben meer dan 5000 developers in verschillende disciplines onderwezen sinds 2005

  • Professionele trainingen tegen betaalbare prijzen
  • Echt actief met tal van vrijwillige projecten in de gemeenschap
  • Trainings, bootcamps, hackathons, events
  • Gepassioneerd, enthousiast, goed geïnformeerd

Quotes van klanten

Met deze academy werd alles aangeraakt wat Magento 2 te bieden heeft. No stone was left unturned. Zeker aan te raden als je ervaring op wilt doen in de wereld van Magento, of je nou junior bent of senior developer die net in de wereld van Magento stapt. Kevin van Welzenis (Vendic)
Snelle, diepgaande introductie tot Hyvä Checkout en Magewire. Jisse is echt een ervaren en goed geïnformeerde docent die cursussen aanbiedt voor kleine groepen mensen met voldoende ruimte voor vragen en deelname van alle deelnemers Ingmar de Vos (Mountain IT)
Zeer leerzame en nuttige training! Ondanks dat ik al 3+ jaar Magento ervaring heb, was er voldoende informatie waaruit ik nieuwe dingen heb geleerd. Renze Dijkstra (E-tales)
Bekijk nog meer quotes van onze klanten

Een paar klanten die we hielpen met training in afgelopen jaren

nodots.png
appcomm.jpg
ism-ecompany.png
ziggo.png
mediawave.png
glue.jpg
experius.png
starring-jane.png
vicus.png
donnerberg.png
hostingxs.png
gerrits.png
Bekijk een meer compleet overzicht van onze klanten
Yireo
Amalialaan 126D
3743 KJ Baarn
The Netherlands

Email: info@yireo.com
Telefoon: +31 352343918
CoC 53173163

Education

About Yireo

Projects

GitHub organizations

Other links

Socials

Our Legal Docs

Yireo is a registered trademark of Yireo. All material on this website is copyrighted by Yireo.
Magento is a registered trademark of Magento Inc.