[ADD] tutorials/website_theme: Add tutorials to build a website theme

content/developer/tutorials.rst

@@ -74,3 +74,9 @@ Tutorials
       :target: tutorials/pdf_reports
 
       Use QWeb, Odoo's powerful templating engine, to create custom PDF reports for your documents.
+
+   .. card:: Build a website theme
+      :target: tutorials/website_theme
+
+      Create a tailored website from scratch fully integrated with Odoo and editable via the Website
+      Builder.

content/developer/tutorials/website_theme.rst

@@ -10,7 +10,7 @@ Build a website theme
 | Our client, Airproof, has provided their latest design for their waterproof drone e-commerce,
   which we'll replicate.
 
-To start, you must have :doc:`installed Odoo locally <../../../administration/on_premise/source>`.
+To start, you must have :doc:`installed Odoo locally </administration/on_premise/source>`.
 You will also need some knowledge in:
 
 - XML
@@ -27,10 +27,9 @@ You will also need some knowledge in:
    :alt: Airproof homepage.
    :align: center
 
-| In the :file:`README.md` of the `Airproof module
-  <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof>`_, you can find
-  the various Airproof designs that you will replicate throughout the different exercises in this
-  tutorial.
+| In the :file:`README.md` of the `Airproof module <{GITHUB_TUTO_PATH}/website_airproof>`_, you can
+  find the various Airproof designs that you will replicate throughout the different exercises in
+  this tutorial.
 | You can also find all the code necessary for creating the Airproof website there. You should also
   obtain this by the end of the tutorial. It is recommended to try solving the exercices first
   without looking at the solution!
@@ -38,7 +37,9 @@ You will also need some knowledge in:
 | **Don't go too fast!**
 | Follow the exercises step by step and you will reach the final design at the end of the tutorial.
 
-Read the documentation linked in the :doc:`How-to guide: Website theme <../howtos/website_themes>`.
+Throughout this tutorial, you will find "See also" sections leading to parts of the :doc:`How-to
+guide: Website themes <../howtos/website_themes>` documentation. Be sure to read this documentation
+thoroughly each time! With it, you will find the solution to every exercise.
 
 Ready? Let's get started!
 

content/developer/tutorials/website_theme/01_theming.rst

@@ -12,10 +12,10 @@ Setup
 
 | The first step is to ensure that Odoo is running correctly locally. To do this, use a Shell script
   to run the server.
-| In this script, define the database name and install only the `website` application.
+| In this script, define the database name and install only the `website` module.
 
 .. seealso::
-   Documentation on how to :ref:`run Odoo <website_themes/setup/getting_started>`.
+   See reference documentation on how to :ref:`run Odoo <website_themes/setup/getting_started>`.
 
 .. _tutorials/website_theme/theming/module:
 
@@ -24,9 +24,13 @@ Build your module structure
 
 Now that we know everything is working properly, let's start building our module.
 
-| Based on the following structure, start creating your module that will be used as a theme. This is
-  where you are going to add your XML pages, SCSS, JS, …
-| Start with the basics : :file:`/data`, :file:`/img`, :file:`/scss`, :file:`/js`
+Based on the following structure, start creating your module that will be used as a theme. This is
+where you are going to add your XML pages, SCSS, JS, …
+
+.. seealso::
+   See reference documentation on how to structure your :ref:`theming/module`.
+
+| Start with the basics : :file:`/data`, :file:`/img`, :file:`/scss`, :file:`/js`.
 | Don't forget to add the :file:`__init__.py` and :file:`__manifest__.py` files.
 
 In your :file:`__manifest__.py` file, you can declare your module with the following information:
@@ -39,9 +43,6 @@ In your :file:`__manifest__.py` file, you can declare your module with the follo
 - license
 - depends
 
-.. seealso::
-   Documentation on :ref:`theming/module`.
-
 .. _tutorials/website_theme/theming/odoo_variables:
 
 Declare Odoo variables
@@ -56,10 +57,15 @@ following elements:
 - Headings font family : Space Grotesk
 - Content font family : Lato
 - The color palette name and the 5 main colors that compose it: `#000000`, `#BBE1FA`, `#CEF8A1`,
-  `#FFFFFF`,`#0B8EE6`
+  `#FFFFFF`, `#0B8EE6`
 - Header & Footer : Use one of the default templates for the moment, we will create a custom header
   later.
 
+.. seealso::
+   See reference documentation on how to use :ref:`primary variables <theming/module/variables>`, as
+   well as a list of all `primary variables
+   <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`_ available.
+
 | Restart your script to immediately see the application of your changes.
 | Don't forget to add the path to your manifest in the script and set your module as the app
   to install.
@@ -74,16 +80,14 @@ color palette includes your specified colors.
 .. note::
    The font families are from `Google fonts <https://fonts.google.com/>`_.
 
-.. seealso::
-   Documentation on :ref:`theming/module/variables`, as well as a list of all `primary variables
-   <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`_ available.
-
 .. spoiler:: Solutions
 
    To complete this exercise, you need to:
 
    #. Create your :file:`primary_variables.scss` file. You can find all the necessary information in
-      the `primary_variables.scss <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/primary_variables.scss>`_ file from our example module.
+      the `primary_variables.scss
+      <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/primary_variables.scss>`_ file from our
+      example module.
    #. Declare your file in the :file:`__manifest__.py` as indicated in the documentation.
    #. Install your module via your script. In our example, it looks like this:
 
