diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md
index f59400459b6..2921a1fe6c9 100644
--- a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md
+++ b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md
@@ -1,61 +1,67 @@
# Creating a Master Template
-We've seen how to create a **Document Type** and its corresponding **Template**. If you want to create a three-page site containing; Home, News and Contact Us pages, you would create a _**Document Type**_ with a corresponding **Template** and copy the same HTML code into each template.
+We've seen how to create a **Document Type** and its corresponding **Template**. If you plan to create a website containing Home, News, and Contact Us pages, you will need to create a Document Type for each page. You will also need to create a corresponding Template for each Document Type.
-If you see yourself repeating the same HTML multiple times in your templates, you might want to consider creating a new master template.
+You may end up copying the same HTML code into each of these templates, which can be time-consuming and repetitive. In such scenario, you might want to consider creating a new master template.
To create a new master template:
1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
-3. Select the **...** next to the **Templates** folder and click **Create**.
-4. A template opens up in the content editor. Enter a **Name** for the master template. Let's call it _Master_.
+3. Select the **...** next to the **Templates** folder.
+4. Click **Create**.
+ A template opens up in the content editor.
+5. Enter a **Name** for the master template. Let's call it _Master_.
-
-5. Click **Save**.
+ 
+6. Click **Save**.
## Using the Master Template
To use the master template:
1. Go to **Settings**.
-2. Select **Templates** from the **Templating** section and open the **Homepage** template.
-3. Select `Master Template: No Master`. The Master template dialog opens on the right-side of the browser.
-4. Select the template called **Master**. This will update the Razor code section from `Layout = null;` to `Layout = "Master.cshtml";`
+2. Select **Templates** from the **Templating** section.
+3. Open the **Homepage** template.
+4. Select `Master Template: No Master`.
+ The Master template dialog opens on the right-side of the browser.
+5. Select the template called **Master**.
+6. Click **Choose**.
+ The Razor code section is updated from `Layout = null;` to `Layout = "Master.cshtml";`
-
-5. Click **Save**.
+ 
+7. Click **Save**.
## Updating Templates With the New Master Template
-We now need to move the parts of our HTML template that are common across all templates into the _**Master**_. It might be slightly different for different websites and you'll need to consider if all pages contain a `
` section so that you can update it in the master.
+We now need to move the parts of our HTML template that are common across all templates into the _**Master**_. It might be slightly different for different websites. You'll need to consider if all pages contain a `
` section so that you can update it in the master.
To update templates with the new master template, follow these steps:
1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
-3. Go to **Master** and open the **Homepage** template.
-4. For this tutorial, we will cut everything from the `` (around line 9) to the end of the `
` tag (around line 44) which is the `header` and `navigation` of the site to the master template.
+3. Navigate to the **Homepage** template.
+4. For this tutorial, we will cut everything from the `` (around line 8) to the end of the `
` tag (around line 43) which is the `header` and `navigation` of the site to the master template.
-
+ 
5. Click **Save**.
-6. Go to the **Master** template and paste this HTML markup after the closing curly brace (around line 9).
+6. Go to the **Master** template and paste this HTML markup after the closing curly brace (around line 7).
-
-7. At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code _**@RenderBody()**_ at the end.
+ 
+7. At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code _**@RenderBody()**_ at the end.
-
+ 
8. Click **Save**.
9. Repeat the same process for the footer content:
- * Go to **Settings > Templates > Master > Homepage template** and cut everything from the `` tag (around line 110) to the end of the `` tag (around line 124) and click **Save**.
- * Go to the **Master** template and paste this HTML markup after the _**@RenderBody**_ field we've added.
+ * Go to the **Homepage** template and cut everything from the `` tag (around line 108) to the end of the `` tag (around line 121) and click **Save**.
+ * Go to the **Master** template and paste this HTML markup after the _**@RenderBody**_ field we've added.
-
+ 
* Click **Save**.
Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped **@RenderBody()**.
-If you are missing any content (header or footer), check that the templates matches the following:
+If you are missing any content such as header or footer, ensure that the templates matches the following:
### Master Template
@@ -66,8 +72,6 @@ If you are missing any content (header or footer), check that the templates matc
Layout = null;
}
-@* the fun starts here *@
-
Welcome - UmbracoTV
@@ -75,7 +79,7 @@ If you are missing any content (header or footer), check that the templates matc
-
+
@@ -104,15 +108,15 @@ If you are missing any content (header or footer), check that the templates matc
-
- @RenderBody()
-
-
+
+ @RenderBody()
+
+
@@ -128,10 +132,9 @@ If you are missing any content (header or footer), check that the templates matc
```csharp
@using Umbraco.Cms.Web.Common.PublishedModels;
-@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
-@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
- Layout = "Master.cshtml";
+ Layout = "master.cshtml";
}
@@ -152,8 +155,7 @@ If you are missing any content (header or footer), check that the templates matc
diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md
index f6036351f49..023adc5fa4e 100644
--- a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md
+++ b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md
@@ -14,23 +14,27 @@ Some potential solutions:
Let's create a content-only contact page where we can provide a title and some rich text.
1. Go to **Settings**.
-2. Select the **...** next to the **Document Types** in the **Settings** tree.
-3. Select **Document Type with Template**. The Document Type opens in the content editor.
-4. Select an **Icon** from the list of icons.
-5. Enter a **Name**. Let's call it _Simple Content Page_.
-6. Enter a Description.
-7. Let's add two fields with the following specifications:
+2. Click on **...** next to **Document Types**.
+3. Select **Create**. The Create Document Type dialog opens.
+4. Select **New Document Type**.
+5. Select an **Icon** from the list of icons.
+6. Click **Submit**.
+7. Enter a **Name**. Let's call it *Simple Content Page*.
+8. Let's add two fields with the following specifications:
| Group | Field Name | Alias | Data Type |
| ------- | ---------- | --------- | ---------------- |
| Content | Page Title | pageTitle | Textstring |
| Content | Body Text | bodyText | Rich Text Editor |
- 
-8. Click **Save**.
-9. Go to **Templates** to view your _Simple Content Page_ template that was created automatically with the Document Type.
-10. Select the **Simple Content Page** template and then select **Master** as the **Master template**.
-11. Add the following HTML to the **Simple Content Page** template and click **Save**.
+ 
+9. Click **Save**.
+10. Go to the **Templates** folder.
+11. Click **...** next to the **Templates** folder.
+12. Click **Create**.
+13. Enter a **Name** for the **Template**. Let's call it *SimpleContentPage*.
+14. Select `Master Template: No Master` and choose the **Master** template.
+15. Add the following HTML after the closing `}`.
```html
@@ -51,7 +55,8 @@ Let's create a content-only contact page where we can provide a title and some r
```
-12. Click **Save**.
+
+16. Click **Save**.
### Updating the Document Type Permissions
@@ -60,21 +65,44 @@ We now need to update the Document Type permissions to specifically add child no
To update the Document Type permissions:
1. Go to **Settings**.
-2. Open the **Homepage** Document Type and go to the **Permissions** tab.
-3. Select **Add child** in the **Allowed child node types**. The **Choose child node** dialog opens.
-4. Select **Simple Content Page** and click **Save**.
+2. Open the **Homepage** Document Type.
+3. Go to the **Structure** tab.
+4. Click **Choose** in the **Allowed child node types**.
+ The **Choose child node** dialog opens.
+5. Select **Simple Content Page**.
-
+ 
+
+6. Click **Choose**.
+7. Click **Save**.
+
+## Attaching the Template to the Document Type
+
+To attach the template:
+
+1. Go to the **Doument Types** folder.
+2. Open the *Simple Content Page* Document Type.
+3. Go to the **Templates** tab.
+4. Click **Add** in the **Allowed Templates** field.
+5. Select the *SimpleContentPage* template.
+
+ 
+6. Click **Choose**.
+7. Click **Save**.
+
+The template is now associated with the Document Type.
### Creating the content node
To create a content node:
1. Go to **Content**.
-2. Select **...** next to the **Homepage** and select **Simple Content Page**.
-3. Enter a name for the Document Type. Let's call it _Contact Us_.
-4. Fill in details for the **Page Title** and **Body Text**.
-5. Click **Save and Publish**.
+2. Select **...** next to the **Homepage** node.
+3. Click **Create**.
+4. Select **Simple Content Page**.
+5. Enter a name for the Document Type. Let's call it _Contact Us_.
+6. Fill in details for the **Page Title** and **Body Text**.
+7. Click **Save and Publish**.
### Adding the Document Type Properties
@@ -83,15 +111,22 @@ To add the Document Type properties:
1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
3. Go to **Master** and open the **Simple Content Page** template.
-4. Scroll to the `` (around line 8) section and highlight the text `“Umbraco Support”` (around line 11).
+4. Scroll to the `` (around line 7) section and highlight the text `“Umbraco Support”` (around line 10).
5. Click **Insert** and select **Value**.
-6. Select the **pageTitle** field from the drop-down list and click **Submit**.
-7. Repeat the same process for the `
` tag:
- * Highlight the content from the `
` tag (around line 19) to the end of the `
` tag (around line 22).
+ * Select **Document Type** from the **Choose field** drop-down list.
+ * Select **Simple Content Page**.
+ * Click **Choose**.
+ * Select **pageTitle** field from the **Simple Content Page** drop-down list.
+ * Click **Submit**.
+6. Repeat the same process for the `
` tag:
+ * Highlight the content from the `
` tag (around line 18) to the end of the `
` tag (around line 21).
* Click **Insert** and select **Value**.
- * Select **bodyText** field from the drop-down list.
+ * Select **Document Type** from the **Choose field** drop-down list.
+ * Select **Simple Content Page**.
+ * Click **Choose**.
+ * Select **bodyText** field from the **Simple Content Page** drop-down list.
* Click **Submit**.
-8. Click **Save**.
+7. Click **Save**.
### Viewing the Contact Us Page
@@ -100,9 +135,9 @@ To view the **Contact Us** Page:
1. Go to **Content**.
2. Select the **Contact Us** page.
3. Go to the **Info** tab.
-4. Click the link to view the page.
+4. Click the link to view the page.
-
+ 
## Using Document Type Properties from the Homepage
@@ -111,11 +146,16 @@ You may notice that the footer is now empty - we don't have the content from our
To use the Document Type properties from the homepage, do the following:
1. Go to **Settings**.
-2. Select **Templates** from the **Templating** section, and open the **Master** template.
-3. Highlight `@Model.Value("footerText")` in the footer (around line 52) and click **Insert**.
-4. Select **Value** and choose the **footerText** again from the **Choose field** dropdown.
-5. Select **Yes, make it recursive** checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
-6. Click **Submit**.
-7. Click **Save**.
+2. Click on **Templates** from the **Templating** section.
+3. Open the **Master** template.
+4. Highlight `@Model.Value("footerText")` in the footer (around line 50).
+5. Click **Insert** and select **Value**.
+6. Select **Document Type** from the **Choose field** drop-down list.
+7. Select **Home Page**.
+8. Click **Choose**.
+9. Select **footerText** field from the **HomePage** drop-down list.
+10. Select **Yes, make it recursive** checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
+11. Click **Submit**.
+12. Click **Save**.
Reload the _Contact Us_ page to view the content with the footer.
diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md
index a2f3fff28f6..5c9374e2ad5 100644
--- a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md
+++ b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md
@@ -5,51 +5,76 @@ Umbraco creates a corresponding template when you select the **Document Type wit
To edit the template:
1. Go to **Settings**.
-2. Expand the **Templates** folder in the **Templating** section of the tree. You should see a template titled _**HomePage**_.
-3. Open the template. It will contain a little bit of _**Razor code**_.
+2. Click **...** next to the **Templates** folder in the **Templating** section of the**Settings** tree.
+3. Click **Create**.
+4. Enter a **Name** for the **Template**. Let's call it _HomePage_.
+5. The template will contain a little bit of _**Razor code**_.
- 
-4. Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in.
+ 
+6. Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in.
* We are using files from the [Custom Umbraco Template](https://umbra.co/Umbracotemplate).
-5. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**.
-6. Paste the content into the _HomePage_ template below the closing curly brace "}".
+7. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**.
+8. Paste the content into the _HomePage_ template below the closing curly brace "}".
* Umbraco _**Templates**_ uses _**Razor**_ that allows you to add code in your _**Template**_ files. _**Razor**_ reacts to `@` signs.
-7. Click **Save**.
+9. Click **Save**.
We now have a _Template_. That's two out of the three stages complete for our first page.
+## Attaching the Template to the Document Type
+
+To attach the template:
+
+1. Go to the **Doument Types** folder.
+2. Open the _Home Page_ Document Type.
+3. Go to the **Templates** tab.
+
+ 
+4. Click **Add** in the **Allowed Templates** field.
+5. Select the *HomePage* template.
+
+ 
+6. Click **Choose**.
+7. Click **Save**.
+
+The template is now associated with the Document Type.
+
## Creating Your First content node
-Our third and final stage to creating our first page in Umbraco, is to create a _**content node**_. The content node uses our _**Document Type**_ and _**Template**_, to serve up an HTML page to web visitors.
+Our third and final stage to creating our first page in Umbraco, is to create a _**Content Node**_. The content node uses our _**Document Type**_ and _**Template**_, to serve up an HTML page to web visitors.
To add a content node:
1. Go to **Content**.
-2. Select **...** next to the **Content** headline in the tree. Select **HomePage**.
+2. Select **...** next to **Content** in the tree.
+3. Click **Create**.
+4. Select **HomePage**. The Home Page opens in the content editor.
- * If you cannot see the content node, check that \[Settings] > \[Document Types] > \[HomePage] > \[Permissions tab] > \[Allow at root] is checked. The Home Page opens in the content editor.
+ * If you cannot see the content node, check that [Settings] > [Document Types] > [HomePage] > [Structure] > [Allow at root] is enabled.
+ The Home Page opens in the content editor.
- 
-3. Enter the name for the content node. We are going to call this _Homepage_.
+ 
+5. Enter the name for the content node. We are going to call this _Homepage_.
* The name will show up in the node list and will be used to create a URL for the page. Try to keep it short but descriptive.
-4. Enter the following details:
+6. Enter the following details:
| Name | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Page Title | Welcome to Widgets Ltd |
| Body Text |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et aliquet ante, ut eleifend libero.
Sed est ligula, maximus in dolor sed, lacinia egestas ligula. Donec eu nisi lectus.
Morbi pharetra pulvinar arcu non gravida.
|
| Footer Text | Copyright Widgets Ltd 2019 |
-5. Click **Save and Publish**. The content tree will reload with the homepage node.
+7. Click **Save and Publish**. The content tree will reload with the Homepage node.
+
+## Accessing the Frontend
-Refresh your webpage in your browser [http://localhost:xxxx](http:/localhost:xxxx/). To access your webpage:
+To view your content on the frontend:
-1. Select **Info** in the **Homepage** content node.
+1. Go to the **Info** tab in the **Homepage** content node.
2. Click on the window pop-up symbol under the **Links** section.
-The default Umbraco page will now be gone and we'll now see a bare, unstyled page. We are getting there.
+The default Umbraco page is gone and we can see a basic unstyled page. We are getting there.
{% hint style="info" %}
-If you see a blank page, check if the template is entered and remember to save it.
+If you see a blank page, check if the template is created and associated to the Document Type.
{% endhint %}
diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
index 1743192f2a9..13f866c1916 100644
--- a/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
+++ b/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -3,10 +3,10 @@
Our homepage is currently missing the CSS and image files. To include these files:
1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
+2. Copy the **CSS** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
+3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
- 
-4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
+ 
+4. Reload or refresh your frontend.
The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md b/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md
index e8e59e3b688..fd24d3ca128 100644
--- a/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md
+++ b/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md
@@ -4,7 +4,7 @@ You might have noticed that the content we've added to the homepage is not being
Let’s look at our template and identify where the content should be displayed.
-
+
The top arrow in this image is the _Page Title_ and the bottom arrow is the _Body Text_. The Footer is all the way at the bottom of the page.
@@ -13,30 +13,40 @@ The top arrow in this image is the _Page Title_ and the bottom arrow is the _Bod
To set the Document Type properties:
1. Go to **Settings**.
-2. Select **Templates** in the **Templating** section, and open the **Homepage** template.
-3. Scroll down to the `` section (around line 46) and highlight the text `“Welcome - UmbracoTV”` (around line 49).
-
-  (1) (1) (1).png>)
-4. Click **Insert** and select **Value**.
-5. Select **pageTitle** field from the drop-down list.
-
- 
-6. Click **Submit**.
-7. Repeat the same process for the content between the `
` tags (around line 61 to 78):
+2. Select **Templates** in the **Templating** section.
+3. Open the **Homepage** template.
+4. Scroll down to the `` section (around line 45) and highlight the text `“Welcome - UmbracoTV”` (around line 48).
+
+ :
* Highlight the content as shown in the figure.
- 
+ 
* Click **Insert** and select **Value**.
- * Select **bodyText** field from the drop-down list.
+ * Select **Document Type** from the **Choose field** drop-down list.
+ * Select **HomePage**.
+ * Click **Choose**.
+ * Select **bodyText** field from the **HomePage** drop-down list.
* Click **Submit**.
-8. Repeat the same process for the content in the `
