Updated screenshots and steps for Starter Kit

14/umbraco-cms/tutorials/starter-kit/lessons/1-customize-the-starter-kit.md

@@ -18,25 +18,25 @@ Learn how to:
 ## Steps
 
 1. Go to the _Home_ page in the Content section.
-2.  Navigate to the _Design_ group by scrolling down or selecting it from the dropdown menu.
+2. Navigate to the _Design_ group by scrolling down.
 
-    ![Home page Design Group](../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/images/design-group.png)
+    ![Home page Design Group](images/design-group_v14.png)
 3. Choose a different font and color theme.
    * Try different combinations and see what fits your site.
-   * Save a draft of your changes by using `ctrl`+`s` or clicking the **Save** button. **Save** will not publish the changes to the website.
+   * Click **Save** to save a draft of your changes. **Save** will not publish the changes to the website.
    * Click **Save and preview** to see how the page looks on different screen sizes.
 4. Try changing the background image of the Home page.
-   * Hover over the _Hero Background_ thumbnail and click the red cross icon to remove the current image.
+   * Hover over the _Hero Background_ thumbnail and click the trash icon to remove the current image.
    * You can now click the '+' to open a dialog where you can choose an image from the Media library or upload a new image.
-   * Select the image you want and click Submit in the lower right corner.
+   * Select the image you want and click **Submit**.
 5. Find the _Sitename_ property and change the name of the site.
    * This is shown in the site navigation menu.
    * If you want a logo instead of the Site Name you can upload and/or choose an image from the Media Library.
-6. When you are happy with the changes publish them to the website by clicking the **Save and Publish** button.
+6. Click **Save and Publish** to publish the changes to the website.
 
-To see the changes you've made go to the **Info** tab and click on the link.
+To see the changes you've made go to the **Info** tab and click on the Link.
 
-![Link to page](../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/images/link-to-page.png)
+![Link to page](images/link-to-page_v14.png)
 
 ## Summary
 

14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/README.md

@@ -17,21 +17,23 @@ Learn how to:
 ## Steps - Part One
 
 1. In the **Settings** section, expand **Document Types**.
-2.  Click on _Blogpost_. This is the Document Type that defines the fields for this type of page.
+2. Click on _Blogpost_. This is the Document Type that defines the fields for this type of page.
 
-    ![Blogpost Document Type](../../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/Blogpost-Document-Type-v10.png)
+    ![Blogpost Document Type](images/Blogpost-Document-Type-v14.png)
 3. The Document Type contains 2 groups: _Content_ and _Navigation & SEO_.
    * At the bottom of the _Content_ group select **Add property**.
    * This opens the **Property Editor** dialog window.
 4. Give the property a name: _Publication Date_.
-5. Give the property a description: _The date of the blog post. This is the date used to display the most recent posts first._.
+5. Give the property a description: _The date of the blog post. This is the date used to display the most recent posts first._
    * Always try to add a meaningful description to help your editors.
-6. Select **Add editor** to specify what type of data is being stored.
-   * We need a standard date, so click on the **Date Picker** icon.
-7. In the validation section, enable the field to make it mandatory.
-8.  Submit to close the dialog and save the property.
-
-    ![Property settings](../../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/property-settings-v10.png)
-9. Select the **Reorder** option near the top-right of the window, then drag the new property to be after _Page Title_.
+6. Select **Select Property Editor** to specify what type of data is being stored.
+   * Select the **Date Picker** icon since we need a standard date.
+7. Enable the field in the validation section to make it mandatory.
+8. Click **Add** to close the dialog and save the property.
+
+    ![Property settings](images/property-settings-v14.png)
+9. Select the **Reorder** option near the top-right of the window.
+   * Drag the new property after _Page Title_.
    * A logical order to your properties will make things easier for your editors.
-10. Click **I am done reordering** near the top-right of the window and select **Save** the Document Type - a confirmation message should appear confirming that the Document Type was saved.
+10. Click **I am done reordering** near the top-right of the window.
+11. Select **Save** the Document Type. A confirmation message appears confirming that the Document Type is saved.

14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-2.md

@@ -11,16 +11,17 @@ Now in Part Two, we're going to display that instead of the default creation dat
     * Remember to publish your changes!
     * As this field is flagged as Mandatory you now can't save a post without it.
 
-3. Go to the **Settings** section
-4. Expand **Templates**, and *Master*, then click on *Blogpost*.
+3. Go to the **Settings** section.
+4. Expand the **Templates** folder.
+5. Navigate to the *Blogpost* template.
 
     * This is the template that is rendering the full page view of a blog post
 