@@ -116,26 +120,27 @@ Based on the Airproof design, define the following elements:
 - Inputs border width : 1px
 - Large buttons border radius : 0px 10px 10px 10px
 
+.. seealso::
+   - See reference documentation on how to use :ref:`theming/module/bootstrap`.
+   - A list of all `Bootstrap variables
+     <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`_ used by Odoo.
+   - And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>`_
+     official documentation.
+
 .. tip::
    - You will need to override more variables to replicate the Airproof design. Remember to add them
      throughout the creation of your website.
    - Make it a habit to regularly check locally that your changes have been successfully applied
      and have not caused any errors.
 
-.. seealso::
-   - Documentation on :ref:`theming/module/bootstrap`.
-   - `Bootstrap overridden SCSS
-     <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`_.
-   - And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>`_
-     official documentation.
-
 .. spoiler:: Solutions
 
    To complete this exercise, you need to:
 
    #. Create your :file:`bootstrap_overridden.scss` file. You can find all the necessary information
-      in the `bootstrap_overridden.scss <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/bootstrap_overridden.scss>`_
-      file from our example module.
+      in the `bootstrap_overridden.scss
+      <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/bootstrap_overridden.scss>`_ file from
+      our example module.
    #. Declare your file in the :file:`__manifest__.py` as indicated in the documentation.
 
 .. _tutorials/website_theme/theming/presets:
@@ -153,28 +158,26 @@ to meet the following client requests:
 - Deactivate the wishlist feature in the shop but activate it on the product page.
 - On the shop page, activate the filtering by categories only on the left side.
 
+.. seealso::
+   | See how you can define your :ref:`presets <theming/module/views/presets>`.
+   | To start writing your file, follow the instructions for any Odoo XML page described in
+     :doc:`/developer/howtos/website_themes/layout`.
+
 .. tip::
-   - | To complete the exercise, you need to install the **eCommerce** (`website_sale`) and
-       **wishlist** (`website_sale_whishlist`) applications.
-     | **Be careful!** Referencing an application in your code that hasn't been installed will
-       result in an error.
+   - To complete the exercise, you need to install the **eCommerce** (`website_sale`) and
+     **wishlist** (`website_sale_whishlist`) applications. **Be careful!** Referencing an
+     application in your code that hasn't been installed will result in an error.
    - | In order to find the templates to activate or not, go to the source code:
        `odoo/addons/website/views/**`.
      | For example, you can find all the templates for the header in
        `website_templates.xml <{GITHUB_PATH}/addons/website/views/website_templates.xml>`_.
-   - | To see the effect of your presets, add some **products** (*Airproof Mini*, *Airproof Robin*,
-       *Warranty*, *Charger cable*) and create **eCommerce categories** (*Warranties*, *Accessories*
-       , and *Drones* with *Camera drones* and *Waterproof drones*) in the database.
-     | You will find the `product images here
-       <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content>`_.
+   - To see the effect of your presets, add some **products** (*Airproof Mini*, *Airproof Robin*,
+     *Warranty*, *Charger cable*) and create **eCommerce categories** (*Warranties*, *Accessories*,
+     and *Drones* with *Camera drones* and *Waterproof drones*) in the database. You will find the
+     `product images here <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content>`_.
    - You will need to activate more views to replicate the Airproof design. Remember to add them
      throughout the creation of your website.
 
-.. seealso::
-   | Documentation on :ref:`theming/module/views`.
-   | To start writing your file, follow the instructions for any Odoo XML page described in
-     :doc:`/developer/howtos/website_themes/layout`.
-
 .. spoiler:: Solutions
 
    To deactivate the Call-to-action:

content/developer/tutorials/website_theme/02_build_website.rst

@@ -16,7 +16,9 @@ as content in the page.
    You will need to deactivate the default homepage.
 
 .. seealso::
-   Documentation on :ref:`website_themes/pages/default` and :ref:`website_themes/pages/theme_pages`.
+   See reference documentation on how to :ref:`desactivate a default page
+   <website_themes/pages/default>` and how to :ref:`start a new page
+   <website_themes/pages/theme_pages>`.
 
 .. spoiler:: Solutions
 
@@ -69,14 +71,14 @@ Add a media
 If you want the client to be able to reuse certain pictures that you are going to add on the
 website, they must be added to the image library.
 
-| To do the test, declare the drone image to add it to the library. You will find the
-  `drone picture here
-  <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content/drone-robin.png>`_.
-| Go to the :guilabel:`website builder`, double-click on the :guilabel:`logo`, and you will see the
-  drone image in the library.
+To do the test, declare the drone image to add it to the library. You will find the `drone picture
+here <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/drone-robin.png>`_.
 
 .. seealso::
-   Documentation on :ref:`website_themes/media/images`.
+   See reference documentation on how to :ref:`add a media <website_themes/media/images>`.
+
+Go to the :guilabel:`Website Builder`, double-click on the :guilabel:`logo`, and you will see the
+drone image in the library.
 
 .. spoiler:: Solutions
 
