Doc: Update entry-level tutorials

Fixes: QDS-2304
Change-Id: Ib3417b40a19767d79b36bd920d21ae50b903a554
Reviewed-by: Aleksei German <aleksei.german@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

1 files changed, 20 insertions, 22 deletions

diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
index cbc66af9de..97ca6a2cdd 100644
--- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
@@ -53,7 +53,7 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to the \uicontrol {Form Editor} and move
+    First, you will add a new rectangle to \uicontrol {Form Editor} and move
     all the current UI components to it to create a new page. Then, you will
     \l {Setting Anchors and Margins}{anchor} the static elements on the
     page, that is the logo image (\e logo) and page title (\e pageTitle),
@@ -71,25 +71,26 @@
     To anchor components on a page:
 
     \list 1
-        \li Open \e {Screen01.ui.qml} for editing in the Design mode
-            \uicontrol {Form Editor}.
+        \li Open \e {Screen01.ui.qml} for editing in the
+            \uicontrol {Form Editor} view.
         \li Select the rectangle that forms the UI background in the
-            \uicontrol Navigator, and change its id to \e root in the
+            \uicontrol Navigator view, and change its id to \e root in the
             \uicontrol Properties view.
         \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
-            to \e root, and change its id to \e loginPage.
-        \li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png
+            view to \e root in \uicontrol Navigator, and change its id to
+            \e loginPage in \uicontrol Properties.
+        \li Under \uicontrol Layout, select the \inlineimage anchor-fill.png
             (\uicontrol {Fill Parent Item}) button to anchor the page to the root
             item on all sides.
-        \li Select all the other UI elements below \e root in the
+        \li Select all the other UI elements below \e root in
             \uicontrol Navigator (press the \key Shift key for multiple
             selection) and drag them to \e loginPage.
-        \li Select \e logo in the \uicontrol Navigator.
+        \li Select \e logo in \uicontrol Navigator.
         \li Select the \inlineimage anchor-top.png
             (\uicontrol Top) and \inlineimage anchor-left.png
             (\uicontrol Left) anchor buttons to anchor \e logo to the top left
-            corner of its parent (the \e loginPage) with 10-pixel margins.
-        \li Select \e pageTitle in the \uicontrol Navigator.
+            corner of its parent (\e loginPage) with 10-pixel margins.
+        \li Select \e pageTitle in \uicontrol Navigator.
         \li Deselect the \inlineimage anchor-vertical-center.png
             (\uicontrol {Vertical Center}) button to remove the
             anchor, and then select the \uicontrol Top button to anchor the
@@ -132,32 +133,29 @@
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
         \li Drag and drop two instances of the \uicontrol {Text Field} type
-            to the \uicontrol {Form Editor}.
-        \li Select one of the text fields in the \uicontrol Navigator, and
-            change its id to \e usernameField in the \uicontrol Properties view.
+            to \uicontrol {Form Editor}.
+        \li Select one of the text fields in \uicontrol Navigator, and
+            change its id to \e usernameField in \uicontrol Properties.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
             width of the field to \e 300 pixels.
         \li In the \uicontrol Placeholder field, enter \e Username and select
             \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
-        \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the \uicontrol {Form Editor}. The text
-            value always takes precedence over the placeholder text value.
         \li Select the other text field, and change its id to
             \e passwordField, placeholder text to \e Password,
-            and width to \e 300 pixels. Also remove the default text.
+            and width to \e 300 pixels.
     \endlist
 
     You will now position the fields and buttons as columns:
 
     \list 1
-        \li Select \e usernameField and \e passwordField in the
+        \li Select \e usernameField and \e passwordField in
             \uicontrol Navigator, and right-click on either item
             to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
-            to position the fields on top of each other in the
+            to position the fields on top of each other in
             \uicontrol {Form Editor}.
-        \li Select the column in the \uicontrol Navigator and change its id
+        \li Select the column in \uicontrol Navigator and change its id
             to \e fieldColumn in \uicontrol Properties.
         \li In the \uicontrol Spacing field, set the spacing between the
             fields to 5 pixels.
@@ -172,14 +170,14 @@
     You will now anchor the field and button columns to the page:
 
     \list 1
-        \li Select \e fieldColumn in the \uicontrol Navigator.
+        \li Select \e fieldColumn in \uicontrol Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \uicontrol Top button to anchor the top of the button column to
             the top of its parent (the \e loginPage) with a 200-pixel margin.
         \li Select the \inlineimage anchor-horizontal-center.png
             (\uicontrol {Horizontal Center}) button to center the field
             column horizontally on the page.
-        \li Select \e buttonColumn in the \uicontrol Navigator.
+        \li Select \e buttonColumn in \uicontrol Navigator.
         \li In \uicontrol Properties > \uicontrol Layout, select the
             \inlineimage anchor-bottom.png
             (\uicontrol Bottom) button to anchor the bottom of the button