From 5663eed19b3bf1fcc02ec738274b72e4caf8e31f Mon Sep 17 00:00:00 2001 From: Eric Joel Hernandez <81542075+ericjhernandezj@users.noreply.github.com> Date: Sat, 31 Dec 2022 14:47:54 -0500 Subject: [PATCH] Add Spanish translation for using-a-code-editor assignment.md --- .../translations/assignment.es.md | 252 ++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 8-code-editor/1-using-a-code-editor/translations/assignment.es.md diff --git a/8-code-editor/1-using-a-code-editor/translations/assignment.es.md b/8-code-editor/1-using-a-code-editor/translations/assignment.es.md new file mode 100644 index 00000000..1b847f84 --- /dev/null +++ b/8-code-editor/1-using-a-code-editor/translations/assignment.es.md @@ -0,0 +1,252 @@ +# Crear un sitio web de currículum usando vscode.dev + +_¿Qué tan genial sería que un reclutador te pida tu currículum y le envíes una URL?_ 😎 + + + + + +## Objetivos + +Después de esta tarea, aprenderás a: + +- Crear un sitio web para mostrar tu currículum + +### Prerequisitos + +1. Una cuenta de GitHub. Ve a [GitHub](https://github.com/) y crea una cuenta si aún no lo has hecho. + +## Pasos + +**Paso 1:** Crea un nuevo repositorio de GitHub y asígnale el nombre `my-resume` + + +**Paso 2** Crea un archivo `index.html` en tu repositorio. Agregaremos al menos un archivo mientras aún estés en github.com porque no puedes abrir un repositorio vacío en vscode.dev + +Haz clic en el enlace `crear un nuevo archivo`, escribe el nombre `index.html` y selecciona el botón `Commit new file` + +![Create a new file on github.com](../../images/new-file-github.com.png) + + +**Paso 3:** Abre [VSCode.dev](https://vscode.dev) y selecciona el botón `Open Remote Repository` + +Copia la URL en el repositorio que acabas de crear para tu sitio de currículum y pégalo en el cuadro de entrada: + +_Reemplaza `your-username` con tu nombre de usuario de GitHub_ + +``` +https://github.com/your-username/my-resume +``` + +✅ Si tienes éxito, verás que su proyecto y el archivo index.html se abren en el editor de texto del navegador. + +![Create a new file](../../images/project-on-vscode.dev.png) + + +**Paso 4:** Abre el archivo `index.html`, pega el código a continuación en tu área de código y guarda + +
+ HTML code responsible for the content on your resume website. + + + + + + + Your Name Goes Here! + + + +
+ +
+
+

ABOUT

+ +

Write a blurb about yourself!

+
+
+

WORK EXPERIENCE

+ +

Job Title

+

+ Organization Name Goes Here | Start Month – End Month +

+
    +
  • Task 1 - Write what you did!
    • +
  • Task 2 - Write what you did!
    • +
  • Write the outcomes/impact of your contribution
    • + +
+

Job Title 2

+

+ Organization Name Goes Here | Start Month – End Month +

+
    +
  • Task 1 - Write what you did!
    • +
  • Task 2 - Write what you did!
    • +
  • Write the outcomes/impact of your contribution
    • + +
+
+
+
+ + +
+ +Agrega los detalles de tu currículum para reemplazar el _texto del marcador_ en el código HTML + +**Paso 5:** Coloca el cursor sobre la carpeta My-Resume, haz clic en el icono `New File ...` y crea 2 archivos nuevos en tu proyecto: los archivos `style.css` y `codeswing.json` + +**Paso 6:** Abre el archivo `style.css`, pega el código de abajo y guarda + +
+ CSS code to format the layout of the site. + + body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + max-width: 960px; + margin: auto; + } + h1 { + font-size: 3em; + letter-spacing: .6em; + padding-top: 1em; + padding-bottom: 1em; + } + + h2 { + font-size: 1.5em; + padding-bottom: 1em; + } + + h3 { + font-size: 1em; + padding-bottom: 1em; + } + main { + display: grid; + grid-template-columns: 40% 60%; + margin-top: 3em; + } + header { + text-align: center; + margin: auto 2em; + } + + section { + margin: auto 1em 4em 2em; + } + + i { + margin-right: .5em; + } + + p { + margin: .2em auto + } + + hr { + border: none; + background-color: lightgray; + height: 1px; + } + + h1, h2, h3 { + font-weight: 100; + margin-bottom: 0; + } + #mainLeft { + border-right: 1px solid lightgray; + } + +
+ +**Paso 6:** Abre el archivo `codeswing.json`, pega el código de abajo y guarda + + { + "scripts": [], + "styles": [] + } + + +**Paso 7:** Instala la `extensión Codeswing` para visualizar el sitio web del currículum en el área del código. + +Haz clic en el icono _`Extensiones`_ en la barra de actividades y escribe Codeswing. Haz clic en el _botón de instalación azul_ en la barra de actividad expandida para instalar o usa el botón de instalación que aparece en el área del código una vez que selecciones la extensión para cargar información adicional. Inmediatamente después de instalar la extensión, observa tu área de código para ver los cambios en tu proyecto 😃 + +![Install extensions](../../images/install-extension.gif) + +Esto es lo que verás en su pantalla después de instalar la extensión. + +![Codeswing extension in action](../../images/after-codeswing-extension-pb.png) + +Si estás satisfecho con los cambios que realizaste, coloca el cursor sobre la carpeta "Cambios" y haz clic en el botón "+" para realizar los cambios. + +Escribe un mensaje de confirmación _(Una descripción del cambio que has realizado en el proyecto)_ y confirma tus cambios haciendo clic en el `check`. Una vez que hayas terminado de trabajar en tu proyecto, selecciona el ícono del menú de hamburguesa en la parte superior izquierda para regresar al repositorio en GitHub. + +Felicidades 🎉 Acabas de crear tu sitio web de currículum utilizando vscode.dev en unos pocos pasos. +## 🚀 Desafío + +Abre un repositorio remoto en el que tenga permisos para realizar cambios y actualiza algunos archivos. A continuación, intenta crear una nueva rama con tus cambios y realiza un Pull Request. + + + +## Revisión y Autoestudio + +Leer más sobre [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) y algunas de sus otras características.