@@ -85,7 +87,7 @@ website, they must be added to the image library.
    #. Put your PNG in the right image folder.
    #. Create your :file:`images.xml` file. You can find all the necessary information
       in the `images.xml
-      <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/data/images.xml>`_
+      <{GITHUB_TUTO_PATH}/website_airproof/data/images.xml>`_
       file from our example module.
    #. Declare your file in the :file:`__manifest__.py`.
 
@@ -104,17 +106,17 @@ Based on the Airproof design, add the following elements to the homepage :
 
 - Create a section with the 3 boxes using the :guilabel:`Big boxes` building block.
 
-.. TODO: cannot be edited?
-
-  - Ensure that it cannot be edited via the website builder.
+  - For this section, you don't want the future user to be able to edit it via the Website Builder.
   - Put an opacity filter on the background image of the 3 boxes.
 
 - Create another section containing the title and icons.
 
-You will find `images here
-<https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content>`_
-and the `icons here
-<https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content/icons>`_.
+You can use these `images <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content>`_ and `icons
+<{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/icons>`_.
+
+.. seealso::
+   See reference documentation on how to :ref:`write standard snippets
+   <website_themes/building_blocks/layout>`.
 
 .. image:: 02_build_website/building-blocks.png
    :alt: Airproof building blocks.
@@ -129,13 +131,10 @@ and the `icons here
    - You can also find the original building block code in Odoo :
      :file:`odoo/addons/website/views/snippets/**.xml`.
 
-.. seealso::
-   Documentation on :ref:`website_themes/building_blocks/layout`.
-
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example on `home.xml
-   <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/data/pages/home.xml>`_.
+   <{GITHUB_TUTO_PATH}/website_airproof/data/pages/home.xml>`_.
 
 .. _tutorials/website_theme/build_website/navigation:
 
@@ -152,21 +151,22 @@ The client has requested the following changes:
   and “Tutorials”.
 - Add a mega-menu “Waterproof drones” to display the different products.
 
+.. seealso::
+   - You can find the original mega-menu templates code in Odoo :
+     `odoo/addons/website/views/snippets/s_mega_menu_**.xml
+     <{GITHUB_PATH}/addons/website/views/snippets>`_
+   - See reference documentation on how to modifiy the
+     :doc:`/developer/howtos/website_themes/navigation`.
+
 .. image:: 02_build_website/mega-menu.png
    :alt: Aiproof mega-menu.
 
 .. tip::
    - Make sure the Blog app is installed and create the two different blogs in the backend.
-   - | Create the different products via the backend.
-     | You will find some `product pictures here
-       <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content>`_.
-
-.. seealso::
-   - You can find the original mega-menu templates code in Odoo :
-     :file:`odoo/addons/website/views/snippets/s_mega_menu_**.xml`
-   - Documentation on :doc:`/developer/howtos/website_themes/navigation`.
+   - Create the different products via the backend. You can use these `product pictures
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content>`_.
 
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example on `menu.xml
-   <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/data/menu.xml>`_.
+   <{GITHUB_TUTO_PATH}/website_airproof/data/menu.xml>`_.

content/developer/tutorials/website_theme/03_customisation_part1.rst

@@ -17,7 +17,10 @@ In :file:`theme.scss`, reproduce the following design elements:
 - Modify the **slider's arrows** by adding a green background and changing their design.
 
 You will find the various `media here
-<https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/img/content/icons>`_.
+<{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/icons>`_.
+
+.. seealso::
+   See reference documentation on how to :ref:`add your SCSS rules <theming/assets/styles>`.
 
 .. image:: 03_customisation_part1/menu.png
    :scale: 50%
@@ -30,15 +33,12 @@ You will find the various `media here
      your pages.
    | So you will be sure that your rules will only have an impact on the website parts.
 
-.. seealso::
-   Documentation on :ref:`theming/assets/styles`.
-
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example on `header.scss
-   <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/layout/header.scss>`_
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/layout/header.scss>`_
    and `caroussel.scss
-   <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/snippets/caroussel.scss>`_.
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/snippets/caroussel.scss>`_.
 
 .. _tutorials/website_theme/customisation_part1/custom_js:
 
@@ -53,13 +53,13 @@ experience, making it more engaging and visually appealing.
 Use your JavaScript skills to implement this.
 
 .. seealso::
-   Documentation on :ref:`theming/assets/interactivity`.
+   See reference documentation on how to :ref:`add Javascript code <theming/assets/interactivity>`.
 
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example on `mouse_follower.js
-   <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/js/mouse_follower.js>`_
-   and `mouse_follower.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/components/mouse_follower.scss>`_.
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/js/mouse_follower.js>`_ and `mouse_follower.scss
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/components/mouse_follower.scss>`_.
 
 .. _tutorials/website_theme/customisation_part1/custom_header:
 
@@ -71,15 +71,23 @@ cross-page elements, starting with the header.
 
 Based on the Airproof design, create a custom header with the following elements:
 
-- A centered logo. Ensure to declare the :ref:`website_themes/media/images/use/logo` so that it
-  appears automatically in the header.
+- A centered logo. Ensure to declare the logo so that it appears automatically in the header.
 - A custom shopping cart icon.
 - A login/user as a button.
 - Navigation text to 14px.
 
-You can find the `logo <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/content/branding/airproof-logo.svg>`_,
-`cart icon <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/content/icons/shopping.svg>`_
-and `template illustration <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/wbuilder/template-header-opt.svg>`_.
+You can find the `logo
+<{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/branding/airproof-logo.svg>`_,
+`cart icon <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/icons/shopping.svg>`_ and
+`template illustration
+<{GITHUB_TUTO_PATH}/website_airproof/static/src/img/wbuilder/template-header-opt.svg>`_.
+
+.. seealso::
+   See reference documentation on how to:
+
+   - create :ref:`custom headers <website_themes/layout/header/custom>`,
+   - do a :ref:`website_themes/layout/xpath`,
+   - declare a :ref:`website_themes/media/images/use/logo`.
 
 .. image:: 03_customisation_part1/header.png
 
@@ -89,8 +97,8 @@ and `template illustration <https://github.com/odoo/tutorials/tree/16.0/website_
      <{GITHUB_PATH}/addons/website/views/website_templates.xml>`_.
    - A good practise should be to create different files to manage your custom views and templates.
      For example, everything concerning the general layout (header, footer...) in
-     :file:`website_templates.xml`, everything related to blog in :file:`website_blog_templates.xml`
-     , to event in :file:`website_event_templates.xml`, etc.
+     :file:`website_templates.xml`, everything related to blog in :file:`website_blog_templates.xml`,
+     to event in :file:`website_event_templates.xml`, etc.
    - | To modify the cart icon, you can use an `XPath`.
      | Since this is linked to eCommerce, place it in a new file called
        :file:`website_sale_templates.xml`.
@@ -98,17 +106,12 @@ and `template illustration <https://github.com/odoo/tutorials/tree/16.0/website_
      variables` and :file:`primary variables` (font, colors, size...). You can use them to help you
      with this exercise.
 
-.. seealso::
-   Documentation on :ref:`custom headers <website_themes/layout/header/custom>` and
-   :ref:`website_themes/layout/xpath`.
-
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example for:
 
    - the xml structure and to add the template to the options list on
-     `website_template.xml
-     <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/views/website_templates.xml>`_.
+     `website_template.xml <{GITHUB_TUTO_PATH}/website_airproof/views/website_templates.xml>`_.
    - disable the default header:
 
      .. code-block:: xml
@@ -131,10 +134,12 @@ and `template illustration <https://github.com/odoo/tutorials/tree/16.0/website_
 
    - declare your :file:`website_templates.xml` file along with all the new ones in your
      :file:`manifest`.
-   - make the use of `primaries <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/primary_variables.scss>`_
-     like `header-template`, `navbar-font`, `header-font-size`...
-   - use `bootstrap_overridden <https://github.com/odoo/tutorials/tree/{CURRENT_MAJOR_BRANCH}/website_airproof/static/src/scss/bootstrap_overridden.scss>`_
-     like `$navbar-light-color`, `$navbar-light-hover-color`, `$navbar-padding-y`...
+   - make the use of `primaries
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/primary_variables.scss>`_ like
+     `header-template`, `navbar-font`, `header-font-size`...
+   - use `bootstrap_overridden
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/bootstrap_overridden.scss>`_ like
+     `$navbar-light-color`, `$navbar-light-hover-color`, `$navbar-padding-y`...
    - add some `scss <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/layout/header.scss>`_
      rules.
 
@@ -151,7 +156,11 @@ Based on the Airproof design, create a custom footer with the following elements
 - A section for newsletter subscription.
 - A section for the copyright and social media.
 
-You will find the `icons here <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/content/icons>`_.
+You will find the `icons here <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/icons>`_.
+
+.. seealso::
+   See reference documentation on how to create a :ref:`custom footer
+   <website_themes/layout/footer/custom>` and adapt the :ref:`website_themes/layout/copyright`.
 
 .. image:: 03_customisation_part1/footer.png
 
@@ -159,10 +168,6 @@ You will find the `icons here <https://github.com/odoo/tutorials/tree/16.0/websi
    - You can enable or disable the copyright section via the presets.
    - For the newsletter section to work, you need to install the `website_mass_mailing` application.
 
-.. seealso::
-   Documentation on :ref:`custom footer <website_themes/layout/footer/custom>` and
-   :ref:`website_themes/layout/copyright`.
-
 .. spoiler:: Solutions
 
    To complete this exercise, you need to:
@@ -176,7 +181,7 @@ You will find the `icons here <https://github.com/odoo/tutorials/tree/16.0/websi
          'website_mass_mailing'],
 
    - find the xml structure and add the template to the options list on
-     `website_template.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/website_templates.xml>`_.
+     `website_template.xml <{GITHUB_TUTO_PATH}/website_airproof/views/website_templates.xml>`_.
    - disable the default footer and enable the copyright:
 
      .. code-block:: xml
@@ -191,10 +196,11 @@ You will find the `icons here <https://github.com/odoo/tutorials/tree/16.0/websi
            <field name="active" eval="False"/>
         </record>
 
-   - make the use of `primaries <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/primary_variables.scss>`_
-     like `footer-template`, `footer`, `o-cc4-link`...
-   - add a little scss rule for the `newsletter <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/snippets/newsletter.scss>`_
-     section.
+   - make the use of `primaries
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/primary_variables.scss>`_ like
+     `footer-template`, `footer`, `o-cc4-link`...
+   - add a little scss rule for the `newsletter
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/snippets/newsletter.scss>`_ section.
 
 .. _tutorials/website_theme/customisation_part1/custom_building_blocks:
 
@@ -207,16 +213,25 @@ can freely drag & drop onto different pages.
 Based on the Airproof design, create a custom carousel snippet to showcase drones. Then, add it as
 cover section on your homepage.
 
-#. | Create the snippet template.
-   | And add it to the list of building blocks available in the website builder.
-   | Here you will find the `images <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/snippets/s_airproof_caroussel>`_
-     and `snippet illustration <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg>`_.
+#. Create the snippet template and add it to the list of building blocks available in the website
+   builder. Here you will find the `images
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/snippets/s_airproof_caroussel>`_ and
+   `snippet illustration
+   <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg>`_.
+
+   .. seealso::
+      See reference documentation on how to create a :ref:`custom building blocks
+      <website_themes/building_blocks/custom>`.
 
    .. image:: 03_customisation_part1/custom-building-block.png
 
-#. Add an option in the Website Builder to allow users to choose between a blue or green bubble 
+#. Add an option in the Website Builder to allow users to choose between a blue or green bubble
    shadow.
 
+   .. seealso::
+      See reference documentation on how to add :ref:`snippet options
+      <website_themes/building_blocks/custom/options>`.
+
    .. image:: 03_customisation_part1/custom-building-block-option.png
       :scale: 75%
 
@@ -226,21 +241,20 @@ cover section on your homepage.
    Don't forget to always properly declare your new files in your :file:`__manifest__.py` and follow
    the good :ref:`folder structure <theming/module/structure>` seen previously.
 
-.. seealso::
-   Documentation on :ref:`custom building blocks <website_themes/building_blocks/custom>`.
-
 .. spoiler:: Solutions
 
    To complete this exercise, you need to:
 
    #. Create your template.
 
-      - You can find all the necessary information in
-        `s_airproof_carousel.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/snippets/s_airproof_carousel.xml>`_
-        file and `s_airproof_carousel/000.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/snippets/s_airproof_carousel/000.scss>`_
+      - You can find all the necessary information in `s_airproof_carousel.xml
+        <{GITHUB_TUTO_PATH}/website_airproof/views/snippets/s_airproof_carousel.xml>`_ file and
+        `s_airproof_carousel/000.scss
+        <{GITHUB_TUTO_PATH}/website_airproof/static/src/snippets/s_airproof_carousel/000.scss>`_
         file from our example module.
-      - Record your images in `images.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/images.xml>`_.
-      - Declare your files in the `__manifest__.py <https://github.com/odoo/tutorials/tree/16.0/website_airproof/__manifest__.py>`_.
+      - Record your images in `images.xml <{GITHUB_TUTO_PATH}/website_airproof/data/images.xml>`_.
+      - Declare your files in the `__manifest__.py
+        <{GITHUB_TUTO_PATH}/website_airproof/__manifest__.py>`_.
       - Add it to the list of building blocks. In our example, it looks like this:
 
         .. code-block:: xml
@@ -264,7 +278,7 @@ cover section on your homepage.
               </xpath>
            </template>
 
-   #. Add the option to the website builder. In our example, it looks like this:
+   #. Add the option to the Website Builder. In our example, it looks like this:
 
       .. code-block:: xml
          :caption: ``/website_airproof/views/snippets/s_airproof_carousel.xml``
@@ -283,18 +297,16 @@ cover section on your homepage.
             </xpath>
          </template>
 
-      Additionally, the SCSS related to the bubbles in the
-      `s_airproof_carousel/000.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/snippets/s_airproof_carousel/000.scss>`_
-      file.
+      Additionally, the SCSS related to the bubbles in the `s_airproof_carousel/000.scss
+      <{GITHUB_TUTO_PATH}/website_airproof/static/src/snippets/s_airproof_carousel/000.scss>`_ file.
 
-   #. Add your snippet to the homepage. You can find all the necessary information in the
-      `home.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/pages/home.xml>`_
-      file from our example module.
+   #. Add your snippet to the homepage. You can find all the necessary information in the `home.xml
+      <{GITHUB_TUTO_PATH}/website_airproof/data/pages/home.xml>`_ file from our example module.
 
 .. _tutorials/website_theme/customisation_part1/custom_dynamic_template:
 
-Create a new dynamic snippet template
-=====================================
+Create a new dynamic snippets template
+======================================
 
 | Dynamic snippets are useful building blocks. These allow you to fetch information from the backend
   and display it on the website according to certain filters.
@@ -304,35 +316,41 @@ Create a new dynamic snippet template
 Based on the Airproof design, create a custom template that you will apply to a product dynamic
 snippet on the homepage.
 
-#. | First, create a custom template that will be added to the list of dynamic products templates.
-   | It has to include the following elements:
+#. First, create a custom template that will be added to the list of dynamic products templates. It
+   has to include the following elements:
 
    - Add a :guilabel:`Discover more` link.
    - Add a hover effect on cards.
    - Move the navigation arrows.
 
-   You will find the `icons here <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/img/content/icons>`_.
+   You will find the `icons here <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content/icons>`_.
+
+   .. seealso::
+      See reference documentation on how to :ref:`create a template for dynamic snippets
+      <website_themes/building_blocks/custom/dynamic>`.
 
    .. image:: 03_customisation_part1/custom-template.png
 
+   .. tip::
+      You can verify in the Website Builder that your template appears in the list of available
+      templates for the product dynamic snippet.
+
 #. Then, add a product dynamic snippet with the template you just created to the homepage.
 
-.. tip::
-   You can verify in the website builder that your template appears in the list of available
-   templates for the product dynamic snippet.
-
-.. seealso::
-   Documentation on :ref:`website_themes/building_blocks/custom/dynamic`.
+   .. seealso::
+      See reference documentation on how to :ref:`call a template
+      <website_themes/building_blocks/custom/dynamic/call>`.
 
 .. spoiler:: Solutions
 
    To complete this exercise, you need to:
 
    #. Create your snippet template. You can find all the necessary information in the
-      `options.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/snippets/options.xml>`_
-      file and `caroussel.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/snippets/caroussel.scss>`_
-      file from our example module.
+      `options.xml <{GITHUB_TUTO_PATH}/website_airproof/views/snippets/options.xml>`_
+      file and `caroussel.scss
+      <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/snippets/caroussel.scss>`_ file from our
+      example module.
 
-   #. Apply the template to a product dynamic snippet on the homepage. You can find all the 
-      necessary information in the `home.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/pages/home.xml>`_
-      file from our example module.
+   #. Apply the template to a product dynamic snippet on the homepage. You can find all the
+      necessary information in the `home.xml
+      <{GITHUB_TUTO_PATH}/website_airproof/data/pages/home.xml>`_ file from our example module.

content/developer/tutorials/website_theme/04_customisation_part2.rst

@@ -13,13 +13,17 @@ that can be animated and customized with different colors.
 #. To better align with the website's desired atmosphere, create a custom background shape that the
    client can reuse on different blocks.
 
-   Create your custom shape using the following setup :
+   Create your custom shape using the following setup:
 
-   - | Declare your shape.
-     | You can find the `SVG shape here <https://github.com/odoo/tutorials/tree/16.0/website_airproof/shape-waves.svg>`_.
+   - Declare your shape. You can find the original `SVG shape here
+     <{GITHUB_TUTO_PATH}/website_airproof/shape-waves.svg>`_.
    - Set the base color of the shape to the theme's green, and add it to the list of available
      shapes.
 
+.. seealso::
+   See reference documentation on how to add a :ref:`custom background shapes
+   <website_themes/shapes/bg/custom>`.
+
 .. image:: 04_customisation_part2/shape.png
 
 .. tip::
@@ -28,33 +32,32 @@ that can be animated and customized with different colors.
    | Here, I want it to match my primary color 3 (`#CEF8A1`). Therefore, in the SVG file, you must
      use color 3 from Odoo's default palette (`#F6F6F6`).
 
-.. seealso::
-   Documentation on :ref:`custom background shapes <website_themes/shapes/bg/custom>`.
-
 .. spoiler:: Solutions
 
    Find the solution in our Airproof example for:
 
-   - the shape declaration on `shapes.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/shapes.xml>`_.
+   - the shape declaration on `shapes.xml <{GITHUB_TUTO_PATH}/website_airproof/data/shapes.xml>`_.
    - adding the shape to the list thanks to
-     `primary_variable.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/primary_variables.scss>`_
-     and `option.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/snippets/options.xml>`_.
+     `primary_variable.scss
+     <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/primary_variables.scss>`_ and `option.xml
+     <{GITHUB_TUTO_PATH}/website_airproof/views/snippets/options.xml>`_.
 
 2. Based on the Airproof design, apply the shape you just added to a `Text-Image` building block on
-   the homepage :
+   the homepage:
 
    - Ensure the shape is in the right position.
    - Set its color to the theme's light blue.
 
+.. seealso::
+   See reference documentation on how to use :ref:`background shapes
+   <website_themes/shapes/bg/custom/use>`.
+
 .. image:: 04_customisation_part2/shape-section.png
 
 .. tip::
    Unlike a standard Odoo shapes, when applying a custom shape to a section, replace `web_editor`
    with `illustration` in the shape class.
 
-.. seealso::
-   Documentation on how to use :ref:`background shapes <website_themes/shapes/bg/custom/use>`.
-
 .. spoiler:: Solutions
 
    .. code-block:: xml
@@ -80,7 +83,7 @@ Apply a custom background gradient to your ”*Latest products*” block, transi
 `rgb(11, 142, 230)` to dark blue `rgb(41, 128, 187)`.
 
 .. seealso::
-   Documentation on :doc:`/developer/howtos/website_themes/gradients`.
+   See reference documentation on how to use :doc:`/developer/howtos/website_themes/gradients`.
 
 .. spoiler:: Solutions
 
@@ -112,15 +115,15 @@ Based on the airproof design, animate the following elements:
 
 Adjust animation delays for smoother transitions.
 
-.. image:: 04_customisation_part2/animations.gif
-
 .. seealso::
-   Documentation on :doc:`/developer/howtos/website_themes/animations`.
+   See reference documentation on how to apply :doc:`/developer/howtos/website_themes/animations`.
+
+.. image:: 04_customisation_part2/animations.gif
 
 .. spoiler:: Solutions
 
-   Find the solution in our Airproof example on
-   `home.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/pages/home.xml>`_.
+   Find the solution in our Airproof example on `home.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/data/pages/home.xml>`_.
 
    .. code-block:: xml
       :caption: Image animation
@@ -152,14 +155,11 @@ Forms
 =====
 
 The forms in Odoo are very powerful. They can send emails directly to a personal inbox or integrate
-directly with other Odoo applications.
+directly with other Odoo applications. This is great, as one of your client's main priorities is
+after-sales service. Therefore, the contact form must be properly configured.
 
-This is great, as one of your client's main priorities is after-sales service. Therefore, the
-contact form must be properly configured.
-
-| Based on the airproof design, create a contact page. Remember to disable the default one and add
-  the new page link to the menu.
-| The client has the following requests for their contact form:
+Based on the airproof design, create a contact page. Remember to disable the default one and add the
+new page link to the menu. The client has the following requests for their contact form:
 
 - *Name* and *email address* field.
 - *Company name* field.
@@ -168,25 +168,25 @@ contact form must be properly configured.
 - Form submission must trigger an email.
 - After form submission, the `thank-you message` should remain visible on the contact page.
 
-.. tip::
-   To determine the correct code for your form :
+.. seealso::
+   See reference documentation on how to:
 
-   - | Create a test page via the website builder.
+     - :ref:`deactivate default pages <website_themes/pages/default>`,
+     - :ref:`create a new page <website_themes/pages/theme_pages>`,
+     - :ref:`add a menu item <website_themes/navigation/menu>`,
+     - :doc:`create a form </developer/howtos/website_themes/forms>`.
+
+.. tip::
+   To determine the correct code for your form:
+
+   - | Create a test page via the Website Builder.
      | Drag & drop the building block that interests you and apply the right design.
      | Use the code generated through :guilabel:`Editor HTML/SCSS`.
-   - You can also find the original building block code in Odoo :
+   - You can also find the original building block code in Odoo:
      `odoo/addons/website/views/snippets/s_website_form.xml
      <{GITHUB_PATH}/addons/website/views/snippets/s_website_form.xml>`_.
 
-.. seealso::
-   | For page creation, refer to the documentation on
-
-     - :ref:`website_themes/pages/default`,
-     - :ref:`website_themes/pages/theme_pages`,
-     - :ref:`website_themes/navigation/menu`.
-
-   | Also, see documentation on :doc:`/developer/howtos/website_themes/forms`.
-
 .. spoiler:: Solutions
 
-   Find the solution in our Airproof example on `contact.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/pages/contact.xml>`_.
+   Find the solution in our Airproof example on `contact.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/data/pages/contact.xml>`_.

content/developer/tutorials/website_theme/05_dynamic_templates.rst

@@ -7,29 +7,29 @@ Chapter 5 - Dynamic templates
 Adapt the shop template
 =======================
 
-Now, let's adapt the dynamic sections of the website.
-
-As you may know, some pages such as those for eCommerce are automatically generated. Pages like the
-shop, product, and checkout are automatically generated when the `website_sale` application is
-installed. These template pages pull their displayed information from the backend.
+Now, let's adapt the dynamic sections of the website. As you may know, some pages such as those for
+eCommerce are automatically generated. Pages like the shop, product, and checkout are automatically
+generated when the `website_sale` application is installed. These template pages pull their
+displayed information from the backend.
 
 To modify these pages, we need to edit the standard Odoo template. This can be done using SCSS,
-presets, and especially XPath.
-Locate the standard Odoo template you want to modify and extend it using `XPath`.
+presets, and especially XPath. Locate the standard Odoo template you want to modify and extend it
+using `XPath`. Following the Airproof design, let's begin by modifying the shop view.
 
-Following the Airproof design, let's begin by modifying the shop view.
-
-#. First, locate the standard template in Odoo : :guilabel:`website_sale` -->
-   :guilabel:`templates.xml` --> :guilabel:`id="products"`
+#. First, locate the standard template in Odoo : :menuselection:`website_sale --> templates.xml -->
+   id="products"`.
 #. Apply all changes in your :file:`website_sale_templates.xml` file. Start by:
 
-- Add a banner.
-- Adapt the layout of the e-commerce category filtering on the left.
-- Remove the search bar (you can remove it from both the shop and the product pages at the same
-  time).
-- Move the breadcrumb.
-- Hide the list or grid view option.
-- Create the appropriate design and information for the product cards.
+   - Add a banner.
+   - Adapt the layout of the e-commerce category filtering on the left.
+   - Remove the search bar (you can remove it from both the shop and the product pages at the same
+     time).
+   - Move the breadcrumb.
+   - Hide the list or grid view option.
+   - Create the appropriate design and information for the product cards.
+
+.. image:: 05_dynamic_templates/airproof-shop-page.png
+   :align: center
 
 .. tip::
    - Apply your modifications using presets, XPath and SCSS.
@@ -40,9 +40,10 @@ Following the Airproof design, let's begin by modifying the shop view.
 
 .. spoiler:: Solutions
 
-   Find the solution in our Airproof example on `presets.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/presets.xml>`_,
-   `website_sale_templates.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/website_sale_templates.xml>`_
-   part *shop page*, and `shop.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/pages/shop.scss>`_.
+   Find the solution in our Airproof example on `presets.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/data/presets.xml>`_, `website_sale_templates.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/views/website_sale_templates.xml>`_ part *shop page*, and
+   `shop.scss <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/pages/shop.scss>`_.
 
 .. _tutorials/website_theme/dynamic_templates/product:
 
@@ -50,35 +51,36 @@ Adapt the product page template
 ===============================
 
 The client is thrilled with the shop modifications. Next, let's apply our design to the product
-pages.
+pages. Based on the Airproof design below, adapt a few elements including:
 
-Based on the Airproof design below, adapt a few elements including:
-
-.. TODO: list spacing different than the one above?
 - Remove the search bar (if not done with the previous exercise).
 - Remove the quantity selector, Terms and Conditions, and share icons.
 - Update the :guilabel:`Add to cart` button icon.
-- Insert a title above the product specifications (this section appears only when the product has
-  one variant per attribute).
+- Insert a title above the product specifications (this section appears only when the product
+  has one variant per attribute).
 - Design the appropriate layout for the carousel.
 - Add a title and apply the previously created product template to the `Alternative products`
   section (ensure alternative products are assigned on the product in the backend for this section
   to appear).
-- | Implement a new drop zone below product details, visible on all products.
-  | As a use case, add an `Text-Image` building block using the website builder (e.g.: See product
-    page screenshot with “*Six reasons to buy…*”).
-.. TODO: add screenshot directly here instead?
+- Implement a new drop zone below product details, visible on all products. As a use case, add an
+  `Text-Image` building block using the Website Builder (e.g.: See Airproof product page screenshot
+  with “*Six reasons to buy…*”).
+
+.. seealso::
+   See reference documentation on how to create a :ref:`website_themes/layout/dropzone`.
+
+.. image:: 05_dynamic_templates/airproof-product-page.png
+   :align: center
+
 .. tip::
    - Make your modifications using presets, XPath, and SCSS. Be sure to comment your code properly
      so you can find your way around.
    - The drop zone will be visible on all products. To create a specific dropzone per product, you
      need to add a new field to the product model.
 
-.. seealso::
-   Documentation on :ref:`website_themes/layout/dropzone`.
-
 .. spoiler:: Solutions
 
-   Find the solution in our Airproof example on `presets.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/data/presets.xml>`_,
-   `website_sale_templates.xml <https://github.com/odoo/tutorials/tree/16.0/website_airproof/views/website_sale_templates.xml>`_
-   part *product page*, and `product_page.scss <https://github.com/odoo/tutorials/tree/16.0/website_airproof/static/src/scss/pages/product_page.scss>`_.
+   Find the solution in our Airproof example on `presets.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/data/presets.xml>`_, `website_sale_templates.xml
+   <{GITHUB_TUTO_PATH}/website_airproof/views/website_sale_templates.xml>`_ part *product page*, and
+   `product_page.scss <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/pages/product_page.scss>`_.

content/developer/tutorials/website_theme/06_going_live.rst

@@ -1,5 +1,3 @@
-.. _tutorials/website_theme/going_live:
-
 ======================
 Chapter 6 - Going live
 ======================
@@ -12,19 +10,24 @@ Translations
 Congratulations! Your client has a beautifully designed homepage and contact page, and the eCommerce
 is fully adapted to the Airproof design. Amazing!
 
-Now, the client wants the website translated into French.
+Now, the client wants the website translated into French. To do so:
 
-The easiest way to do this is:
+#. Add French to the website in the settings and enable the language switcher in the header via
+   presets.
+#. Then for the translation itself, you have two options. We shall therefore test both:
 
-#. | Add French to the website in the settings.
-   | Enable the language switcher in the header via presets.
-   .. TODO: why translate the carousel in the backend?
-#. | Translate the content of the homepage carousel through the backend. 
-   | But for the menu, make the translations through the frontend.
-#. | Export the French :file:`.po` file for your Airproof module.
-   | Place it in the :file:`/i18n` translations folder.
-#. If you would like, you can add more translations directly by editing the :file:`.po` file. (using
-   Poedit, your code editor, or another translation tool).
+   - Translate the content of the homepage carousel through the backend.
+   - But for the menu, make the translations through the frontend.
+
+#. Export the French :file:`.po` file for your Airproof module and place it in the :file:`/i18n`
+   translations folder.
+#. If you would like, you can add more translations directly by editing the :file:`.po`
+   file. (Using Poedit software, your code editor, or another translation tool.)
+
+.. seealso::
+   See reference documentation on :ref:`website_themes/translations/backend` and
+   :ref:`website_themes/translations/frontend` translations, and how to
+   :ref:`website_themes/translations/export` them.
 
 .. note::
    - Be careful when using Poedit, as it doesn't handle tags with styles well and generates an
@@ -32,14 +35,10 @@ The easiest way to do this is:
    - To see the changes made directly via the :file:`.po` file, you will need to manually import the
      file.
 
-.. seealso::
-   Documentation on :ref:`website_themes/translations/backend` and :ref:`website_themes/translations/frontend`
-   translations, and how to :ref:`website_themes/translations/export` them.
-
 .. spoiler:: Solutions
 
-   Find the solution in our Airproof example on
-   `i18n/fr_BE.po <https://github.com/odoo/tutorials/tree/16.0/website_airproof/i18n/fr_BE.po>`_.
+   Take a look at what the file `i18n/fr_BE.po <{GITHUB_TUTO_PATH}/website_airproof/i18n/fr_BE.po>`_
+   of our Airproof example looks like.
 
 .. _tutorials/website_theme/going_live/module_import:
 
@@ -47,9 +46,13 @@ Module import
 =============
 
 Great job! The website is now completely finished and your module is ready for installation in the
-client's database.
+client's SaaS database.
 
-Before that, test the import process on a new database.
+Just before that, test the import process on a new database.
+
+.. seealso::
+   See reference documentation on how to :doc:`deploy a module
+   </developer/howtos/website_themes/going_live>` on an Odoo SaaS database.
 
 .. tip::
    - Ensure the `base_import_module` is installed on the database before the module installation.
@@ -57,10 +60,6 @@ Before that, test the import process on a new database.
    - Skip the theme installation steps and start from scratch.
    - Manually import translations after module installation, as they won't apply automatically.
 
-.. seealso::
-   Documentation on how to :doc:`deploy a module <../../howtos/website_themes/going_live>` on an
-   Odoo SaaS database.
-
 Conclusion
 ==========
 
@@ -69,7 +68,6 @@ You've successfully navigated through every stage, from setting up your developm
 launching a fully customized Odoo website theme.
 
 Throughout this journey, you've mastered:
-.. TODO: is it a good practice to add emojis in .rst file?
 
 | ✅ **Theme module creation** - setting up the structure, declaring Odoo and Bootstrap variables.
 | ✅ **Website building** - creating pages, adding media, and constructing dynamic building blocks.
@@ -82,5 +80,5 @@ Throughout this journey, you've mastered:
 | ✅ **Final preparations** - managing translations and ensuring a smooth module import.
 
 | With these skills, you're now ready to design and develop professional, fully customized website
-  themes. Well done! 🎉
+  themes. Well done!
 | We can't wait to see the amazing themes you'll create in the future.