Merge branch 'master' into jose8-02.1-background

tommygonzaleza · web-flow · commit a787993dad22 · 2023-03-29T17:59:54.000-04:00
diff --git a/README.es.md b/README.es.md
@@ -17,7 +17,7 @@
 
 ## En este tutorial aprenderás los siguientes conceptos:
 
-1. Usar cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta `<style>` o usando una hoja de estilo externa `<link>`.
+1. Cómo aplicar CSS a su sitio web de 3 maneras diferentes: en línea, agrupándolos dentro de una etiqueta `<style>` o usando una hoja de estilos externa `<link>`.
 
 2. Seleccionar elementos HTML de su sitio web para aplicar los estilos.
 
@@ -33,7 +33,7 @@
 <ol>
   <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a></li>
   <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5 </a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>← 🔥 estás aquí</li>
+  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>← 🔥 Estás aquí</li>
     <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
   <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
 </ol>
@@ -48,7 +48,7 @@ Una completa selección de Ejercicios autograduados sobre CSS ¡para cualquier i
 
 1. Instala learnpack, el package manager para tutoriales de aprendizaje y el html compiler plugin para learnpack, asegúrate también de tener node.js 12+:
 
-```
+```bash
 $ npm i learnpack -g
 $ learnpack plugins:install learnpack-html
 ```
@@ -68,15 +68,11 @@ $ npm i jest@24.8.0 -g
 $ learnpack start
 ```
 
-<p align="center">
-  <img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
-</p>
-
-Nota: Los ejercicios slon autograduados pero los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y los uses solo como una recomendación o pueden frustrarte.
+Nota: Los ejercicios son autograduados, pero los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
 <!-- endhide -->
 ## ¿Cómo están organizados los ejercicios?
 
-Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos:
+Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
 
 1. **index.html:** representa el archivo de entrada para el ejercicio.
 2. **styles.css:** contiene los estilos y reglas de CSS
diff --git a/README.md b/README.md
@@ -12,12 +12,12 @@
   </tr>
 </table>
 
-Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any question. 
+Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! [DM me on twitter](https://twitter.com/alesanchezr) if you have any questions. 
 <!-- endhide -->
 
 ## You'll be learning the following concepts:
 
-1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an external stylesheet `<link>`.
+1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag, or using an external stylesheet `<link>`.
 
 2. Selecting HTML Elements from your website to apply the styles to.
 
@@ -33,12 +33,12 @@ Hi! I'm [Alejandro Sanchez @alesanchezr](https://github.com/alesanchezr), really
 <ol>
   <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a></li>
     <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a></li>
-  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a>← 🔥 your are here now</li>
+  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a>← 🔥 You are here now</li>
   <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Learn CSS Layouts</a></li>
   <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Learn Bootstrap</a></li>
 </ol>
 
-Complete selection of autograded CSS exercises, anyone interested in learning CSS!
+Complete selection of autograded CSS exercises, for anyone interested in learning CSS!
 
 
 ## One click installation:
@@ -47,9 +47,9 @@ Complete selection of autograded CSS exercises, anyone interested in learning CS
 
 ## Manual installation
 
-1) Install the learnpack package manager for education and the html plugin to compile an test html exercises: 
+1) Install the learnpack package manager for education and the html plugin to compile and test html exercises: 
 
-```
+```bash
 $ npm i learnpack -g
 $ learnpack plugins:install learnpack-html
 ```
@@ -60,20 +60,21 @@ $ learnpack plugins:install learnpack-html
 $ learnpack install css-tutorial-exercises-course
 ```
 
-Note: Once you finish downloading, you will need to `cd` into the exercises folder and you will find a "exercises" folder that contains all the exercises within.
+Note: Once you finish downloading, you will need to `cd` into the exercises folder which contains all the exercises.
 
-3) Start the tutorial/exercises by running the following command at the same level were your learn.json file is:
+3) Start the tutorial/exercises by running the following command at the same level where your learn.json file is:
 
 ```sh
 $ npm i jest@24.8.0 -g
 $ learnpack start
 ```
 
