docs: add quick installation page (angular#56816)

PR Close angular#56816

Author: bencodezen

adev/src/app/sub-navigation-data.ts

@@ -31,6 +31,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
  path: 'overview',
  contentPath: 'introduction/what-is-angular',
  },
+ {
+ label: 'Installation',
+ path: 'installation',
+ contentPath: 'introduction/installation',
+ },
  {
  label: 'Essentials',
  children: [

adev/src/content/introduction/installation.md

@@ -0,0 +1,96 @@
+<docs-decorative-header title="Installation" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+</docs-decorative-header>
+
+Get started with Angular quickly with online starters or locally with your terminal.
+
+## Play Online
+
+If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
+
+<docs-card-container>
+ <docs-card title="" href="/playground" link="Open on Playground">
+ The fastest way to play with an Angular app. No setup required.
+ </docs-card>
+</docs-card-container>
+
+## Setup a new project locally
+
+If you're starting a new project, you'll most likely want to create a local project so that you can use tooling such as Git.
+
+### Prerequisites
+
+- **Node.js** - v[^18.9.1 or newer](/reference/versions)
+- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/)
+- **Terminal** - Required for running Angular CLI commands
+
+### Instructions
+
+The following guide will walk you through setting up a local Angular project.
+
+#### Install Angular CLI
+
+Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and run the following command:
+
+<docs-code language="shell">
+
+npm install -g @angular/cli
+
+</docs-code>
+
+If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli) for more info.
+
+#### Create a new project
+
+In your terminal, run the CLI command `ng new` with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
+
+<docs-code language="shell">
+
+ng new <project-name>
+
+</docs-code>
+
+You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.
+
+If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
+
+After you select the configuration options and the CLI runs through the setup, you should see the following message:
+
+```shell
+✔ Packages installed successfully.
+ Successfully initialized git.
+```
+
+At this point, you're now ready to run your project locally!
+
+#### Running your new project locally
+
+In your terminal, switch to your new Angular project.
+
+<docs-code language="shell">
+
+cd my-first-angular-app
+
+</docs-code>
+
+All of your dependencies should be installed at this point (which you can verify by checking for the existent for a `node_modules` folder in your project), so you can start your project by running the command:
+
+<docs-code language="shell">
+
+npm start
+
+</docs-code>
+
+If everything is successful, you should see a similar confirmation message in your terminal:
+
+```shell
+Watch mode enabled. Watching for file changes...
+NOTE: Raw file sizes do not reflect development server per-request transformations.
+ ➜ Local: http://localhost:4200/
+ ➜ press h + enter to show help
+```
+
+And now you can visit the path in `Local` (e.g., `http://localhost:4200`) to see your application. Happy coding! 🎉
+
+## Next steps
+
+Now that you've created your Angular project, you can learn more about Angular in our [Essentials guide](/essentials) or choose a topic in our in-depth guides!