-5. Find the element with the `blogpost-date` class and change it to use a nicely formatted Publication Date, i.e.:
+6. Find the element with the `blogpost-date` class and change it to use a nicely formatted Publication Date, i.e.:
 
     ```html
     <small class="blogpost-date">@Model.PublicationDate.ToLongDateString()</small>
     ```
 
-6. *Save* the Template - a confirmation message should appear confirming that the Template was saved.
-7. View the blog post page in the browser (find the page in the Content tree, then select the link on the Info tab).
+7. Click **Save** to save the template. A confirmation message appears confirming the Template is saved.
+8. View the blog post page in the browser. Navigate to the page in the **Content** tree and select the link on the **Info** tab.

14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md

@@ -6,9 +6,9 @@ Finally, in Part Three we shall change the blog listing.
 
 ## Steps - Part Three
 
-1. In the **Settings** section, expand **Partial View Files**.
+1. In the **Settings** section, expand the **Partial Views** > **Components** > **LatestBlogPosts** folder.
 
-    * Select *LatestBlogPosts.cshtml*.
+    * Select *Default.cshtml*.
 
 2. Scroll down to find the `blogpost-date` element and change it to use a nicely formatted Publication Date, i.e.:
 

14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-1.md

@@ -17,12 +17,14 @@ In this lesson, we'll only add Open Graph Content of the type "website", so we d
 
 ## Create a document type composition
 
-1. Go to the **Settings** section
-2. Right-click on **Document Types**
-3. Create a new **Document Type without a template**
-4. Name the Document Type *Open Graph*
-5. Create a group called *Open Graph*
-6. Add a property to the group tab called *Open Graph Title*
-7. Select **Choose editor**, search for *textstring* and add this to the tab.
-8. Add another property named *Open Graph Image* and use the **Media Picker** editor.
-9. **Save** the Document Type.
+1. Go to the **Settings** section.
+2. Click on **Document Types**.
+3. Select **Create** > **Document Type**.
+4. Name the Document Type *Open Graph*.
+5. Click **Add Group** and name it *Open Graph*.
+6. **Add a property** to the group called *Open Graph Title*.
+7. Select **Select property editor** and search for *textstring*.
+8. Click **Add**.
+9. Add another property named *Open Graph Image* and use the **Media Picker** as the editor.
+10. Click **Add**.
+11. Click **Save**.

14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-2.md

@@ -4,10 +4,13 @@ We will now add the group and properties to the Home page and Blog post of the s
 
 This is done by using compositions to add the functionality in multiple places.
 
-1. In the **Settings** section, expand the Document Type tree.
-2. Open the `Home` Document Type and select **Compositions...** in the top-right.
-3. Choose the `Open Graph` Document Type we created and *Submit*.
-4. **Save** the Document Type.
+1. Go to the **Settings** section.
+2. Expand the **Document Types** folder.
+3. Open the `Home` Document Type.
+4. Select **Compositions...** in the top-right.
+5. Choose the `Open Graph` Document Type we created.
+6. Click **Submit**.
+7. Click **Save**.
 
 This will add the group and properties from the **Open Graph** Document Type to the **Home** Document Type. Follow the same steps for the `Blogpost` Document Type.
 

14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-3.md

@@ -6,16 +6,19 @@ In the `Starter Kit` the head is placed in the Master Template, which is respons
 
 Because you've added the Open Graph feature as a composition you can check if the composition is present on the current page and then render meta tags.
 
-1. Go to the **Settings** section and expand the Template tree.
-2. Select the *Master* template
-3. Find the `<head>` HTML tags at the top of the Template
-4. Write the following before the closing `</head>` tag:
-
-```csharp
- @if(Model is IOpenGraph){
-        @Html.Partial("../Views/Partials/OpenGraph.cshtml")
-    }
-```
+1. Go to the **Settings** section.
+2. Expand the **Templates** folder.
+3. Select the *Master* template.
+4. Find the `<head>` HTML tags at the top of the Template.
+5. Write the following before the closing `</head>` tag:
+
+    ```csharp
+    @if(Model is IOpenGraph){
+            @Html.Partial("../Views/Partials/OpenGraph.cshtml")
+        }
+    ```
+
+6. Click **Save**.
 
 This will render a partial view *if* the composition is present on the current page. Currently that is the case for Home and Blog posts on the site.
 

14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md

@@ -2,9 +2,9 @@
 
 The final piece to the puzzle is adding the partial view that will be rendered when the composition is present. To do this:
 
-1. Go to the **Settings** section
+1. Go to the **Settings** section.
 
-2. Right-click on *Partial Views* and choose *Create...* > *New empty partial view*
+2. Click on **Partial Views** and select **Create...** > **New empty partial view**
 
     The partial view comes with a standard view model `@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage`. We are using compositions and only render this view on pages where the composition exists, which means we need to be a little more specific.