doc: general update and add more information

Updates:
* Refreshing the information on installing and building PySide
* Adding hyperlinks to some files
* Including PySide installation GIF (from Wiki)
* Modifying the CSS to improve the code snippets, :command: role,
  and adding layout for two columns.

New tutorials
* QTableWidget
* QTreeWidget

New documentation
* Differences between Widgets and QML
* IDE information (+ QtCreator GIF from Wiki)
* When to use Shiboken
* file types explanation
* Summary on distributing applications

Change-Id: I5195cc5a4af858bb7aad7891d14562ca07b6df23
Reviewed-by: Christian Tismer <tismer@stackless.com>
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>
(cherry picked from commit a6c7e9d7fd65946762766e40793ba86291bcca1a)
Reviewed-by: Cristian Maureira-Fredes <cristian.maureira-fredes@qt.io>

28 files changed, 867 insertions, 251 deletions

diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
index f6a1c5ae4..a9e7a0b05 100644
--- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
@@ -52,7 +52,7 @@ div.body p.centered {
     margin-top: 25px;
 }
 
-div.warning, div.seealso, div.note {
+div.warning, div.seealso, div.note, div.important {
     padding: 6px 0px 6px 10px;
     border: none;
 }
@@ -61,12 +61,18 @@ div.warning {
     background-color: #ffe4e4;
 }
 
+div.important {
+    background-color: #fef9f3;
+    border-left: 5px solid #feeec8;
+}
+
 div.seealso {
     background-color: #fff2d6;
 }
 
 div.note {
-    background-color: #f3f3f4;
+    background-color: #c5d3f4;
+    border-left: 5px solid #7899f4;
 }
 
 table.docutils {
@@ -346,7 +352,7 @@ tt.descname {
 
 #detailed-description dd > blockquote,
 #detailed-description dd > .field-list {
-    font-family: 'Droid Sans Mono';
+    font-family: 'Droid Sans Mono', monospace;
     font-size: small;
     border-left: 10px solid #e2e2e2;
     padding-left: 10px;
@@ -443,7 +449,7 @@ tt.descname {
 }
 
 #detailed-description .attribute td:nth-child(1) {
-    font-family: 'Droid Sans Mono';
+    font-family: 'Droid Sans Mono', monospace;
 }
 
 /* Qt theme */
@@ -895,7 +901,7 @@ tt.descname {
   /* Legacy iOS */
 }
 @font-face {
-  font-family:'Droid Sans Mono';
+  font-family: 'Droid Sans Mono', monospace;
   font-style:normal;
   font-weight:400;
   src:local("Droid Sans Mono"),local("DroidSansMono"),url(//fonts.gstatic.com/s/droidsansmono/v7/ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4.woff) format("woff")
@@ -1473,7 +1479,7 @@ pre, .LegaleseLeft {
   background-color:#222840;
   color:#fff;
   display:block;
-  font-family:"Droid Sans Mono";
+  font-family: 'Droid Sans Mono', monospace;
   line-height:1.5;
   overflow-x:auto;
   margin-bottom:25px;
@@ -1553,7 +1559,13 @@ pre span.wrap {
 }
 
 span.pre {
-    color: #09102d;
+    color: black;
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #eaeaea;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
 }
 
 span.wrap:hover {
@@ -1579,7 +1591,7 @@ span.wrap:active {
   color:#46a2da
 }
 code,.codelike {
-  font-family:"Droid Sans Mono"
+  font-family: 'Droid Sans Mono', monospace;
 }
 #detailed-description .function dt > code,
 #detailed-description .function dt > em {
@@ -2074,3 +2086,22 @@ table.special td {
     padding-bottom: 2px;
     border-bottom: 4px solid #41cd52;
 }
+
+.command {
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #9cd1a6;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
+}
+
+div.leftside {
+    width: 50%;
+    padding: 0px 50px 0px 0px;
+    float: left;
+}
+
+div.rightside {
+    margin-left: 50%;
+}
diff --git a/sources/pyside6/doc/api.rst b/sources/pyside6/doc/api.rst
index a246dd52c..f2eaf1f11 100644
--- a/sources/pyside6/doc/api.rst
+++ b/sources/pyside6/doc/api.rst
@@ -9,78 +9,35 @@ Basic modules
 These are the main modules that help you build a Widget-based UI.
 
 +---------------------------------------+--------------------------------------------------------+
-| :mod:`Qt Core <PySide6.QtCore>`       | Provides core non-GUI functionality, like signal and   |
+| :mod:`QtCore <PySide6.QtCore>`        | Provides core non-GUI functionality, like signal and   |
 |                                       | slots, properties, base classes of item models,        |
 |                                       | serialization, and more.                               |
 +---------------------------------------+--------------------------------------------------------+
-| :mod:`Qt GUI <PySide6.QtGui>`         | Extends QtCore with GUI functionality: Events, windows |
+| :mod:`QtGui <PySide6.QtGui>`          | Extends QtCore with GUI functionality: Events, windows |
 |                                       | and screens, OpenGL and raster-based 2D painting, as   |
 |                                       | well as images.                                        |
 +---------------------------------------+--------------------------------------------------------+
-| :mod:`Qt Widgets <PySide6.QtWidgets>` | Provides ready to use Widgets for your application,    |
+| :mod:`QtWidgets <PySide6.QtWidgets>`  | Provides ready to use Widgets for your application,    |
 |                                       | including graphical elements for your UI.              |
 +---------------------------------------+--------------------------------------------------------+
 
 QML and Qt Quick
 ----------------
 
-Use these modules to interact with the `QML Language <https://doc.qt.io/qt-5.qmlapplications>`,
+Use these modules to interact with the `QML Language <https://doc.qt.io/qt-5.qmlapplications>`_,
 from Python.
 
 +-------------------------------------------------+----------------------------------------------+
-| :mod:`Qt QML <PySide6.QtQml>`                   | The base Python API to interact with the     |
+| :mod:`QtQml <PySide6.QtQml>`                    | The base Python API to interact with the     |
 |                                                 | module.                                      |
 +-------------------------------------------------+----------------------------------------------+
-| :mod:`Qt Quick <PySide6.QtQuick>`               | Provides classes to embed Qt Quick in Qt     |
+| :mod:`QtQuick <PySide6.QtQuick>`                | Provides classes to embed Qt Quick in Qt     |
 |                                                 | applications.                                |
 +-------------------------------------------------+----------------------------------------------+
-| :mod:`Qt QuickWidgets <PySide6.QtQuickWidgets>` | Provides the QQuickWidget class to embed Qt  |
+| :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`  | Provides the QQuickWidget class to embed Qt  |
 |                                                 | Quick in widget-based applications.          |
 +-------------------------------------------------+----------------------------------------------+
 
-Data visualization
-------------------
-
-Charts, diagrams, animations: these modules provide classes to help you include these elements in
-your UI.
-
-+------------------------------------------------------------+-----------------------------------+
-| :mod:`Qt Charts <PySide6.QtCharts>`                        | Provides a set of easy to use     |
-|                                                            | chart components.                 |
-+------------------------------------------------------------+-----------------------------------+
-| :mod:`Qt DataVisualization <PySide6.QtDataVisualization>`  | Provides a way to visualize data  |
-|                                                            | in 3D as bar, scatter, or surface |
-|                                                            | graphs.                           |
-+------------------------------------------------------------+-----------------------------------+
-
-Multimedia
------------
-
-Audio, video, and hardware interaction: use these modules for multimedia solutions.
-
-+------------------------------------------------------------+-----------------------------------+
-| :mod:`Qt Multimedia <PySide6.QtMultimedia>`                | Provides low-level multimedia     |
-|                                                            | functionality.                    |
-+------------------------------------------------------------+-----------------------------------+
-| :mod:`Qt MultimediaWidgets <PySide6.QtMultimediaWidgets>`  | Provides the widget-based         |
-|                                                            | multimedia API.                   |
-+------------------------------------------------------------+-----------------------------------+
-
-WebEngine
----------
-
-If your project is based on a browser or the features around Web-based applications, use these
-modules to interact with them.
-
-+---------------------------------------------------------+--------------------------------------+
-| :mod:`Qt WebEngineWidgets <PySide6.QtWebEngineWidgets>` | Provides widgets to handle Web       |
-|                                                         | content.                             |
-+---------------------------------------------------------+--------------------------------------+
-| :mod:`Qt WebChannel <PySide6.QtWebChannel>`             | Enables peer-to-peer communication   |
-|                                                         | between a server and a client        |
-|                                                         | (HTML/JavaScript or QML application).|
-+---------------------------------------------------------+--------------------------------------+
-
 All the modules
 ---------------
 
diff --git a/sources/pyside6/doc/deployment.rst b/sources/pyside6/doc/deployment.rst
index 3d6aa218e..4d5f0185c 100644
--- a/sources/pyside6/doc/deployment.rst
+++ b/sources/pyside6/doc/deployment.rst
@@ -1,7 +1,8 @@
+.. _deployment:
+
 |project| Deployment
 ====================
 
-
 Deploying or freezing an application is an important part of a Python project,
 this means to bundle all required resources so that the application finds everything it needs to
 be able to run on a client's machine.
diff --git a/sources/pyside6/doc/gettingstarted-linux.rst b/sources/pyside6/doc/gettingstarted-linux.rst
index e0d3ee8e5..34c22bd4d 100644
--- a/sources/pyside6/doc/gettingstarted-linux.rst
+++ b/sources/pyside6/doc/gettingstarted-linux.rst
@@ -4,28 +4,11 @@ Getting Started on Linux
 Requirements
 ------------
 
- * Qt package from `here`_ or a custom build of Qt (preferably 6.0)
- * A Python interpreter (version Python 3.6+).
-   You can either use the one provided by your OS, or get it
-   from the `official website`_.
  * GCC
- * `CMake`_  version 3.1 or greater
- * Git version 2 or greater
- * `libclang`_ from your system or the prebuilt version from the ``Qt Downloads`` page is
-   recommended. libclang10 is required for 6.0+.
  * ``sphinx`` package for the documentation (optional).
  * Depending on your linux distribution, the following dependencies might also be required:
 
-    * ``libgl-dev``,
-    * ``python-dev``,
-    * ``python-distutils``,
-    * and ``python-setuptools``.
-
-.. _here: https://qt.io/download
-.. _official website: https://www.python.org/downloads/
-.. _CMake: https://cmake.org/download/
-.. _libclang: http://download.qt.io/development_releases/prebuilt/libclang/
-
+    * ``libgl-dev``, ``python-dev``, ``python-distutils``, and ``python-setuptools``.
 
 Building from source
 --------------------
@@ -67,14 +50,14 @@ Checking out the version that we want to build, for example 6.0::
     cd pyside-setup && git checkout 6.0
 
 .. note:: Keep in mind you need to use the same version as your Qt installation.
-          Additionally, ``git checkout -b 6.0  --track origin/6.0`` could be a better option
+          Additionally, :command:`git checkout -b 6.0 --track origin/6.0` could be a better option
           in case you want to work on it.
 
 Building PySide
 ~~~~~~~~~~~~~~~
 
 Check your Qt installation path, to specifically use that version of qmake to build PySide.
-for example, ``/opt/Qt/6.0.0/gcc_64/bin/qmake``.
+for example, :command:`/opt/Qt/6.0.0/gcc_64/bin/qmake`.
 
 Build can take a few minutes, so it is recommended to use more than one CPU core::
 
diff --git a/sources/pyside6/doc/gettingstarted-macOS.rst b/sources/pyside6/doc/gettingstarted-macOS.rst
index f43c67ddf..1033bef78 100644
--- a/sources/pyside6/doc/gettingstarted-macOS.rst
+++ b/sources/pyside6/doc/gettingstarted-macOS.rst
@@ -4,28 +4,13 @@ Getting Started on macOS
 Requirements
 ------------
 
- * Qt package from `here`_ or a custom build of Qt (preferably 6.0)
- * A Python interpreter (version Python 3.6+).
-   You can use the one provided by HomeBrew, or you can get
-   python from the `official website`_.
  * `XCode`_ 8.2 (macOS 10.11), 8.3.3 (macOS 10.12), 9 (macOS 10.13), 10.1 (macOS 10.14)
- * `CMake`_  version 3.1 or greater
- * Git version 2 or greater
- * `libclang`_ from your system or the prebuilt version from the ``Qt Downloads`` page is
-   recommended. libclang10 is required for 6.0+.
  * ``sphinx`` package for the documentation (optional).
  * Depending on your OS, the following dependencies might also be required:
 
-  * ``libgl-dev``,
-  * ``python-dev``,
-  * ``python-distutils``,
-  * and ``python-setuptools``.
+   * ``libgl-dev``, ``python-dev``, ``python-distutils``, and ``python-setuptools``.
 
 .. _XCode: https://developer.apple.com/xcode/
-.. _here: https://qt.io/download
-.. _official website: https://www.python.org/downloads/
-.. _CMake: https://cmake.org/download/
-.. _libclang: http://download.qt.io/development_releases/prebuilt/libclang/
 
 
 Building from source
diff --git a/sources/pyside6/doc/gettingstarted-windows.rst b/sources/pyside6/doc/gettingstarted-windows.rst
index 337715b59..a8c27b17a 100644
--- a/sources/pyside6/doc/gettingstarted-windows.rst
+++ b/sources/pyside6/doc/gettingstarted-windows.rst
@@ -7,30 +7,16 @@ selected when using the online installer.
 Requirements
 ------------
 
- * Qt package from `here`_ or a custom build of Qt (preferably 6.0)
- * A Python interpreter (version Python 3.6+). Preferably get it from the `official website`_.
  * `MSVC2017`_ (or MSVC2019) for Python 3 on Windows,
- * `CMake`_  version 3.1 or greater
- * `Git`_ version 2 or greater
- * `libclang`_ prebuilt version from the ``Qt Downloads`` page is recommended. We recommend
-   libclang10 for 6.0+.
  * `OpenSSL`_ (optional for SSL support, Qt must have been configured using the same SSL library).
- * ``venv`` or ``virtualenv`` is strongly recommended, but optional.
  * ``sphinx`` package for the documentation (optional).
 
 .. note:: Python 3.8.0 was missing some API required for PySide/Shiboken so it's not possible
     to use it for a Windows build.
 
-
-.. _here: https://qt.io/download
-.. _official website: https://www.python.org/downloads/
 .. _MSVC2017: https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools
-.. _CMake: https://cmake.org/download/
-.. _Git: https://git-scm.com/download/win
-.. _libclang: http://download.qt.io/development_releases/prebuilt/libclang/
 .. _OpenSSL: https://sourceforge.net/projects/openssl/
 
-
 Building from source on Windows 10
 ----------------------------------
 
diff --git a/sources/pyside6/doc/gettingstarted.rst b/sources/pyside6/doc/gettingstarted.rst
index c2392d07d..1baac0c37 100644
--- a/sources/pyside6/doc/gettingstarted.rst
+++ b/sources/pyside6/doc/gettingstarted.rst
@@ -1,24 +1,28 @@
 |project| Getting Started
 ==========================
 
-This page is focused on building |project| from source, if you just want to install |pymodname|
-with ``pip`` you need to run::
+.. important:: This page is focused on building |project| **from source**.
+  If you just want to install |pymodname|, you need to run: :command:`pip install pyside6`.
 
-    pip install pyside6
-
-for more details, refer to our `Quick Start`_ guide. Additionally, you can
-check the :ref:`FAQ <faq>` related to the project.
+  For more details, refer to our `Quick Start`_ guide. Additionally, you can check the
+  :ref:`FAQ <faq>` related to the project.
 
 .. _Quick Start: quickstart.html
 
 General Requirements
 --------------------
 
- * **Python**: 3.6+
- * **Qt:** 6.0+ is recommended
+The following prerequisites must be installed before you build |project|.
+On **Linux** you might get them with your operating system package manager, on **macOS**
+you might get them with ``brew``, and on **Windows** you can download the installer from each
+website.
+
+ * **Python**: 3.6+ `[official website] <https://www.python.org/downloads/>`_
+ * **Qt:** 6.0+ `[online installer] <https://download.qt.io/official_releases/online_installers/>`_
+ * **CMake:** 3.18+ `[official website] <https://cmake.org/download/>`_
+ * **Git:** 2.0+. `[official website] <https://git-scm.com/downloads>`_
  * **libclang:** The libclang library, recommended: version 10 for 6.0+.
-   Prebuilt versions of it can be `downloaded here`_.
- * **CMake:** 3.1+ is needed.
+   Prebuilt versions for each OS can be `downloaded here`_.
 
 .. _downloaded here: http://download.qt.io/development_releases/prebuilt/libclang/
 
@@ -27,18 +31,27 @@ Guides per platform
 
 You can refer to the following pages for platform specific instructions:
 
- * `Windows`_
- * `macOS`_
- * `Linux`_
- * Mobile platforms (iOS/Android) **(no support)**
- * Embedded platforms **(no official support)**
+.. raw:: html
+
+    <table class="special">
+        <colgroup>
+            <col style="width: 200px" />
+            <col style="width: 200px" />
+            <col style="width: 200px" />
+        </colgroup>
+        <tr>
+            <td><a href="gettingstarted-windows.html"><p><strong>Windows</strong></p></a></td>
+            <td><a href="gettingstarted-macOS.html"><p><strong>macOS</strong></p></a></td>
+            <td><a href="gettingstarted-linux.html"><p><strong>Linux</strong></p></a></td>
+        </tr>
+    </table>
 
-   .. note:: Most Linux-based embedded OS provide PySide with their official
-             package manager (e.g. `Raspbian`_ and `ArchlinuxARM`_).
+.. important:: The |project| does not yet support WebAssembly and the mobile operating
+      systems (Android or iOS).
+
+  Most Linux-based embedded OS provide PySide with their official
+  package manager (for example, `Raspbian`_ and `ArchlinuxARM`_).
 
-.. _Windows: gettingstarted-windows.html
-.. _macOS: gettingstarted-macOS.html
-.. _Linux: gettingstarted-linux.html
 .. _Raspbian: https://www.raspbian.org/
 .. _ArchlinuxARM: https://archlinuxarm.org/
 
@@ -49,20 +62,20 @@ A normal building command will look like this::
                             --debug \
                             --build-tests \
                             --parallel=8 \
-                            --make-spec=ninja \
                             --verbose-build \
                             --module-subset=Core,Gui,Widgets
 
 Which will build and install the project with **debug** symbols, including the **tests**,
-using **ninja** (instead of make), and considering only the **module subset** of QtCore, QtGUI
-and QtWidgets.
+using **ninja** (instead of make), and considering only the **module subset** of
+:mod:`QtCore <PySide6.QtCore>`, :mod:`QtGui <PySide6.QtGui>`, and
+:mod:`QtWidgets <PySide6.QtWidgets`.
 
 Other important options to consider are:
  * ``--cmake``, to specify the path to the cmake binary,
  * ``--reuse-build``, to rebuild only the modified files,
  * ``--openssl=/path/to/openssl/bin``, to use a different path for OpenSSL,
- * ``--standalone``, to copy over the Qt libraries into the final package
-   to make it work on other machines,
+ * ``--standalone``, to copy over the Qt libraries into the final package to make it work on other
+   machines,
  * ``--doc-build-online``, to build documentation using the online template.
 
 Testing the installation
@@ -70,17 +83,17 @@ Testing the installation
 
 Once the installation finishes, you will be able to execute any of our examples::
 
-    python examples/widgets/widgets/tetrix.py
+  python examples/widgets/widgets/tetrix.py
 
 Running Tests
 -------------
 
 Using the ``--build-tests`` option will enable us to run all the auto tests inside the project::
 
-    python testrunner.py test > testlog.txt
+  python testrunner.py test > testlog.txt
 
 .. note:: On Windows, don't forget to have qmake in your path
-   (``set PATH=E:\Path\to\Qt\6.0.0\msvc2019_64\bin;%PATH%``)
+   (:command:`set PATH=E:\\\Path\\\to\\\Qt\\\6.0.0\\\msvc2019_64\\\bin;%PATH%`)
 
 You can also run a specific test (for example ``qpainter_test``) by running::
 
@@ -98,7 +111,7 @@ The process of parsing Qt headers to generate the PySide API documentation can t
 minutes, this means that modifying a specific section of the rst files we currently have, might
 become a hard task.
 
-For this, you can install ``sphinx`` on a virtual environment, and execute the following command::
+For this, you can install :command:`sphinx` on a virtual environment, and execute the following command::
 
     python setup.py build_rst_docs
 
@@ -142,8 +155,8 @@ directory, and run::
 
     make apidoc
 
-.. note:: The ``apidoc`` make target builds offline documenation in QCH (Qt Creator Help) format
-   by default. You can switch to building for the online use with the ``--doc-build-online``
+.. note:: The :command:`apidoc` make target builds offline documenation in QCH (Qt Creator Help)
+   format by default. You can switch to building for the online use with the ``--doc-build-online``
    configure option.
 
 Finally, you will get a ``html`` directory containing all the generated documentation. The offline
@@ -159,7 +172,7 @@ a standalone application for viewing QCH files.
 To view the QCH using Qt Creator, following the instructions outlined in
 `Using Qt Creator Help Mode <https://doc.qt.io/qtcreator/creator-help.html>`_. If you chose to
 use Qt Assistant instead, use the following command to register the QCH file before launching
-Qt Assistant:
+Qt Assistant::
 
     assistant -register PySide.qch
 
@@ -189,10 +202,10 @@ A set of tools can be found under the ``tools/`` directory inside the ``pyside-s
 * ``debug_windows.py``: This script can be used to find out why PySide modules
   fail to load with various DLL errors like Missing DLL or Missing symbol in DLL.
 
-  You can think of it as a Windows version of ``ldd`` / ``LD_DEBUG``.
+  You can think of it as a Windows version of :command:`ldd` / ``LD_DEBUG``.
 
-  Underneath it uses the ``cdb.exe`` command line debugger, and the ``gflags.exe`` tool, both
-  installed with the latest Windows Kit.
+  Underneath, it uses the :command:`cdb.exe` command line debugger and the :command:`gflags.exe`
+  tool, which are installed with the latest Windows Kit.
 
   The aim is to help developers debug issues that they may encounter using the PySide imports on
   Windows. The user should then provide the generated log file.
@@ -211,7 +224,6 @@ A set of tools can be found under the ``tools/`` directory inside the ``pyside-s
 .. note:: The script relies on BeautifulSoup to parse the content and generate a list of the
    missing bindings.
 
-
 .. _repository: https://github.com/liyanage/macosx-shell-scripts/
 .. _`wiki page`: https://wiki.qt.io/Qt_for_Python_Missing_Bindings
 .. _BeautifulSoup: https://www.crummy.com/software/BeautifulSoup/
diff --git a/sources/pyside6/doc/modules.rst b/sources/pyside6/doc/modules.rst
index 8eee957a9..9f7ef31c3 100644
--- a/sources/pyside6/doc/modules.rst
+++ b/sources/pyside6/doc/modules.rst
@@ -11,45 +11,45 @@ Qt Modules
    :widths: 150, 150
    :align: left
 
-   * - :mod:`Qt Concurrent <PySide6.QtConcurrent>`
+   * - :mod:`QtConcurrent <PySide6.QtConcurrent>`
         Provides high-level APIs that make it possible
         to write multi-threaded programs without using low-level threading
         primitives such as mutexes, read-write locks, wait conditions, or semaphores.
-     - :mod:`Qt Core <PySide6.QtCore>`
+     - :mod:`QtCore <PySide6.QtCore>`
         Provides core non-GUI functionality.
-   * - :mod:`Qt Gui <PySide6.QtGui>`
+   * - :mod:`QtGui <PySide6.QtGui>`
         Extends QtCore with GUI functionality.
-     - :mod:`Qt Help <PySide6.QtHelp>`
+     - :mod:`QtHelp <PySide6.QtHelp>`
         Provides classes for integrating online documentation in applications.
-   * - :mod:`Qt Network <PySide6.QtNetwork>`
+   * - :mod:`QtNetwork <PySide6.QtNetwork>`
         Offers classes that let you to write TCP/IP clients and servers.
-     - :mod:`Qt OpenGL <PySide6.QtOpenGL>`
+     - :mod:`QtOpenGL <PySide6.QtOpenGL>`
         Offers classes that make it easy to use OpenGL in Qt applications.
-   * - :mod:`Qt OpenGLFunctions <PySide6.QtOpenGLFunctions>`
+   * - :mod:`QtOpenGLFunctions <PySide6.QtOpenGLFunctions>`
         The QOpenGLFunctions class provides cross-platform access to the OpenGL ES 2.0 API.
-     - :mod:`Qt OpenGLWidgets <PySide6.QtOpenGLWidgets>`
+     - :mod:`QtOpenGLWidgets <PySide6.QtOpenGLWidgets>`
         The QOpenGLWidget class is a widget for rendering OpenGL graphics.
-   * - :mod:`Qt PrintSupport <PySide6.QtPrintSupport>`
+   * - :mod:`QtPrintSupport <PySide6.QtPrintSupport>`
         Provides extensive cross-platform support for printing.
-     - :mod:`Qt Qml <PySide6.QtQml>`
+     - :mod:`QtQml <PySide6.QtQml>`
         Python API for Qt QML.
-   * - :mod:`Qt Quick <PySide6.QtQuick>`
+   * - :mod:`QtQuick <PySide6.QtQuick>`
         Provides classes for embedding Qt Quick in Qt applications.
-     - :mod:`Qt QuickControls2 <PySide6.QtQuickControls2>`
+     - :mod:`QtQuickControls2 <PySide6.QtQuickControls2>`
         Provides classes for setting up the controls from C++.
-   * - :mod:`Qt QuickWidgets <PySide6.QtQuickWidgets>`
+   * - :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`
         Provides the QQuickWidget class for embedding Qt Quick in widget-based applications.
-     - :mod:`Qt Sql <PySide6.QtSql>`
+     - :mod:`QtSql <PySide6.QtSql>`
         Helps you provide seamless database integration to your Qt applications.
-   * - :mod:`Qt Svg <PySide6.QtSvg>`
+   * - :mod:`QtSvg <PySide6.QtSvg>`
         Provides classes for displaying the contents of SVG files.
-     - :mod:`Qt SvgWidgets <PySide6.QtSvgWidgets>`
+     - :mod:`QtSvgWidgets <PySide6.QtSvgWidgets>`
         Provides a widget that is used to display the contents of SVG files.
-   * - :mod:`Qt Test <PySide6.QtTest>`
+   * - :mod:`QtTest <PySide6.QtTest>`
         Provides classes for unit testing Qt applications and libraries.
-     - :mod:`Qt UiTools <PySide6.QtUiTools>`
+     - :mod:`QtUiTools <PySide6.QtUiTools>`
         Provides classes to handle forms created with Qt Designer.
-   * - :mod:`Qt Widgets <PySide6.QtWidgets>`
+   * - :mod:`QtWidgets <PySide6.QtWidgets>`
         Extends Qt GUI with C++ widget functionality.
-     - :mod:`Qt Xml <PySide6.QtXml>`
+     - :mod:`QtXml <PySide6.QtXml>`
         Provides C++ implementations of SAX and DOM.
diff --git a/sources/pyside6/doc/quickstart.rst b/sources/pyside6/doc/quickstart.rst
index abff035a5..14d1c03a0 100644
--- a/sources/pyside6/doc/quickstart.rst
+++ b/sources/pyside6/doc/quickstart.rst
@@ -11,38 +11,39 @@ Before you can install |project|, first you must install the following software:
    `venv <https://docs.python.org/3/library/venv.html>`_ or
    `virtualenv <https://virtualenv.pypa.io/en/latest>`_
 
-Creating and activating an environment
---------------------------------------
-
-You can do this by running the following on a terminal::
+Installation
+------------
 
-  $ python -m venv env/       # Your binary is maybe called 'python3'
-  $ source env/bin/activate   # for Linux and macOS
-  $ env\Scripts\activate.bat  # for Windows
 
+.. raw:: html
 
+    <img src="https://qt-wiki-uploads.s3.amazonaws.com/images/8/8a/Pyside6_install.gif"
+         style="float: right; width: 35%; padding-left: 20px;"
+         alt="PySide6 installation animation" />
 
-Installation
-------------
+* **Creating and activating an environment**
+  You can do this by running the following on a terminal:
 
-Now you are ready to install the |project| packages using ``pip``.
-From the terminal, run the following command::
+  * :command:`python -m venv env`, (Your Python executable might be called ``python3``)
+  * :command:`source env/bin/activate`   for Linux and macOS
+  * :command:`env\\\Scripts\\\activate.bat`  for Windows
 
-    # For the latest version on PyPi
-    pip install PySide6
+* **Installation**
 
-    # For a specific version
-    pip install PySide6==6.0
+  Now you are ready to install the |project| packages using ``pip``.
+  From the terminal, run the following command:
 
-or::
+  * :command:`pip install pyside6`, for the latest version.
+  * :command:`pip install pyside6==6.0`, for the version ``6.0`` specifically.
+  * It is also possible to install a specific snapshot from our servers.
+    To do so, you can use the following command::
 
-    pip install --index-url=http://download.qt.io/snapshots/ci/pyside/6.0.0/latest pyside6 --trusted-host download.qt.io
+      pip install --index-url=http://download.qt.io/snapshots/ci/pyside/6.0.0/latest pyside6 --trusted-host download.qt.io
 
-Test your Installation
-----------------------
+* **Test your installation**
 
-Now that you have |project| installed, you can test your setup by running the following Python
-constructs to print version information::
+  Now that you have |project| installed, test your setup by running the following Python
+  constructs to print version information::
 
     import PySide6.QtCore
 
@@ -52,7 +53,6 @@ constructs to print version information::
     # Prints the Qt version used to compile PySide6
     print(PySide6.QtCore.__version__)
 
-
 Create a Simple Application
 ---------------------------
 
@@ -60,54 +60,61 @@ Your |project| setup is ready. You can explore it further by developing a simple
 that prints "Hello World" in several languages. The following instructions will
 guide you through the development process:
 
-1. Create a new file named :code:`hello_world.py`, and add the following imports to it.::
+* **Imports**
+
+  Create a new file named :code:`hello_world.py`, and add the following imports to it.::
 
-        import sys
-        import random
-        from PySide6 import QtCore, QtWidgets, QtGui
+    import sys
+    import random
+    from PySide6 import QtCore, QtWidgets, QtGui
 
   The |pymodname| Python module provides access to the Qt APIs as its submodule.
   In this case, you are importing the :code:`QtCore`, :code:`QtWidgets`, and :code:`QtGui` submodules.
 
-2. Define a class named :code:`MyWidget`, which extends QWidget and includes a QPushButton and
-   QLabel.::
+* **Main Class**
+
+  Define a class named :code:`MyWidget`, which extends QWidget and includes a QPushButton and
+  QLabel.::
 
-        class MyWidget(QtWidgets.QWidget):
-            def __init__(self):
-                super().__init__()
+    class MyWidget(QtWidgets.QWidget):
+        def __init__(self):
+            super().__init__()
 
-                self.hello = ["Hallo Welt", "Hei maailma", "Hola Mundo", "Привет мир"]
+            self.hello = ["Hallo Welt", "Hei maailma", "Hola Mundo", "Привет мир"]
 
-                self.button = QtWidgets.QPushButton("Click me!")
-                self.text = QtWidgets.QLabel("Hello World",
-                                             alignment=QtCore.Qt.AlignCenter)
+            self.button = QtWidgets.QPushButton("Click me!")
+            self.text = QtWidgets.QLabel("Hello World",
+                                         alignment=QtCore.Qt.AlignCenter)
 
-                self.layout = QtWidgets.QVBoxLayout()
-                self.layout.addWidget(self.text)
-                self.layout.addWidget(self.button)
-                self.setLayout(self.layout)
+            self.layout = QtWidgets.QVBoxLayout(self)
+            self.layout.addWidget(self.text)
+            self.layout.addWidget(self.button)
 
-                self.button.clicked.connect(self.magic)
+            self.button.clicked.connect(self.magic)
 
-            @QtCore.Slot()
-            def magic(self):
-                self.text.setText(random.choice(self.hello))
+        @QtCore.Slot()
+        def magic(self):
+            self.text.setText(random.choice(self.hello))
 
   The MyWidget class has the :code:`magic` member function that randomly chooses an item from the
   :code:`hello` list. When you click the button, the :code:`magic` function is called.
 
-3. Now, add a main function where you instantiate :code:`MyWidget` and :code:`show` it.::
+* **Application execution**
+
+  Now, add a main function where you instantiate :code:`MyWidget` and :code:`show` it.::
+
+    if __name__ == "__main__":
+        app = QtWidgets.QApplication([])
 
-        if __name__ == "__main__":
-            app = QtWidgets.QApplication([])
+        widget = MyWidget()
+        widget.resize(800, 600)
+        widget.show()
 
-            widget = MyWidget()
-            widget.resize(800, 600)
-            widget.show()
+        sys.exit(app.exec_())
 
-            sys.exit(app.exec_())
+  Run your example by writing the following command: :command:`python hello_world.py`.
 
-Run your example. Try clicking the button at the bottom to see which greeting you get.
+  Try clicking the button at the bottom to see which greeting you get.
 
-.. image:: pyside-examples/images/screenshot_hello.png
-   :alt: Hello World application
+  .. image:: pyside-examples/images/screenshot_hello.png
+     :alt: Hello World application
diff --git a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
index bd45f1f64..e81e4964a 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/clickablebutton.rst
@@ -1,5 +1,5 @@
-A Simple Button Tutorial
-************************
+Using a Simple Button
+=====================
 
 In this tutorial, we'll show you how to handle **signals and slots**
 using Qt for Python. **Signals and slots** is a Qt feature that lets
diff --git a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
index 04f6ffa5d..da3b336cd 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/dialog.rst
@@ -1,5 +1,5 @@
-Creating a Simple PySide6 Dialog Application
-*********************************************
+Creating a Dialog Application
+=============================
 
 This tutorial shows how to build a simple dialog with some
 basic widgets. The idea is to let users provide their name
@@ -43,7 +43,7 @@ just sets the title of the dialog window. In `main()`, you can see
 that we are creating a *Form object* and showing it to the world.
 
 Create the Widgets
-===================
+------------------
 
 We are going to create two widgets: a `QLineEdit` where users can
 enter their name, and a `QPushButton` that prints the contents of
@@ -59,7 +59,7 @@ It's obvious from the code that both widgets will show the corresponding
 texts.
 
 Create a layout to organize the Widgets
-========================================
+---------------------------------------
 
 Qt comes with layout-support that helps you organize the widgets
 in your application. In this case, let's use `QVBoxLayout` to lay out
@@ -68,18 +68,14 @@ after creating the widgets:
 ::
 
     # Create layout and add widgets
-    layout = QVBoxLayout()
+    layout = QVBoxLayout(self)
     layout.addWidget(self.edit)
     layout.addWidget(self.button)
-    # Set dialog layout
-    self.setLayout(layout)
 
-So, we create the layout, add the widgets with `addWidget()`,
-and finally we say that our **Form** will have our `QVBoxLayout`
-as its layout.
+So, we create the layout, add the widgets with `addWidget()`.
 
 Create the function to greet and connect the Button
-====================================================
+---------------------------------------------------
 
 Finally, we just have to add a function to our custom **Form**
 and *connect* our button to it. Our function will be a part of
@@ -106,7 +102,7 @@ Once executed, you can enter your name in the `QLineEdit` and watch
 the console for greetings.
 
 Complete code
-=============
+-------------
 
 Here is the complete code for this tutorial:
 ::
diff --git a/sources/pyside6/doc/tutorials/basictutorial/qml.rst b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
index c972daa00..15fd1da75 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/qml.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/qml.rst
@@ -1,5 +1,5 @@
-Your First Application Using PySide6 and QtQuick/QML
-*****************************************************
+Your First QtQuick/QML Application
+**********************************
 
 QML is a declarative language that lets you develop applications
 faster than with traditional languages. It is ideal for designing the
diff --git a/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png
new file mode 100644
index 000000000..8eb1398a7
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.png
diff --git a/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst
new file mode 100644
index 000000000..a041e4116
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/tablewidget.rst
@@ -0,0 +1,97 @@
+Displaying Data Using a Table Widget
+====================================
+
+If you want to display data arranged in a table, use a ``QTableWidget`` to do
+so, without dealing with much configuration.
+
+Notice that using a ``QTableWidget`` is not the only path to display
+information in tables. You can also create a data model and display it using
+a ``QTableView``, but that is not in the scope of this tutorial.
+
+.. note:: This Widget is a ready-to-use version of something you can customize
+   further on. To know more about the Model/View architecture in Qt, refer to
+   its `official documentation <https://doc.qt.io/qt-6/model-view-programming.html>`_.
+
+1. Import ``QTableWidget``, ``QTableWidgetItem``, and ``QColor`` to display
+   background colors:
+
+   .. code-block:: python
+
+       import sys
+       from PySide6.QtGui import QColor
+       from PySide6.QtWidgets import (QApplication, QTableWidget,
+                                      QTableWidgetItem)
+
+2. Create a simple data model containing the list of names and hex codes for
+   different colors:
+
+   .. code-block:: python
+
+       colors = [("Red", "#FF0000"),
+                 ("Green", "#00FF00"),
+                 ("Blue", "#0000FF"),
+                 ("Black", "#000000"),
+                 ("White", "#FFFFFF"),
+                 ("Electric Green", "#41CD52"),
+                 ("Dark Blue", "#222840"),
+                 ("Yellow", "#F9E56d")]
+
+3. Define a function to translate the hex code into an RGB equivalent:
+
+   .. code-block:: python
+
+       def get_rgb_from_hex(code):
+           code_hex = code.replace("#", "")
+           rgb = tuple(int(code_hex[i:i+2], 16) for i in (0, 2, 4))
+           return QColor.fromRgb(rgb[0], rgb[1], rgb[2])
+
+4. Initialize the ``QApplication`` singleton:
+
+   .. code-block:: python
+
+       app = QApplication()
+
+5. Configure the ``QTableWidget`` to have a number of rows equivalent
+   to the amount of items from the ``colors`` structure, and a number of
+   columns with the members of one color entry, plus one.
+   You can set the column name using the ``setHorizontalHeaderLabels`` as
+   described below:
+
+   .. code-block:: python
+
+       table = QTableWidget()
+       table.setRowCount(len(colors))
+       table.setColumnCount(len(colors[0]) + 1)
+       table.setHorizontalHeaderLabels(["Name", "Hex Code", "Color"])
+
+   .. note:: the reason of using ``+ 1`` is to include a new column where
+      we can display the color.
+
+6. Iterate the data structure, create the ``QTableWidgetItems`` instances, and
+   add them into the table using a ``x, y`` coordinate. Here the data is being
+   assigned row-per-row:
+
+   .. code-block:: python
+
+       for i, (name, code) in enumerate(colors):
+           item_name = QTableWidgetItem(name)
+           item_code = QTableWidgetItem(code)
+           item_color = QTableWidgetItem()
+           item_color.setBackground(get_rgb_from_hex(code))
+           table.setItem(i, 0, item_name)
+           table.setItem(i, 1, item_code)
+           table.setItem(i, 2, item_color)
+
+7. Show the table and execute the ``QApplication``.
+
+   .. code-block:: python
+
+       table.show()
+       sys.exit(app.exec_())
+
+
+The final application will look like this:
+
+.. image:: tablewidget.png
+    :alt: QTableWidget example
+    :align: center
diff --git a/sources/pyside6/doc/tutorials/basictutorial/treewidget.png b/sources/pyside6/doc/tutorials/basictutorial/treewidget.png
new file mode 100644
index 000000000..077eb5830
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/treewidget.png
diff --git a/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst
new file mode 100644
index 000000000..26f29e1f0
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/basictutorial/treewidget.rst
@@ -0,0 +1,79 @@
+Displaying Data Using a Tree Widget
+===================================
+
+If you want to display data arranged in a tree, use a ``QTreeWidget`` to do so.
+
+Notice that using a ``QTreeWidget`` is not the only path to display
+information in trees. You can also create a data model and display it using a
+``QTreeView``, but that is not in the scope of this tutorial.
+
+.. note:: This Widget is a ready-to-use version of something you can customize
+   further on. To know more about the Model/View architecture in Qt, refer to
+   its `official documentation <https://doc.qt.io/qt-6/model-view-programming.html>`_.
+
+1. Import ``QTreeWidget`` and ``QTreeWidgetItem`` for this application:
+
+   .. code-block:: python
+
+       import sys
+       from PySide6.QtWidgets import QApplication, QTreeWidget, QTreeWidgetItem
+
+2. Define a dictionary with project structures to display the information as a
+   tree, with files belonging to each project:
+
+   .. code-block:: python
+
+       data = {"Project A": ["file_a.py", "file_a.txt", "something.xls"],
+               "Project B": ["file_b.csv", "photo.jpg"],
+               "Project C": []}
+
+3. Initialize the ``QApplication`` singleton:
+
+   .. code-block:: python
+
+       app = QApplication()
+
+4. Configure the ``QTreeWidget`` to have two columns, one for the item name,
+   and the other for item type information of the files in the project
+   directories.
+   You can set the column name with the ``setHeaderLabels`` as described below:
+
+   .. code-block:: python
+
+       tree = QTreeWidget()
+       tree.setColumnCount(2)
+       tree.setHeaderLabels(["Name", "Type"])
+
+5. Iterate the data structure, create the ``QTreeWidgetItem`` elements, and add
+   the corresponding children to each parent.
+   We also extract the extension name for only the files and add them
+   into the second column.
+   In the constructor, you can see that each element (``QTreeWidgetItem``) is
+   added to different columns of the tree (``QTreeWidget``).
+
+   .. code-block:: python
+
+       items = []
+       for key, values in data.items():
+           item = QTreeWidgetItem([key])
+           for value in values:
+               ext = value.split(".")[-1].upper()
+               child = QTreeWidgetItem([value, ext])
+               item.addChild(child)
+           items.append(item)
+
+       tree.insertTopLevelItems(0, items)
+
+7. Show the tree and execute the ``QApplication``.
+
+   .. code-block:: python
+
+       tree.show()
+       sys.exit(app.exec_())
+
+
+The final application will look like this:
+
+.. image:: treewidget.png
+    :alt: QTreeWidget example
+    :align: center
diff --git a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
index 8deef1d7f..6c83c1fbf 100644
--- a/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
+++ b/sources/pyside6/doc/tutorials/basictutorial/widgetstyling.rst
@@ -1,5 +1,7 @@
-Widget Styling
-**************
+.. _widgetstyling:
+
+Styling the Widgets Application
+===============================
 
 Qt Widgets application use a default theme depending on the platform.
 In some cases, there are system-wide configurations that modify the Qt theme,
@@ -81,7 +83,7 @@ page.
 .. _`Qt Style Sheet Examples`: https://doc.qt.io/qt-5/stylesheet-examples.html
 
 Qt Style Sheets
-===============
+---------------
 
 .. warning::
 
diff --git a/sources/pyside6/doc/tutorials/index.rst b/sources/pyside6/doc/tutorials/index.rst
index ca7ae4963..51ff02401 100644
--- a/sources/pyside6/doc/tutorials/index.rst
+++ b/sources/pyside6/doc/tutorials/index.rst
@@ -1,26 +1,57 @@
 |project| Tutorials
 ====================
 
-A collection of tutorials with "walkthrough" guides are
-provided with |project| to help new users get started. These
-documents were ported from C++ to Python and cover a range of topics,
-from basic use of widgets to step-by-step tutorials that show how an
+A collection of tutorials with walkthrough guides are
+provided with |project| to help new users get started.
+
+Some of these documents were ported from C++ to Python and cover a range of
+topics, from basic use of widgets to step-by-step tutorials that show how an
 application is put together.
 
-Basic tutorials
----------------
+Before you start
+----------------
+
+If you have not installed PySide yet, remember to check the
+`Quick Start <../quickstart.html>`_ section.
+
+.. toctree::
+    :maxdepth: 1
+
+    pretutorial/whatisqt.rst
+    pretutorial/whichide.rst
+    pretutorial/whatisshiboken.rst
+    pretutorial/typesoffiles.rst
+    pretutorial/distribution.rst
+
+Qt Widgets: Basic tutorials
+---------------------------
+
+If you want to see the available widgets in action, you can check the
+`Qt Widget Gallery <https://doc.qt.io/qt-6/gallery.html>`_ to learn their
+names and how they look like.
 
 .. toctree::
     :maxdepth: 1
 
     basictutorial/widgets.rst
-    basictutorial/qml.rst
     basictutorial/clickablebutton.rst
     basictutorial/dialog.rst
+    basictutorial/tablewidget.rst
+    basictutorial/treewidget.rst
     basictutorial/uifiles.rst
     basictutorial/qrcfiles.rst
     basictutorial/widgetstyling.rst
 
+
+Quick/QML: Basic tutorials
+--------------------------
+
+.. toctree::
+    :maxdepth: 1
+
+    basictutorial/qml.rst
+    qmlintegration/qmlintegration.rst
+
 Real use-cases applications
 ---------------------------
 
@@ -28,7 +59,6 @@ Real use-cases applications
     :maxdepth: 1
 
     qmlapp/qmlapplication.rst
-    qmlintegration/qmlintegration.rst
     qmlsqlintegration/qmlsqlintegration.rst
 ..
     datavisualize/index.rst
diff --git a/sources/pyside6/doc/tutorials/pretutorial/distribution.rst b/sources/pyside6/doc/tutorials/pretutorial/distribution.rst
new file mode 100644
index 000000000..f55c3684a
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/distribution.rst
@@ -0,0 +1,69 @@
+.. _distribution:
+
+Distributing Your Application to Other Systems/Platforms
+========================================================
+
+After developing a couple of applications, you might want to distribute them to
+other users. In case you do not have much experience with Python packages, you
+might have even asked: *How do I create a Python executable?*.
+
+If you come from compiled programming languages, deployment is something
+almost trivial, but for Python is a bit difficult.
+
+The deployment process for Python applications is called, "freezing", which is
+distributing your virtual environment content to other users.
+
+.. important:: As Python does not support WebAssembly and mobile platforms,
+   such as Android and iOS, you cannot deploy applications to these platforms
+   directly, and you require advanced processes to do so.
+
+.. note:: For embedded systems, you currently need to build |project| for your
+   target platform, and deploy the installation alongside your application.
+
+Reproducible deployment
+-----------------------
+
+A common approach is to only provide a ``requirements.txt`` file, where you
+state your dependencies. Users would need to install them from there
+to run your Application.
+
+For example, imagine I have a project with two dependencies, ``module_a`` and
+``module_b``, which I use in my ``main.py`` file. So my structure is:
+
+.. code-block:: python
+
+    # Content of the main.py file
+    from module_a import something
+    import module_b
+
+    # ...
+
+So the ``requirements.txt`` for my application would look like this::
+
+    module_a
+    module_b
+
+Later, when a user want to execute your ``main.py``, the dependencies
+must be installed using :command:`pip install -r requirements.txt`
+in a new virtual environment.
+
+.. important:: You can notice that this approach includes sharing your code
+   so it fails if you want to hide the code of your application.
+
+Freezing Your Application
+-------------------------
+
+This is the most common approach for users to distribute their applications
+and even though the code is still available for the end user, it is a bit more
+difficult to retrieve it.
+
+You can find a series of tutorials based on the most popular tools that
+allow Python users to freeze and distribute applications in our
+:ref:`deployment` section.
+
+Compiling Python
+----------------
+
+Even though Python does not natively support to be compiled, there are
+complementary tools that let you to achieve this.
+You can check the `Nuitka <https://nuitka.net/>`_ project to learn more.
diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png b/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png
new file mode 100644
index 000000000..f335a234d
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/hello_linux.png
diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png b/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png
new file mode 100644
index 000000000..863149399
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/hello_macOS.png
diff --git a/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg b/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg
new file mode 100644
index 000000000..78dcf8ab5
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/hello_win10.jpg
diff --git a/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst b/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst
new file mode 100644
index 000000000..f606c2784
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/typesoffiles.rst
@@ -0,0 +1,149 @@
+.. _typesoffiles:
+
+File Types
+==========
+
+There are many different file types that you will encounter while
+developing |project| applications, ui, qrc, qml, pyproject, etc.
+Here you can find a simple explanation for
+each of them.
+
+Python Files ``.py``
+--------------------
+
+Python files are the main format you will be dealing with, while developing
+|project| projects.
+
+It is important to note that you can write applications **only** with Python
+files, without the need of ``.ui``, ``.qrc``, or ``.qml`` files, however
+using other formats will facilitate some processes, and enable new
+functionality to your applications.
+
+.. code-block:: python
+
+    class MyWidget(QWidget):
+        def __init__(self):
+            QWidget.__init__(self)
+
+            self.hello = ["Hallo Welt", "你好，世界", "Hei maailma",
+                "Hola Mundo", "Привет мир"]
+
+            self.button = QPushButton("Click me!")
+            self.text = QLabel("Hello World")
+            self.text.setAlignment(Qt.AlignCenter)
+            # ...
+
+User Interface Definition File ``.ui``
+--------------------------------------
+
+When using Qt Designer, you can create interfaces with the WYSIWYG
+form editor, this interface is represented as a widget tree using XML.
+Here is an extract of the beginning of a ``.ui`` file:
+
+.. code-block:: xml
+
+    <?xml version="1.0" encoding="UTF-8"?>
+    <ui version="4.0">
+     <class>MainWindow</class>
+     <widget class="QMainWindow" name="MainWindow">
+      <property name="geometry">
+       <rect>
+        <x>0</x>
+        <y>0</y>
+        <width>400</width>
+        <height>300</height>
+       </rect>
+      </property>
+      <property name="windowTitle">
+       <string>MainWindow</string>
+      </property>
+      <widget class="QWidget" name="centralWidget">
+    ...
+
+The `pyside6-uic` tool generates Python code from these `.ui` files,
+which you can import from your main files, so it is not necessary
+for you to include the `.ui` files in your deployed application.
+
+Resource Collection Files ``.qrc``
+----------------------------------
+
+List of binary files that will be used alongside your application.
+As an XML-based file, its structure look like this:
+
+.. code-block:: xml
+
+    <!DOCTYPE RCC><RCC version="1.0">
+    <qresource>
+        <file>images/quit.png</file>
+        <file>font/myfont.ttf</file>
+    </qresource>
+    </RCC>
+
+
+The `pyside6-rcc` tool generates Python code from these `.qrc` files,
+so you are not required to include the listed files in your deployed
+application.
+
+
+Qt Modeling Language File ``.qml``
+----------------------------------
+
+Graphical QML applications are not related to Qt Widgets applications, and
+that is why the usual setup of QML project is a Python file that loads
+the QML file, and optionally, elements defined in Python that are exposed
+to QML to be used.
+
+You can write ``.qml`` files by hand, but also you can use tools like the
+QML Designer that is embedded in Qt Creator. Additionally, there are commercial
+tools like Qt Design Studio that allow you to load designs from other design
+applications.
+
+Here you can find an example of how a ``.qml`` file looks like.
+The code will display a lightgray rectangle, with the "Hello World!"
+message on it.
+
+.. code-block:: javascript
+
+    import QtQuick 2.0
+
+    Rectangle {
+        id: page
+        width: 320;
+        height: 480
+        color: "lightgray"
+
+        Text {
+            id: helloText
+            text: "Hello world!"
+            y: 30
+            anchors.horizontalCenter: page.horizontalCenter
+            font.pointSize: 24;
+            font.bold: true
+        }
+    }
+
+Qt Creator Python Project File ``.pyproject``
+---------------------------------------------
+
+For Qt Creator to load and handle Python based projects, a special file is
+needed, because C++ based projects could be handle from ``.qmake`` or
+``CMakeLists.txt`` file, which are not used with Python-based projects.
+
+Old versions of Qt Creator, provided a simple format with the ``.pyqtc``
+extension, which were plain-text files with one-file-per-line::
+
+    library/server.py
+    library/client.py
+    logger.py
+    ...
+
+There were limitations to this format, and further options that might be
+added that would not be supported, which was the motivation to create a
+``.pyproject`` file, which is a JSON-based file where more options could
+be added. Here is an example of such file:
+
+.. code-block:: javascript
+
+    {
+        "files": ["library/server.py", "library/client.py", "logger.py", ...]
+    }
diff --git a/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst b/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst
new file mode 100644
index 000000000..2dee661a7
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/whatisqt.rst
@@ -0,0 +1,112 @@
+.. _whatisqt:
+
+Qt, QML, Widgets...What Is The Difference?
+==========================================
+
+If you are new to Qt, there might be a chance that you are a bit confused about
+all the concepts you have read so far. This section aims to provide a summary
+of all the key components that are relevant to develop Qt applications.
+
+Keep in mind that Qt was designed and written in C++ as a C++ framework, you
+will find many references, examples, and concepts that make sense in C++
+based applications, that might not be relevant in your Python applications,
+but keep in mind that |project| aims to expose the Qt framework to Python
+with many adaptations. You don't need to know C++ to use |project|, and you
+can find all the possible combinations between these languages later on.
+
+Qt
+--
+
+The Qt Project is an open collaboration that coordinates the development of the
+Qt Framework. You might find situations where "Qt" refers to the project, or
+to the framework.
+
+As a framework, Qt has many components, which are distributed by components
+and modules, for example, `qtbase <https://code.qt.io/cgit/qt/qtbase.git/>`_
+is the base component that holds many modules, like: ``QtCore``, ``QtGui``,
+``QtWidgets``, ``QtNetwork``, etc.
+All those  modules contains many classes that you can directly use, like the
+case of the `Classes of QtCore <https://doc.qt.io/qt-6/qtcore-module.html>`_
+from which you can find classes like ``QFile``, ``QTime``, ``QByteArray``, etc.
+
+You can create applications without a User Interface, while using this classes
+to create command line applications, handle files, network connections,
+regular expressions, encoding of text, etc.
+
+On the other hand, you can create Graphical applications with classes
+from the ``QtWidgets`` module, this is also referred as **Widgets**.
+
+There are many other Qt modules like ``QtMultimedia``, ``QtCharts``, ``Qt3D``,
+among others. These modules has a specific functionality, and among this
+modules, there is one called ``QtDeclarative``, in which you can find the
+implementation of the ``QML`` declarative language. This language is similar
+to CSS and JSON, and it was created to design UI applications declaratively,
+allowing JavaScript to take care of some imperative sections, and enabling
+other components to extend and connect the code with C++.
+
+Let us check the functionality of these different approaches separately.
+
+Widgets
+-------
+
+As we mentioned before, ``QtWidgets`` is the module that provide predefined
+Widgets that you can add into your graphical application, like Buttons, Labels,
+Boxes, Menus, etc.
+
+Widget based applications will look like a native application, because the goal
+is not to affect the user experience compared to other included applications.
+
+.. image:: hello_macOS.png
+    :width: 20%
+.. image:: hello_win10.jpg
+    :width: 20%
+.. image:: hello_linux.png
+    :width: 20%
+
+.. note:: You can adapt these applications to use your self-made style, but
+   you need to be aware that the goal of Widgets is to respect the system
+   style, be careful when changing colors. Check this `simple tutorial
+   <widgetstyling>`_ on how to do so.
+
+QML
+---
+
+QML offers an alternative approach to create User Interfaces, compared to
+Widgets, and it was originally motivated from mobile applications development.
+Together with the ``Qt Quick`` module, it provides access to interact with
+mobile device using actions like taps, drag and drop, animations, states,
+transitions, drawer menus, etc.
+
+The elements that you can find in QML/Quick applications are focused on
+providing a more dynamic application infrastructure which different properties
+based in certain behaviors.
+
+Even though QML has the motivation to provide interfaces with mobile devices,
+you can use it for Desktop applications, too.
+
+Additionally, you can augment your application with standard JavaScript, which
+in combination with C++ can become an attractive infrastructure.
+
+Python And C++
+--------------
+
+For |project| applications you **do not need to know C++**, but it is possible
+to mix both languages in a couple of different use cases:
+
+1. If you have a Qt/C++ application, you can re-write it so it is a Qt/Python
+   application. This means that Python aims to be a full replacement for the
+   user level C++ code of Qt applications.
+2. For custom Qt widgets written in C++, you can generate your own Python
+   bindings so people can use it directly from Python.
+3. If you have a C++ based library that you use with your Qt/C++ applications
+   that is in charge of a specific task, like a performant process, you can
+   generate bindings for it, so people could be able to use it from Python.
+4. For a Qt/C++ application, you can extend it with Python, by exposing the
+   main QApplication singleton as a python binding to a Python interpreter.
+   This can be understand as a "Python Plugin System" for your Qt/C++
+   application, for example.
+
+For the the steps **2., 3., and 4.** you need the help of Shiboken, the
+binding generation tool that is used to generate |project|.
+You can find more information in the
+`documentation page <https://doc.qt.io/qtforpython/shiboken6/index.html>`_.
diff --git a/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst b/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst
new file mode 100644
index 000000000..67aafc4f8
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/whatisshiboken.rst
@@ -0,0 +1,42 @@
+.. _whatisshiboken:
+
+Binding Generation: What Is Shiboken?
+=====================================
+
+When you install ``PySide6`` you might have notice that also ``Shiboken6``
+is installed as a dependency:
+
+.. code-block:: bash
+
+    (env) [qt ~]$ pip install pyside6
+    Collecting pyside6
+      Downloading PySide6-6.0.0-6.0.0-cp36.cp37.cp38.cp39-abi3-manylinux1_x86_64.whl (170.5 MB)
+         |████████████████████████████████| 170.5 MB 42 kB/s
+    Collecting shiboken6==6.0.0
+      Downloading shiboken6-6.0.0-6.0.0-cp36.cp37.cp38.cp39-abi3-manylinux1_x86_64.whl (964 kB)
+         |████████████████████████████████| 964 kB 29.3 MB/s
+    Installing collected packages: shiboken6, pyside6
+    Successfully installed pyside6-6.0.0 shiboken6-6.0.0
+
+That installed package is also called **Shiboken Module**, and it contains
+some utilities for PySide to properly work.
+You can find more information about it on its
+`documentation page <https://doc.qt.io/qtforpython/shiboken6/shibokenmodule.html>`_
+
+There is a third package that does not get installed when you install PySide,
+because it is not required, and it is called **Shiboken Generator**.
+
+Most of the times you see mentions to use "Shiboken" or to do something
+related to "binding generation", it is about this third package, and **not**
+the dependency of the PySide package.
+
+Do I Need Shiboken Generator?
+-----------------------------
+
+If your goal is to just write Qt applications in Python,
+you do not need to worry about a Shiboken generator installation,
+but on the other hand, if you want to work with your own bindings
+or extend Qt/C++ applications with Python, you **need** it.
+
+You can find all the information related to Shiboken on its
+`documentation page <https://doc.qt.io/qtforpython/shiboken6/>`_.
diff --git a/sources/pyside6/doc/tutorials/pretutorial/whichide.rst b/sources/pyside6/doc/tutorials/pretutorial/whichide.rst
new file mode 100644
index 000000000..ec005a188
--- /dev/null
+++ b/sources/pyside6/doc/tutorials/pretutorial/whichide.rst
@@ -0,0 +1,54 @@
+.. _whichide:
+
+Which IDEs Are Compatible?
+==========================
+
+|project|, as any other Python module, can be used in any Python-compatible
+IDE, but not all of them will provide extra functionality like Qt Creator does.
+
+Besides writing files, there are some external steps you might want to perform
+in order to help the development of your applications:
+
+From a terminal:
+
+* Generating a Python file from a ``.ui`` file:
+  :command:`pyside6-uic -i form.ui -o ui_form.py`
+* Generating a Python file from a ``.qrc`` file:
+  :command:`pyside6-rcc -i resources.qrc -o rc_resources.py`
+* Opening Qt Designer with the command :command:`pyside6-designer` to
+  edit/create ``.ui`` files.
+
+External add-ons/plugins from your favorite IDE might include configuration
+steps to run these commands, or open external tools like Designer and
+QtCreator.
+
+QtCreator
+---------
+
+You can create new projects based on some basic templates that are currently
+available in QtCreator. After selecting one, you will pass through some steps
+where you can specify the details of the template, like the project name,
+base Qt class to use for your interface, among others.
+
+Here you can see an animation of the creation of a project:
+
+.. image:: https://qt-wiki-uploads.s3.amazonaws.com/images/7/7c/Qtcreator.gif
+    :alt: Qt Creator Animation
+
+Visual Studio Code
+------------------
+
+Besides editing the code of your application, you can use external plugins to
+enable more functionality, like this unofficial
+`plugin <https://marketplace.visualstudio.com/items?itemName=seanwu.vscode-qt-for-python>`_
+that you can install from VS Code while writing the following on the Quick Open Menu (``Ctrl+P``):
+:command:`ext install seanwu.vscode-qt-for-python`.
+
+PyCharm
+-------
+
+You can configure PyCharm to enable external tools, in |project| terms, Qt Designer, and
+Qt Creator. Go to ``File > Settings > tools > PyCharm External Tools``, and include the following
+information to add them to your project.
+Later, you will be able to right click a ``.ui`` file, and select ``Qt Designer``,
+``pyside6-uic``, or any tool that you configured this way.
diff --git a/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst b/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst
index 5bbb89609..46b055e13 100644
--- a/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst
+++ b/sources/pyside6/doc/tutorials/qmlintegration/qmlintegration.rst
@@ -1,6 +1,5 @@
-########################
-QML Integration Tutorial
-########################
+Python-based context properties
+===============================
 
 This tutorial provides a quick walk-through of a python application that loads, and interacts with
 a QML file.  QML is a declarative language that lets you design UIs faster than a traditional
diff --git a/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css b/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
index f6a1c5ae4..64d7f1752 100644
--- a/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
@@ -1473,7 +1473,7 @@ pre, .LegaleseLeft {
   background-color:#222840;
   color:#fff;
   display:block;
-  font-family:"Droid Sans Mono";
+  font-family: 'Droid Sans Mono', monospace;
   line-height:1.5;
   overflow-x:auto;
   margin-bottom:25px;
@@ -1553,7 +1553,13 @@ pre span.wrap {
 }
 
 span.pre {
-    color: #09102d;
+    color: black;
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #eaeaea;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
 }
 
 span.wrap:hover {
@@ -1579,7 +1585,7 @@ span.wrap:active {
   color:#46a2da
 }
 code,.codelike {
-  font-family:"Droid Sans Mono"
+  font-family: 'Droid Sans Mono', monospace;
 }
 #detailed-description .function dt > code,
 #detailed-description .function dt > em {
@@ -2074,3 +2080,22 @@ table.special td {
     padding-bottom: 2px;
     border-bottom: 4px solid #41cd52;
 }
+
+.command {
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #9cd1a6;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
+}
+
+div.leftside {
+    width: 50%;
+    padding: 0px 50px 0px 0px;
+    float: left;
+}
+
+div.rightside {
+    margin-left: 50%;
+}