:show-content:
:hide-page-toc:

=========
Tutorials
=========

.. toctree::
    :titlesonly:

    tutorials/getting_started
    tutorials/discover_js_framework
    tutorials/define_module_data
    tutorials/restrict_data_access
    tutorials/unit_tests
    tutorials/mixins
    tutorials/pdf_reports
    tutorials/dashboards
    tutorials/backend
    tutorials/website

.. raw:: html

   <!-- 12 col on small screen, 6 on md, 3 on xl, 3 on xxl -->
   <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">
       <!-- Big card with badge rounded-pill -->
       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="tutorials/getting_started.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Getting started</h4>
                   <p class="card-text text-dark fw-normal">
                       Develop your own module with the Odoo framework. This step-by-step tutorial
                       is crafted for newcomers and any other individual curious about Odoo
                       development.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="tutorials/discover_js_framework.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Discover the JavaScript Framework</h4>
                   <p class="card-text text-dark fw-normal">
                       Learn everything you need to know about the JavaScript framework of Odoo.
                       This tutorial will teach you how to build custom components and views, give
                       life to your application, and even re-introduce the kitten mode.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/define_module_data.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Define module data</h4>
                   <p class="card-text text-dark fw-normal">
                       Define master and demo data for an Odoo module, leveraging the strengths of
                       the CSV and XML file formats to accommodate specific data requirements.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/restrict_data_access.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Restrict access to data</h4>
                   <p class="card-text text-dark fw-normal">
                       Implement security measures to restrict access to sensitive data with the
                       help of groups, access rights, and record rules.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/unit_tests.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Safeguard your code with unit tests</h4>
                   <p class="card-text text-dark fw-normal">
                       Write effective unit tests in Python to ensure the resilience of your code
                       and safeguard it against unexpected behaviors and regressions.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/mixins.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Reuse code with mixins</h4>
                   <p class="card-text text-dark fw-normal">
                       Create mixins to code features once and reuse them in multiple models.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/pdf_reports.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Build PDF reports</h4>
                   <p class="card-text text-dark fw-normal">
                       Use QWeb, Odoo's powerful templating engine, to create custom PDF reports for
                       your documents.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/dashboards.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Visualize data in dashboards</h4>
                   <p class="card-text text-dark fw-normal">
                       Create data visualization dashboards using the enterprise edition "Dashboard"
                       view and so-called "SQL views".
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="tutorials/website.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Building a website</h4>
                   <p class="card-text text-dark fw-normal">
                       Build your first website modules with Odoo.
                   </p>
               </div>
               <div class="card-footer border-0">
                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
               </div>
           </div>
       </a>

   </div>