Update readme (#654)

* edit readme

* edits

* edits

Co-authored-by: Elise Yang <[email protected]>

Author: elisenyang

readme.md

@@ -1,21 +1,29 @@
-# Microsoft Graph Toolkit
+<h1 align="center">
+  <img height="120" src="https://github.com/microsoftgraph/microsoft-graph-toolkit/raw/main/assets/graff.png" title="Graff the Giraffe">
+  <br>
+  Microsoft Graph Toolkit
+</h1>
 
-<img align="left" height="150" src="https://github.com/microsoftgraph/microsoft-graph-toolkit/raw/main/assets/graff.png" title="Graff the Giraffe">
+<h4 align="center">Web Components powered by <a href="https://graph.microsoft.com">Microsoft Graph</a></h4>
 
-[![NPM](https://img.shields.io/npm/v/@microsoft/mgt.svg)](https://www.npmjs.com/package/@microsoft/mgt) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/microsoftgraph/msgraph-sdk-javascript) [![stackoverflow](https://img.shields.io/stackexchange/stackoverflow/t/microsoft-graph-toolkit.svg)](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit)
-[![Build Status](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_apis/build/status/microsoftgraph.microsoft-graph-toolkit?branchName=main)](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_build/latest?definitionId=1&branchName=main) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@microsoft/mgt) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/main/badge/badge-storybook.svg?sanitize=true)](https://mgt.dev)
+<p align="center">
+  <a href="https://www.npmjs.com/package/@microsoft/mgt"><img src="https://img.shields.io/npm/v/@microsoft/mgt.svg"></a> <a href="https://github.com/microsoftgraph/msgraph-sdk-javascript"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg"></a> <a href="https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit"><img src="https://img.shields.io/stackexchange/stackoverflow/t/microsoft-graph-toolkit.svg"></a>
+  <a href="https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_build/latest?definitionId=1&branchName=main"><br><img src="https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_apis/build/status/microsoftgraph.microsoft-graph-toolkit?branchName=main"></a> <a href="https://www.webcomponents.org/element/@microsoft/mgt"><img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg"></a> <a href="https://mgt.dev"><img src="https://raw.githubusercontent.com/storybooks/brand/main/badge/badge-storybook.svg?sanitize=true"></a>
+</p>
 
-The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.
+<p align="center">
+  The Microsoft Graph Toolkit is a collection of web components powered by Microsoft Graph. The components are functional, working automatically with Microsoft Graph, and work with any web framework and on all modern browsers.
+</p>
 
-Components are functional and work automatically with the Microsoft Graph
-
-Components work with any web framework and on all modern browsers. IE 11 is also supported
-
-[Here is a quick jsfiddle](https://jsfiddle.net/metulev/9phqxLd5/)
+<p align="center">
+  <a href="#components-&-documentation">Components & Documentation</a> • <a href="#getting-started">Getting Started</a> • <a href="#running-the-samples">Running the Samples</a> • <a href="#contribute">Contribute</a> • <a href="#feedback-and-requests">Feedback & Requests</a> <br>• <a href="#license">License</a> • <a href="#code-of-conduct">Code of Conduct</a>
+</p>
 
 ## Components & Documentation
 
-The toolkit currently includes the following components:
+You can explore components and samples with the [playground](https://mgt.dev) powered by storybook.
+
+The Toolkit currently includes the following components:
 
 * [mgt-login](https://docs.microsoft.com/graph/toolkit/components/login)
 * [mgt-person](https://docs.microsoft.com/graph/toolkit/components/person)
@@ -27,21 +35,26 @@ The toolkit currently includes the following components:
 * [mgt-get](https://docs.microsoft.com/graph/toolkit/components/get)
 * [mgt-teams-channel-picker](https://docs.microsoft.com/en-us/graph/toolkit/components/teams-channel-picker)
 
-And the following providers:
+The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components. The Toolkit contains the following providers:
 
 * [Msal Provider](https://docs.microsoft.com/graph/toolkit/providers/msal)
 * [SharePoint Provider](https://docs.microsoft.com/graph/toolkit/providers/sharepoint)
 * [Teams Provider](https://docs.microsoft.com/graph/toolkit/providers/teams)
 * [Proxy Provider](https://docs.microsoft.com/graph/toolkit/providers/proxy)
 * [Simple Provider](https://docs.microsoft.com/graph/toolkit/providers/custom)
 
-[View the full documentation](https://docs.microsoft.com/graph/toolkit/overview)
+You can also create your own providers by extending the [IProvider](https://docs.microsoft.com/graph/toolkit/providers/custom) abstract class.
 
-You can now explore components and samples with the [playground](https://mgt.dev) powered by storybook.
+[View the full documentation](https://docs.microsoft.com/graph/toolkit/overview)
 
 ## Getting Started
 
-[Watch the Getting Started Video](https://www.youtube.com/watch?v=oZCGb2MMxa0)
+The following guides are available to help you get started with the Toolkit:
+* [Build a web application (vanilla JS)](https://docs.microsoft.com/graph/toolkit/get-started/build-a-web-app)
+* [Build a SharePoint Web Part](https://docs.microsoft.com/graph/toolkit/get-started/build-a-sharepoint-web-part)
+* [Build a Microsoft Teams Tab](https://docs.microsoft.com/graph/toolkit/get-started/build-a-microsoft-teams-tab)
+* [Use the Toolkit with React](https://docs.microsoft.com/graph/toolkit/get-started/use-toolkit-with-react)
+* [Use the Toolkit with Angular](https://docs.microsoft.com/graph/toolkit/get-started/use-toolkit-with-angular)
 
 You can use the components by referencing the loader directly (via unpkg), or installing the npm package
 
@@ -114,13 +127,7 @@ or, if you already use MSAL.js and have a `UserAgentApplication`, you can use it
 
   Providers.globalProvider = new MsalProvider({ userAgentApplication: app });
 </script>
-```
-
-## Providers
-
-The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider exposes authentication and Microsoft Graph apis used by the components to call into the Microsoft Graph.
-
-The toolkit contains providers for [MSAL](https://docs.microsoft.com/graph/toolkit/providers/msal), [SharePoint](https://docs.microsoft.com/graph/toolkit/providers/sharepoint), and [Teams](https://docs.microsoft.com/graph/toolkit/providers/teams). You can also create your own providers by extending the [IProvider](https://docs.microsoft.com/graph/toolkit/providers/custom) abstract class.
+``` 
 
 ## Running the samples