Updatesite (microsoft#76)

* moving extend to vsts

* updating css

* removing unwanted steps

* homepage aligned

* adding missing labs

* modified pre-requisites

* updated prerequisites, markdown syntax

* updating sidebar, homepage

* removing sidebar

* adding a separate group

_data/sidebars/vsts2.yml

@@ -1,7 +1,7 @@
 # This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
 entries:
 - title: sidebar
-  product: Extend and Integrate with VSTS
+  product: Visual Studio Team Services
   version: 
-  url: /labs/vstsextend
+  url: /labs/vsts
   folders:

_includes/topnav.html

@@ -5,7 +5,7 @@
     <div>
         <div class="topnavlinks">
             <div class="navbar-header">
-                <a class="fa fa-home fa-lg navbar-brand" href="{{site.url}}{{site.baseurl}}"><img src="{{site.url}}{{site.baseurl}}images/2017.png" /><span class="projectTitle">{{site.topnav_title}}</span></a>
+                <a class="fa-lg navbar-brand" href="{{site.url}}{{site.baseurl}}"><img src="{{site.url}}{{site.baseurl}}images/2017.png" /><span class="projectTitle">{{site.topnav_title}}</span></a>
                 <button type="button" class="custom-btn navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
                 <span class="sr-only">Toggle navigation</span>
@@ -34,7 +34,7 @@
                             </a>
                         </li>
                         <li>
-                            <a href="#" data-toggle="tooltip" data-placement="left" title="Send Feedback" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} &body=I have some feedback about the {{page.title}} page: ' + window.location.href;"><i class="fa fa-envelope-o"></i>
+                            <a href="#" data-toggle="tooltip" data-placement="left" title="Send Feedback" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} &body=I have some feedback about the {{page.title}} page: ' + window.location.href;">
                                 <img class="custom feedback_cls" /></a>
                         </li>
 

css/customstyles.css