-Note: The exercises have automatic grading but its very rigid and strict, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated.
+Note: The exercises have automatic grading but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion or you may get frustrated.
+
 <!-- endhide -->
 ## How are the exercises organized?
 
-Each exercise is a small react application containing the following files:
+Each exercise is a small React application containing the following files:
 
 1. **index.html:** all websites and exercises start from the index.html.
 2. **styles.css:** your CSS code goes here, some exercises will make you update this file.
diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-Welcome/README.es.md
@@ -6,22 +6,22 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
 
 Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂
 
-Aprender a programar es dificil ¡Probablemente necesitarás coaching! Envíame un DM vía Twitter si tienes alguna duda.
+Aprender a programar es difícil ¡Probablemente necesitarás coaching! Envíame un DM vía Twitter si tienes alguna duda.
 
 Durante este curso aprenderás los siguientes conceptos:
 
 1. Cómo aplicar CSS a tu sitio web de tres formas diferentes:
-Inline, agrupando todo dentro de la etiqueta `<style>` o usando una hoja de estilos externa `<link>`,
+Inline, agrupando todo dentro de la etiqueta `<style>` o usando una hoja de estilos externa `<link>`.
 
-2. Seleccionar elementos HTML para tu sitio web para aplicarle estilos,
+2. Seleccionar elementos HTML de su sitio web para aplicarle estilos.
 
-3. Aplicar reglas CSS (estilos) a esos elementos,
+3. Aplicar reglas CSS (estilos) a esos elementos.
 
-4. A usar las reglas CSS más populares,
+4. Utilizar las reglas CSS más populares.
 
 5. Aprender los trucos más populares de CSS.
 
-Como te habrás dado cuenta, HTML sólo te permite crear sitios web básicos. Nadie quiere ver un sitio web en blanco con un texto horrible. ¡Así que es hora de aprender CSS! ¡Aprende CSS para que tu sitio web sea hermoso ¡Hagámos que brille!
+Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nadie quiere ver un sitio web en blanco con un texto horrible. ¡Así que es hora de aprender CSS! ¡Aprende CSS para que tu sitio web sea hermoso ¡Hagamos que brille!
 
 ## Colaboradores
 
diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md
@@ -6,11 +6,11 @@ intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
 
 My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂
 
-Learning to code is hard, you will problably need coaching! DM me on twitter if you have any question.
+Learning to code is hard, you will probably need coaching! DM me on twitter if you have any questions.
 
 During this course you will be learning the following concepts:
 
-1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an external stylesheet `<link>`,
+1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag, or using an external stylesheet `<link>`,
 
 2. Selecting HTML Elements from your website to apply the styles to.
 
@@ -20,7 +20,7 @@ During this course you will be learning the following concepts:
 
 5. Learn the most popular CSS Tricks.
 
-As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what is CSS all about! Learn CSS to make your website beautiful. Let's make it shine!
+As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what CSS is all about! Learn CSS to make your website beautiful. Let's make it shine!
 
 ## Contributors
 
diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md
@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
 
 CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos:
 
-1. Lee el HTML y elije qué elemento deseas decorar o aplicar estilos.
+1. Lee el HTML y elige qué elemento deseas decorar o aplicarle estilos.
 
 2. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS.
 
@@ -26,7 +26,7 @@ Mira este ejemplo:
 ```
 
 Tenemos un enlace de HTML `<a>` que lleva a las personas a google.com cuando se hace clic.
-Usamos CSS para selectionar todas las etiquetas `<a>` y luego hacerlas `pink`.
+Usamos CSS para seleccionar todas las etiquetas `<a>` y luego hacerlas `pink`.
 
 ## 📝 Instrucciones
 
@@ -36,4 +36,4 @@ Usamos CSS para selectionar todas las etiquetas `<a>` y luego hacerlas `pink`.
 
 Debería verse así:
 
-![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true)
+![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true)
diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md
@@ -3,11 +3,11 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
 ---
 # `01` Hello World in CSS
 
-CSS is about styles. To apply styles you always have to follow this steps:
+CSS is about styles. To apply styles you always have to follow these steps:
 
-1. Read the HTML and pick what element do you want to decorate or apply styles to.
+1. Read the HTML and pick what element you want to decorate or apply styles to.
 
-2. Programatically select the element you want to style using CSS Selectors.
+2. Programmatically select the element you want to style using CSS Selectors.
 
 3. Write the styling that you want by using CSS rules.
 
@@ -25,7 +25,7 @@ Look at this example:
 ```
 
 We have an HTML anchor `<a>` that takes people to google.com when clicked.
