translate: translations for first app Angular tutorial

Fixes #163

Author: ricardochl

adev-es/src/content/tutorials/first-app/intro/README.en.md

@@ -0,0 +1,86 @@
+# Build your first Angular app
+
+This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
+
+You can do as many or as few as you would like and you can do them in any order.
+
+HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!
+
+<docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>
+
+## Before you start
+
+For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.
+
+### Your experience
+
+The lessons in this tutorial assume that you have experience with the following:
+
+1. Created an HTML web page by editing the HTML directly.
+1. Programmed web site content in JavaScript.
+1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
+1. Used command-line instructions to perform tasks on your computer.
+
+### Your equipment
+
+These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems.
+
+NOTE: Look for alerts like this one, which call out steps that may only be for your local editor.
+
+## Conceptual preview of your first Angular app
+
+The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
+This app uses features that are common to many Angular apps.
+
+<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
+
+## Local development environment
+
+NOTE: This step is only for your local environment!
+
+Perform these steps in a command-line tool on the computer you want to use for this tutorial.
+
+<docs-workflow>
+
+<docs-step title="Identify the version of `node.js` that Angular requires">
+Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
+
+From a **Terminal** window:
+
+1. Run the following command: `node --version`
+1. Confirm that the version number displayed meets the requirements.
+   </docs-step>
+
+<docs-step title="Install the correct version of `node.js` for Angular">
+If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
+</docs-step>
+
+<docs-step title="Install the latest version of Angular">
+With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
+
+From a **Terminal** window run the following command: `npm install -g @angular/cli`.
+</docs-step>
+
+<docs-step title="Install integrated development environment (IDE)">
+You are free to use any tool you prefer to build apps with Angular. We recommend the following:
+
+1. [Visual Studio Code](https://code.visualstudio.com/)
+2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
+3. [WebStorm](https://www.jetbrains.com/webstorm/)
+   </docs-step>
+
+<docs-step title="Optional: set-up your AI powered IDE">
+
+In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
+
+</docs-step>
+
+</docs-workflow>
+
+For more information about the topics covered in this lesson, visit:
+
+<docs-pill-row>
+  <docs-pill href="/overview" title="What is Angular"/>
+  <docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
+  <docs-pill href="/cli" title="Angular CLI Reference"/>
+</docs-pill-row>

adev-es/src/content/tutorials/first-app/intro/README.md

@@ -1,86 +1,86 @@
-# Build your first Angular app
+# Construye tu primera aplicación Angular
 
-This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
+Este tutorial consiste en lecciones que introducen los conceptos de Angular que necesitas conocer para comenzar a programar en Angular.
 
-You can do as many or as few as you would like and you can do them in any order.
+Puedes hacer tantas como quieras, o pocas, y puedes hacerlas en cualquier orden.
 
-HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!
+ÚTIL: ¿Prefieres video? También tenemos un [curso completo en YouTube](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) para este tutorial.
 
 <docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>
 
-## Before you start
+## Antes de comenzar
 
-For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.
+Para obtener la mejor experiencia con este tutorial, revisa estos requisitos para asegurarte de que tienes lo necesario para tener éxito.
 
-### Your experience
+### Tu experiencia
 
-The lessons in this tutorial assume that you have experience with the following:
+Las lecciones en este tutorial asumen que tienes experiencia con lo siguiente:
 
-1. Created an HTML web page by editing the HTML directly.
-1. Programmed web site content in JavaScript.
-1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
-1. Used command-line instructions to perform tasks on your computer.
+1. Has creado una página web HTML editando el HTML directamente.
+1. Has programado contenido de sitios web en JavaScript.
+1. Has leído contenido de hojas de estilo en cascada (CSS) y entiendes cómo se usan los selectores.
+1. Has usado instrucciones de línea de comandos para realizar tareas en tu computadora.
 
-### Your equipment
+### Tu equipo
 
-These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems.
+Estas lecciones se pueden completar usando una instalación local de las herramientas de Angular o en nuestro editor integrado. El desarrollo local de Angular se puede completar en sistemas Windows, MacOS o Linux.
 
-NOTE: Look for alerts like this one, which call out steps that may only be for your local editor.
+NOTA: Busca alertas como esta, que señalan pasos que pueden ser solo para tu editor local.
 
-## Conceptual preview of your first Angular app
+## Vista previa conceptual de tu primera aplicación Angular
 
-The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
-This app uses features that are common to many Angular apps.
+Las lecciones en este tutorial crean una aplicación Angular que lista casas en renta y muestra los detalles de casas individuales.
+Esta aplicación utiliza características que son comunes a muchas aplicaciones Angular.
 
-<img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
+<img alt="Resultado de la página de inicio de la aplicación de viviendas" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
 
-## Local development environment
+## Entorno de desarrollo local
 
-NOTE: This step is only for your local environment!
+NOTA: ¡Este paso es solo para tu entorno local!
 
-Perform these steps in a command-line tool on the computer you want to use for this tutorial.
+Realiza estos pasos en una herramienta de línea de comandos en la computadora que quieras usar para este tutorial.
 
 <docs-workflow>
 
-<docs-step title="Identify the version of `node.js` that Angular requires">
-Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
+<docs-step title="Identifica la versión de `node.js` que Angular requiere">
+Angular requiere una versión LTS activa o LTS de mantenimiento de Node. Confirmemos tu versión de `node.js`. Para obtener información sobre los requisitos de versión específicos, consulta la propiedad engines en el [archivo package.json](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
 
-From a **Terminal** window:
+Desde una ventana de **Terminal**:
 
-1. Run the following command: `node --version`
-1. Confirm that the version number displayed meets the requirements.
+1. Ejecuta el siguiente comando: `node --version`
+1. Confirma que el número de versión mostrado cumple con los requisitos.
    </docs-step>
 
-<docs-step title="Install the correct version of `node.js` for Angular">
-If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
+<docs-step title="Instala la versión correcta de `node.js` para Angular">
+Si no tienes una versión de `node.js` instalada, sigue las [instrucciones de instalación en nodejs.org](https://nodejs.org/en/download/)
 </docs-step>
 
-<docs-step title="Install the latest version of Angular">
-With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
+<docs-step title="Instala la última versión de Angular">
+Con `node.js` y `npm` instalados, el siguiente paso es instalar el [Angular CLI](tools/cli) que proporciona herramientas para el desarrollo efectivo de Angular.
 
-From a **Terminal** window run the following command: `npm install -g @angular/cli`.
+Desde una ventana de **Terminal** ejecuta el siguiente comando: `npm install -g @angular/cli`.
 </docs-step>
 
-<docs-step title="Install integrated development environment (IDE)">
-You are free to use any tool you prefer to build apps with Angular. We recommend the following:
+<docs-step title="Instala el entorno de desarrollo integrado (IDE)">
+Eres libre de usar cualquier herramienta que prefieras para construir aplicaciones con Angular. Recomendamos lo siguiente:
 
 1. [Visual Studio Code](https://code.visualstudio.com/)
-2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
+2. Como paso opcional pero recomendado, puedes mejorar aún más tu experiencia de desarrollo instalando el [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
 3. [WebStorm](https://www.jetbrains.com/webstorm/)
    </docs-step>
 
-<docs-step title="Optional: set-up your AI powered IDE">
+<docs-step title="Opcional: configura tu IDE con IA">
 
-In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
+En caso de que estés siguiendo este tutorial en tu IDE con IA preferido, [consulta las reglas de prompt y mejores prácticas de Angular](/ai/develop-with-ai).
 
 </docs-step>
 
 </docs-workflow>
 
-For more information about the topics covered in this lesson, visit:
+Para obtener más información sobre los temas cubiertos en esta lección, visita:
 
 <docs-pill-row>
-  <docs-pill href="/overview" title="What is Angular"/>
-  <docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
-  <docs-pill href="/cli" title="Angular CLI Reference"/>
+  <docs-pill href="/overview" title="¿Qué es Angular?"/>
+  <docs-pill href="/tools/cli/setup-local" title="Configuración del entorno local y espacio de trabajo"/>
+  <docs-pill href="/cli" title="Referencia del CLI de Angular"/>
 </docs-pill-row>

adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.en.md

@@ -0,0 +1,122 @@
+# Hello world
+
+This first lesson serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app. In this lesson, we'll update the application to display the famous text, "Hello World".
+
+<docs-video src="https://www.youtube.com/embed/UnOwDuliqZA?si=uML-cDRbrxmYdD_9"/>
+
+## What you'll learn
+
+The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app.
+
+NOTE: If you are working with the embedded editor, skip to [step four](#create-hello-world).
+When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right.
+
+<docs-workflow>
+
+<docs-step title="Download the default app">
+Start by clicking the "Download" icon in the top right pan of the code editor. This will download a `.zip` file containing the source code for this tutorial. Open this in your local Terminal and IDE then move on to testing the default app.
+
+At any step in the tutorial, you can click this icon to download the step's source code and start from there.
+</docs-step>
+
+<docs-step title="Test the default app">
+In this step, after you download the default starting app, you build the default Angular app.
+This confirms that your development environment has what you need to continue the tutorial.
+
+In the **Terminal** pane of your IDE:
+
+1. In your project directory, navigate to the `first-app` directory.
+1. Run this command to install the dependencies needed to run the app.
+
+   ```shell
+   npm install
+   ```
+
+1. Run this command to build and serve the default app.
+
+   ```shell
+   ng serve
+   ```
+
+   The app should build without errors.
+
+1. In a web browser on your development computer, open `http://localhost:4200`.
+1. Confirm that the default web site appears in the browser.
+1. You can leave `ng serve` running as you complete the next steps.
+   </docs-step>
+
+<docs-step title="Review the files in the project">
+In this step, you get to know the files that make up a default Angular app.
+
+In the **Explorer** pane of your IDE:
+
+1. In your project directory, navigate to the `first-app` directory.
+1. Open the `src` directory to see these files.
+   1. In the file explorer, find the Angular app files (`/src`).
+      1. `index.html` is the app's top level HTML template.
+      1. `styles.css` is the app's top level style sheet.
+      1. `main.ts` is where the app starts running.
+      1. `favicon.ico` is the app's icon, just as you would find in any web site.
+   1. In the file explorer, find the Angular app's component files (`/app`).
+      1. `app.ts` is the source file that describes the `app-root` component.
+         This is the top-level Angular component in the app. A component is the basic building block of an Angular application.
+         The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
+
+         In this app, the styles are in a separate file while the component's code and HTML template are in this file.
+
+      1. `app.css` is the style sheet for this component.
+      1. New components are added to this directory.
+
+   1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
+   1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
+      1. `.angular` has files required to build the Angular app.
+      1. `.e2e` has files used to test the app.
+      1. `.node_modules` has the node.js packages that the app uses.
+      1. `angular.json` describes the Angular app to the app building tools.
+      1. `package.json` is used by `npm` (the node package manager) to run the finished app.
+      1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.
+
+After you have reviewed the files that make up an Angular app project, continue to the next step.
+</docs-step>
+
+<docs-step title="Create `Hello World`">
+In this step, you update the Angular project files to change the displayed content.
+
+In your IDE:
+
+1. Open `first-app/src/index.html`.
+   NOTE: This step and the next are only for your local environment!
+
+1. In `index.html`, replace the `<title>` element with this code to update the title of the app.
+
+   <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/>
+
+   Then, save the changes you just made to `index.html`.
+
+1. Next, open `first-app/src/app/app.ts`.
+1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
+
+   <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
+
+1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.
+
+   <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/>
+
+   Then, save the changes you made to `app.ts`.
+
+1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again.
+1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays _Homes_ in the title and _Hello world_ in the body of your app:
+   <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
+   </docs-step>
+
+</docs-workflow>
+
+SUMMARY: In this lesson, you updated a default Angular app to display _Hello world_.
+In the process, you learned about the `ng serve` command to serve your app locally for testing.
+
+For more information about the topics covered in this lesson, visit:
+
+<docs-pill-row>
+  <docs-pill href="guide/components" title="Angular Components"/>
+  <docs-pill href="tools/cli" title="Creating applications with the Angular CLI"/>
+</docs-pill-row>