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

=============
How-to guides
=============

.. toctree::
    :titlesonly:

    howtos/discover_js_framework
    howtos/scss_tips
    howtos/website
    howtos/backend
    howtos/web_services
    howtos/company
    howtos/accounting_localization
    howtos/translations

.. raw:: html

   <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">

       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="howtos/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="howtos/scss_tips.html">
           <div class="card h-100">
               <div class="card-body pb-0">
                   <h4 class="card-title text-primary mb-1">Write lean easy-to-maintain CSS</h4>
                   <p class="card-text text-dark fw-normal">
                       Follow this guide to keep the technical debt of your CSS code under control.
                   </p>
               </div>
               <div class="card-footer border-0">
               </div>
           </div>
       </a>

       <!-- Small card with badge rounded-pill -->
       <a class="o_toctree_card col" href="howtos/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>

       <a class="o_toctree_card col" href="howtos/web_services.html">
           <div class="card h-100 pb-0">
               <div class="card-body">
                   <h4 class="card-title text-primary mb-1">Web services</h4>
                   <p class="card-text text-dark fw-normal">
                       Learn more about Odoo's web services.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="howtos/company.html">
           <div class="card h-100 pb-0">
               <div class="card-body">
                   <h4 class="card-title text-primary mb-1">Multi-company guidelines</h4>
                   <p class="card-text text-dark fw-normal">
                       Learn how to manage multiple companies and deal with the records-related
                       specificities of a multi-company environment.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="howtos/accounting_localization.html">
           <div class="card h-100 pb-0">
               <div class="card-body">
                   <h4 class="card-title text-primary mb-1">Accounting localization</h4>
                   <p class="card-text text-dark fw-normal">
                       Learn how to build a localization module, create bank operation models and
                       dynamic reports.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

       <a class="o_toctree_card col" href="howtos/translations.html">
           <div class="card h-100 pb-0">
               <div class="card-body">
                   <h4 class="card-title text-primary mb-1">Translating modules</h4>
                   <p class="card-text text-dark fw-normal">
                       Learn how to provide translation abilities to your module.
                   </p>
               </div>
               <div class="card-footer border-0"></div>
           </div>
       </a>

   </div>