-We use CSS to tell (selected) all the anchor tags and make then pink.
+We use CSS to select all the anchor tags and make them pink.
 
 ## 📝 Instructions:
 
diff --git a/exercises/01-Hello-World/test.js b/exercises/01-Hello-World/test.js
@@ -28,7 +28,7 @@ test("There should be a target attribute pointing to '_blank'", ()=>{
     expect(target).toBe("_blank");
 })
 
-test("The anchor tag should not contains any inline style", ()=>{
+test("The anchor tag should not contain any inline style", ()=>{
     let emptyBodyInlineStyle = {};
     expect(a.style._values).toEqual(emptyBodyInlineStyle);
-});
+});
diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md
@@ -2,15 +2,15 @@
 # `01.1` Etiqueta Style 
 
 Si quieres añadir estilos a tu sitio web escribiendo CSS siempre debes hacerlo dentro de una etiqueta `<style>`.
-Puedes tener cuantas etiquetas `<style>`quieras pero se recomienda solo tener una al principio del código de tu sitio web.
+Puedes tener cuantas etiquetas `<style>` quieras, pero se recomienda solo tener una al principio del código de tu sitio web.
 
 ```HTML
 <style>
-    /* los estilos CSS del sitio web van aquí */
+    /* Los estilos CSS del sitio web van aquí */
 </style>
 ```
 
-## 📝 Instruccciones:
+## 📝 Instrucciones:
 
 1. Añade una etiqueta `<style>` en tu sitio web y usando CSS selecciona todas las etiquetas `<p>` para que su texto sea de color azul (`blue`).
 
diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md
@@ -4,18 +4,18 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
 
 # `01.1` The Style Tag
 
-If you want to add styles into a website by writing CSS you have to always add it within a `<style>` tag.
-You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code.
+If you want to add styles into a website by writing CSS you always have to add it within a `<style>` tag.
+You can have as many style tags as you want, but it is recommended to have only one at the beginning of your website code.
 
 ```HTML
 <style>
-    /* the website CSS Styles go here */
+    /* The website CSS Styles go here */
 </style>
 ```
 
 ## 📝 Instructions
 
-1. Add a `<style>` tag into your website and using CSS select all `<p>` tags to turn their text into `blue` color.
+1. Add a `<style>` tag to your website and using CSS select all `<p>` tags to turn their text to color `blue`.
 
 ## 💻 Preview
 
diff --git a/exercises/01.1-The-Style-Tag/solution.hide.html b/exercises/01.1-The-Style-Tag/solution.hide.html
@@ -1,12 +1,12 @@
-<!-- add a style tag and select the p tag and make it color blue -->
+<!-- Add a style tag, then select the p tag and make it color blue -->
 <style>
-	/* the website CSS Styles go here */
+	/* The website CSS Styles go here */
 	p {
 		color: blue;
 	}
 </style>
 <p>
 	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
 	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
-	math,writing, and confidence.
-</p>
+	math, writing, and confidence.
+</p>
diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-Your-First-Style/README.es.md
@@ -1,6 +1,6 @@
 # `01.2` Tu Primer Estilo
 
-Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle.
+Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle:
 
 Por ejemplo, este es el código si quiero que todos los `anchors` de mi sitio web (etiquetas `<a>`) sean azules (`blue`):
 
diff --git a/exercises/01.2-Your-First-Style/README.md b/exercises/01.2-Your-First-Style/README.md
@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=8b12AFC6bWs"
 
 When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it:
 
