Merge pull request #7622 from microsoft/ui-customization

Add UI customization video

Author: ntrogh

docs/getstarted/userinterface.md

@@ -7,13 +7,13 @@ PageTitle: Visual Studio Code User Interface
 DateApproved: 09/05/2024
 MetaDescription: A quick overview of the Visual Studio Code user interface. Learn about the editor, window management, and special UI to handle source control, extension management, full text search and more.
 ---
-# User Interface
+# User interface
 
 At its heart, Visual Studio Code is a code editor. Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.
 
-![Screenshot of the VS Code user interface, highlighting the five main areas.](images/userinterface/hero.png)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/nORT3-kONgA" title="Transform your VS Code user interface" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
-## Basic Layout
+## Basic layout
 
 VS Code comes with a simple and intuitive layout that maximizes the space provided for the editor, while leaving ample room to browse and access the full context of your folder or project. The user interface is divided into five main areas:
 
@@ -23,6 +23,8 @@ VS Code comes with a simple and intuitive layout that maximizes the space provid
 * **Activity Bar** -  Located on the far left-hand side. Lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled. You can change the position of the Activity Bar.
 * **Panel** - An additional space for views below the editor region. By default, it contains output, debug information, errors and warnings, and an integrated terminal. The Panel can also be moved to the left or right for more vertical space.
 
+![Screenshot of the VS Code user interface, highlighting the five main areas.](images/userinterface/hero.png)
+
 >**Tip:** A Secondary Side Bar is also available to display views opposite the Primary Side Bar. You can show it with `kb(workbench.action.toggleAuxiliaryBar)` and drag a view from the Primary Side Bar to the Secondary Side Bar.
 
 Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.
@@ -31,7 +33,7 @@ Open files in each editor are displayed with tabbed headers (Tabs) at the top of
 
 >**Tip:** You can move the Primary Side Bar to the right hand side by right-clicking the Activity Bar and selecting **Move Primary Side Bar Right** or toggle its visibility (`kb(workbench.action.toggleSidebarVisibility)`).
 
-## Side by Side Editing
+## Side by side editing
 
 You can open as many editors as you like side by side vertically and horizontally. If you already have an editor open, there are multiple ways of opening another editor to the side:
 
@@ -52,7 +54,7 @@ When you have more than one editor open, you can switch between them quickly by
 
 >**Tip:** You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.
 
-### Editor Groups
+### Editor groups
 
 When you split an editor (using the **Split Editor** or **Open to the Side** commands), a new editor region (edit group) is created which can hold a group of items. You can open as many editor groups as you like side by side vertically and horizontally.
 
@@ -68,7 +70,7 @@ You can drag and drop editor groups on the workbench, move individual tabs betwe
 
 You can split the current editor without creating a new editor group with the **View: Split Editor in Group** command (`kb(workbench.action.splitEditorInGroup)`). To learn more about this editor mode and specific commands for navigating between the two sides, you can read the section in the [Custom Layout](/docs/editor/custom-layout.md#split-in-group) article.
 
-### Floating Windows
+### Floating windows
 
 You can move editors into their own floating windows with the **Move into New Window** or **Copy into New Window** (`kb(workbench.action.copyEditorToNewWindow)`) commands. To learn more about floating editor windows, you can read the section in the [Custom Layout](/docs/editor/custom-layout.md#floating-editor-windows) article.
 
@@ -92,7 +94,7 @@ Sticky Scroll shows the starting lines of currently visible nested scopes at the
 
 Sticky Scroll uses several different content models to create its headings. It is possible to choose between the outline provider model, the folding provider model, and the indentation model to determine which lines to display in the Sticky Scroll area. If a model is not available for the current language, VS Code falls back to the next model in the  order given above. The default model initially used comes from the `setting(editor.stickyScroll.defaultModel)` setting.
 
-### Indent Guides
+### Indent guides
 
 The editor shows indentation guides (vertical lines) which help you quickly see matching indent levels. If you would like to disable indent guides, you can set `"editor.guides.indentation": false` in your user or workspace [settings](/docs/getstarted/settings.md).
 
@@ -233,7 +235,7 @@ Zen Mode can be further tuned with the following settings:
 * `setting(zenMode.centerLayout)` - Use [Centered editor layout](#centered-editor-layout). Default `true`.
 * `setting(zenMode.silentNotifications)` - Do not display notifications. Default `true`.
 
-### Centered Editor Layout
+### Centered editor layout
 
 Centered editor layout allows you to center align the editor area. This is useful when working with a single editor on a large monitor. You can use the side borders to resize the view (hold down the `Alt` key to independently move the sides).