Blog

https://aureatelabs.com/blog/easiest-way-to-load-your-custom-js-component-in-magento-2/

https://r-martins.github.io/m1docs/videos/fundamentals/add-a-javascript-module/index.html

https://github.com/nans/Magestudy/tree/master?tab=readme-ov-file

https://www.thecoachsmb.com/how-to-add-custom-javascript-in-magento-2/#:~:text=Magento%202%20uses%20Require%20JS,to%20increase%20the%20page%20speed.&text=Magento%202%20uses%20requirejs%2Dconfig,the%20JS%20file%20with%20alias

Now we have to create the styling file. All the css and js files must be created under view/{areacode}/web folder.

All configuration is done in the requirejs-config.js file. It has a single root object config which contains the configuration options described below. 

var config = {
    map: {...},
    paths: {...},
    deps: [...],
    shim: {...},
    config: {
        mixins: {...},
        text: {...}
    }
}

https://developers.google.com/search/docs/appearance/structured-data/image-license-metadata

https://search.google.com/test/rich-results

Install this module to show rich snippets on google search page

https://github.com/outeredge/magento-structured-data-module

https://developers.google.com/search/docs/appearance/structured-data

What are Rich Snippets?

Here’s an example:

<type name="Magento\Framework\App\RouterList">
    <arguments>
        <argument name="routerList" xsi:type="array">
            <item name="routingExample" xsi:type="array">
                <item name="class" xsi:type="string">ExampleCorp\RoutingExample\Controller\Router</item>
                <item name="disable" xsi:type="boolean">false</item>
                <item name="sortOrder" xsi:type="string">40</item>
            </item>
        </argument>
    </arguments>
</type>

Creating the controller that will handle the routing

https://webkul.com/blog/magento2-create-list-with-pager-in-frontend/

So first you have to check where you are getting collection. Most of time its coming from block and this blog also share how to do it when collection is coming from block.

Now go to your block file and add a _prepareLayout() function. This function render the layout of page as its visible from its name like we can set page title and other things also this function runs automatically.

See below function.

protected function _prepareLayout()
{
    parent::_prepareLayout();
    $this->pageConfig->getTitle()->set(__('My Reward History'));

    // Assuming $macAddress is available, get records for the given MAC address
    $blockss_c = $this->getLayout()->createBlock('\Motoris\Vehiclelookup\Block\Cookie');
    $macAddress = $blockss_c->get('customer_veh');

    $records

I will make it very simple sweet and short. No long boring text. Just to the point.

Lets start!

Magento 2 only need two files to register and initialize a module.

1. registration.php: This file is located in the root directory of your module (app/code/Anees/Training/registration.php). It uses a Magento function to register the module with the framework.

2. etc/module.xml: This file is located within the etc folder of your module (app/code/Anees/Training/etc/module.xml). It defines the module's name, setup version, and any dependencies it might have.

After adding above two files run command bin/magento module:enable Anees_Training

Remember this is just a start. Magic will happen

In this blog, I'll guide you through the process of creating a Block, Controller, Template file, and their corresponding layout files.

I hope you must be a developer reading this blog so i would give you tips how you can improve your efficacy.

If you are using a PHPSTORM then you can use live template that will make your work much smoother and less work hasle.

Create A Controller: 

<?php

namespace Anees\Training\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Context;

class Index extends Action
{
    /**
     * @var PageFactory
     */
    protected $pageFactory;

    /**
     * @param Context $context
     * @param PageFactory $pageFactory
     */
    public