-For example, this is the code if you want to make all my website anchors (`<a> tag's`) blue:
+For example, this is the code if you want to make all your website anchors (`<a>` tags) blue:
 
 ```css
 a {
@@ -16,6 +16,6 @@ a {
 
 ## 📝 Instructions:
 
-1. Right now there is a style being applied that is responsable of making the anchor `red`.
+1. Right now there is a style being applied that is responsible for making the anchor `red`.
 
 2. Change the style to make your anchor look `yellow`.
diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md
@@ -2,7 +2,7 @@
 
 Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle:
 
-Por ejemplo, este es el código si quiero que todos las anchors de mi sitio web (`etiquetas <a>`) sean azules:
+Por ejemplo, este es el código si quiero que todos los anchors de mi sitio web (etiquetas `<a>`) sean azules:
 
 ```css
 a {
@@ -14,4 +14,4 @@ a {
 
 1. Haz que el fondo de tu sitio web sea azul (blue) seleccionando el `body` y aplicando la regla `background` con valor `blue`.
 
-2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul (`blue`), es decir toda la página azul.
+2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un `body` azul (`blue`), es decir, toda la página azul.
diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/01.3-Your-Second-Style/README.md
@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=W0CAqLIAoZI"
 
 When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it:
 
-For example, this is the code if I want to make all my website anchors (`<a> tag's`) blue:
+For example, this is the code if you want to make all your website anchors (`<a>` tags) blue:
 
 ```css
 a {
diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
@@ -13,7 +13,7 @@ describe("All the styles should be applied", ()=>{
     expect(styles["background"]).toBe("blue");
   });
 
-  test("The body tag should not contains any inline style", ()=>{
+  test("The body tag should not contain any inline style", ()=>{
     let emptyBodyInlineStyle = {};
     expect(body.style._values).toEqual(emptyBodyInlineStyle);
   });
diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md
@@ -6,10 +6,10 @@ Esa es una mejor práctica porque te permite tener un sitio web sin diseño, pue
 
 ## 📝 Instrucciones:
 
-LLena el `styles.css` con el contenido necesario para que el body del sitio web sea azul (blue).
+Llena el `styles.css` con el contenido necesario para que el `body` del sitio web sea azul (blue).
 
 ## 💡 Pista:
 
-+ Busca en Google cómo cambiar el color de fondo (`background-color`) de un body de un sitio web. 
++ Busca en Google cómo cambiar el color de fondo (`background-color`) del `body` de un sitio web. 
 
- 
+ 
diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md
@@ -6,12 +6,12 @@ tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg"
 
 If you use the html `<link>` tag, you can also have your styles on a separate file that we usually call `styles.css`.
 
-That is an even better practice because it lets you have an CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML.
+That is an even better practice because it lets you have a CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML.
 
 ## 📝 Instructions:
 
-Fill the `styles.css` with the content needed to make the website body blue.
+Fill the `styles.css` with the content needed to make the website's `body` blue.
 
-## 💡Hint:
+## 💡 Hint:
 
-+ Google how to change the `background-color` of a website body.
++ Google how to change the `background-color` of a website's `body`.
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
@@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
   const link = document.querySelector("link");
   const body = document.querySelector("body");
 
-  test("The body tag should not contains any inline style", ()=>{
+  test("The body tag should not contain any inline style", ()=>{
     document.querySelector("head").innerHTML = `<style>${css.toString()}</style>`;
     let emptyBodyInlineStyle={};
     expect(body.style._values).toEqual(emptyBodyInlineStyle)
diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md
@@ -14,7 +14,7 @@ Si es una imagen, puedes especificar si quieres que la imagen se repita horizont
 
 4. Construye y previsualiza el ejercicio nuevamente.
 
-5. Cambia el `background-repeat` a `inherit`  para que se repita sobre el eje x y el eje y.
+5. Cambia el `background-repeat` a `repeat`  para que se repita sobre el eje x y el eje y.
 
 6. Construye y previsualiza el ejercicio nuevamente.
 
diff --git a/exercises/02.1-Background/solution.hide.css b/exercises/02.1-Background/solution.hide.css
diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js