@@ -1566,7 +1566,7 @@ div.labcols{
 }
 
 div.rowMain{
-    background-image: url("../images/almvm-hero-right-blue.png");
+    background-image: url("../images/banner2.png");
     display: block;
     background-color: skyblue;
     margin-top: 10px;
@@ -1696,4 +1696,10 @@ ul.sidebarlisting {
 span.topnavbreadcrump
 {
     font-size:14px;
+}
+
+
+li.extendlabslist{
+    margin: 20px 0px 20px 0px;
+
 }

labs/readme.md

@@ -9,19 +9,18 @@ comments: true
 
 ## Overview
 
-**About the Fabrikam Fiber Scenario** 
+### About the Fabrikam Fiber Scenario
 
 This set of hands-on-labs uses a fictional company, Fabrikam Fiber, as a backdrop to the scenarios you are learning about. Fabrikam Fiber provides cable television and related services to the United States. They are growing rapidly and have embraced Windows Azure to scale their customer-facing web site directly to end-users to allow them to self-service tickets and track technicians. They also use an on-premises ASP.NET MVC application for their customer service representatives to administer customer orders.
 
 In this set of hands-on labs, you will take part in a number of scenarios that involve the development and testing team at Fabrikam Fiber. The team, which consists of 8-10 people, has decided to use Visual Studio application lifecycle management tools to manage their source code, run their builds, test their web sites, and plan and track the project.
 
-## Pre-requisites 
+## Pre-requisites
 
-**Using VM with the pre-installed TFS**
+### Using VM with the pre-installed TFS
 
 In order to complete this lab you will need the Visual Studio 2017 virtual machine provided by Microsoft. For more information on acquiring and using this virtual machine, please see this blog post.
 
-
-**Using the VM with Visual Studio Team  Services**
+### Using the VM with Visual Studio Team Services
 
 In order to complete this lab with Visual Studio Team Services, please follow the instructions here

labs/vsts/Teams/readme.md

@@ -1,7 +1,7 @@
 ---
 title: Microsoft Teams Integration (Collaborate, Communicate and Celebrate)
 layout: page
-sidebar: vsts
+sidebar: vsts2
 permalink: /labs/vsts/teams/
 folder: /labs/vsts/teams/
 ---
@@ -21,51 +21,51 @@ hub for teamwork, that brings your teams, conversations, content and tools from
 
 1. Only VSTS accounts in the same organization (AAD tenant) can be used to integrate with your Microsoft Teams account.
 
-**You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start)**
+**You can start a free trial if you don't have Office365 account from [here](https://teams.microsoft.com/start){:target="_blank"}**
 
 In this lab, you’ll learn about how **Visual Studio Team Services** integrates with **Microsoft Teams** to provide a comprehensive chat and collaboration experience, across your Agile and development work.
 
 ## Getting started with Microsoft Teams
 
-1. Launch **Microsoft Teams** - you can either open the web app or download the app to your desktop from [here](https://teams.microsoft.com/dl/launcher/launcher.html?url=/_%23/l/home/0/0&type=home)
+1. Launch **Microsoft Teams** - you can either open the web app or download the app to your desktop from [here](https://teams.microsoft.com/dl/launcher/launcher.html?url=/_%23/l/home/0/0&type=home){:target="_blank"}
 
-   ![](images/2.png)
+   ![2](images/2.png)
 
 1. After launching the app, you will see the **General Team**.
 
-   ![](images/3.png)
+   ![3](images/3.png)
 
 1. Start adding Teams by clicking on the bottom left on **Add Team** button.
 
-   ![](images/4.png)
+   ![4](images/4.png)
 
 1. Hover your mouse to create a new team.
 
-   ![](images/5.png)
+   ![5](images/5.png)
 
 1. Give a name for your team and description if needed. Select the privacy settings and click on **Next**.
 
-   ![](images/6.png)
+   ![6](images/6.png)
 
 1. You should see the status when creating team.
 
-   ![](images/7.png)
+   ![7](images/7.png)
 
 1. Add members for your team in order to get notify the events that occur and also start conversations with your team members.
 
-   ![](images/8.png)
+   ![8](images/8.png)
 
 ## Integrating Visual Studio Team Services with Microsoft Teams
 
 **VSTS** integration with Microsoft Teams provides a comprehensive chat and collaborative experience across the development cycle. Teams can easily stay informed of important activities in your VSTS team projects with notifications and alerts on work items, pull requests, code commits, build and release.
 
 1. Click on ellipsis button for the **VSTS Team** that was created and select **Connectors**.
 
-   ![](images/9.png)
+   ![9](images/9.png)
 
 1. Select **Visual Studio Team Services** and add.
 
-   ![](images/10.png)
+   ![10](images/10.png)
 
 1. Select the following and click on **save**.
 
@@ -75,15 +75,15 @@ In this lab, you’ll learn about how **Visual Studio Team Services** integrates
    - Team
    - Event Type
 
-   ![](images/11.png)
+   ![11](images/11.png)
 
 1. You can see the list of connectors that are configured to your team from the configured section.
 
-    ![](images/24.png)
+    ![24](images/24.png)
 
 1. Since VSTS is configured now all the events will be seen under the  conversations tab. The events can be set accordingly depending upon the needs like **Work Item Updates, Build Summary** etc.
 
-    ![](images/25.png)
+    ![25](images/25.png)
 
 ## Working with Kanban Board within the Microsoft Teams
 
@@ -93,23 +93,23 @@ The Kanban board can be added using Tabs. **Tabs** allow team members to access
 
 1. Click on **+** icon to add new tab and select **Visual Studio**
 
-   ![](images/13.png)
+   ![13](images/13.png)
 
-   ![](images/14.png)
+   ![14](images/14.png)
 
 1. Select the account
 
-   ![](images/15.png)
+   ![15](images/15.png)
 
    {% include note.html content= "Only VSTS accounts in the same organization (AAD tenant) can be used to integrate with your Microsoft Teams account." %}
 
 1. Select the desired account from the list and click on **continue**
 
-   ![](images/16.png)
+   ![16](images/16.png)
 
 1. You can see the **Kanban Board** appearing in the tab.
 
-   ![](images/17.png)
+   ![17](images/17.png)
 
 1. All the work can be monitored during the daily standup's and the updates are real when the work items states are changed. It also allows us to customize the Kanban Board from within the Teams and synced.
 
@@ -119,7 +119,7 @@ Messages are a good way to connect and keep a history of the conversation. It's
 
 1. Start having conversations with your team members by selecting the **Conversations** tab.
 
-   ![](images/18.png)
+   ![18](images/18.png)
 
 1. All the conversations could be retrieved at anytime without losing the history which helps the entire team to have a collaborative experience
 
@@ -133,36 +133,36 @@ Channels are the biggest “containers” within a Team and contain content & co
 
 1. Select the **Team** that was created earlier and click on **elipsis.**
 
-   ![](images/26.png)
+   ![26](images/26.png)
 
 1. Give a name and description for your channel and click on **add.**
 
-   ![](images/27.png)
+   ![27](images/27.png)
 
 1. Once the channel is created, the conversations can be started amongst the team members.
 
-   ![](images/28.png)
+   ![28](images/28.png)
 
 ## Sharing the Contents
 
 Sharing the contents with team members is now easy with Microsoft Teams. You can attach any kind of document like **Word, PDF, GIF, Image** etc to make it easy for the teams to make sure that all are under one hood.
 
 1. Click on **Files** and select **Upload** to share a document with the team
 
-   ![](images/19.png)
+   ![19](images/19.png)
 
 1. Click on the document that was uploaded from the list to start editing and having a live conversation with your team members
 
-   ![](images/20.png)
+   ![20](images/20.png)
 
 1. Share the related websites within the Teams as Tabs. Click on **+** and select **Website**
 
-   ![](images/21.png)
+   ![21](images/21.png)
 
 1. Provide a name for the website and click on **save**. It appears on the channel where all of the team members can access to get a quick information if there were any updates done
 
-   ![](images/22.png)
+   ![22](images/22.png)
 
 1. This is how the website looks when added to the channel.
 
-   ![](images/23.png)
+   ![23](images/23.png)