Merge pull request 4GeeksAcademy#103 from josemoracard/jose4-from-06-practicing-rules

tommygonzaleza · web-flow · commit 04e1aa0dafc2 · 2023-04-05T16:30:13.000-04:00
fixed text in some exercises
diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md
@@ -8,15 +8,15 @@
 
 3. Cambia el color del `h1` a rojo(`red`).
 
-4. Haz todos los `h2` tengan subrayado.
+4. Haz que todos los `h2` tengan subrayado.
 
 5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
 
-6. Agrega un fondo blanco semitransparente (`semi-transparent background 0.2`) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar `rgba` para esto).
+6. Agrega un fondo blanco semitransparente (`semi-transparent background (0.2)`) al primer párrafo para que sea más fácil de leer (tienes que usar `rgba` para esto).
 
 7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
 
-8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo).
+8. Cambia el color del `anchor` "hover" a verde (`green`) y elimina el subrayado (tienes que pasar el cursor encima del anchor para probarlo).
 
 ## El resultado debería ser algo como esto:
 
diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md
@@ -16,7 +16,7 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU"
 
 5. Add a `left padding` to the whole document of `20px` to make it easier to read.
 
-6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that) and type "3 reasons you know you are learning". 
+6. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have to use `rgba` for that).
 
 7. Then apply a `padding` of `5px` to all sides of that paragraph.
 
diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html
@@ -12,18 +12,18 @@
 			<h1>The learning essay</h1>
 			<h2>3 reasons you know you are learning</h2>
 			<p id="id1">
-				We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
+				We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.
 			</p>
 			<ol>
 				<li>You are able to complete the exercises by yourself.</li>
-				<li>You understand what the teacher is talking about</li>
-				<li>Your are able to have conversations about the topic</li>
+				<li>You understand what the teacher is talking about.</li>
+				<li>You are able to have conversations about the topic.</li>
 			</ol>
-			<h2>3 reasons you know love what you are learning</h2>
+			<h2>3 reasons you love what you are learning</h2>
 			<ul>
 				<li>Time passes fast.</li>
-				<li>You are anxious to finish this excercise and start the next one.</li>
-				<li>Is 12am and you don't want to go to sleep.</li>
+				<li>You are anxious to finish this exercise and start the next one.</li>
+				<li>It's 12am and you don't want to go to sleep.</li>
 			</ul>
 			<p>
 				If you can't sleep, what better than watching videos of cats?
diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js
@@ -11,7 +11,7 @@ describe("All the styles should be applied", () => {
   let link = document.querySelector("link")
   let title = document.querySelector('title')
 
-  test("the background should match", () => {
+  test("The background should match", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -21,23 +21,23 @@ describe("All the styles should be applied", () => {
       `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y`
     );
   });
-  test("the font-family should be 'Times New Roman'", () => {
+  test("The font-family should be 'Times New Roman'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
     let body = document.querySelector("body");
     let styles = window.getComputedStyle(body);
     expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\"");
   });
-  test("the padding-left should be '20px'", () => {
+  test("The padding-left should be '20px'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
     let body = document.querySelector("body");
     let styles = window.getComputedStyle(body);
     expect(styles["padding-left"]).toBe("20px");
   });
-  test("the font-family in the H1 Tag should be 'Courier'", () => {
+  test("The font-family in the h1 tag should be 'Courier'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -46,7 +46,7 @@ describe("All the styles should be applied", () => {
     // get computed styles of any element you like
     expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\"");
   });
-  test("the color in the H1 Tag should be 'red'", () => {
+  test("The color in the h1 tag should be 'red'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -55,7 +55,7 @@ describe("All the styles should be applied", () => {
     // get computed styles of any element you like
     expect(h1TagStyles["color"]).toBe("red");
   });
-  test("the text-decoration in the H2 Tag should be 'underline'", () => {
+  test("the text-decoration in the h2 tag should be 'underline'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -64,7 +64,7 @@ describe("All the styles should be applied", () => {
     let h2TagStyles = window.getComputedStyle(h2Tag);
     expect(h2TagStyles["text-decoration"]).toBe("underline");
   });
-  test("the padding in the #id1 Tag should be '5px'", () => {
+  test("The padding in the #id1 tag should be '5px'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -74,7 +74,7 @@ describe("All the styles should be applied", () => {
     expect(idTagStyles["padding"]).toBe("5px");
   });
 
-  test("The a hover underline should be removed", () => {
+  test("The a:hover underline should be removed", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -88,7 +88,7 @@ describe("All the styles should be applied", () => {
     expect(orangeHoverSelector).toBe("none");
   });
 
-  test("The a hover color should be green", () => {
+  test("The a:hover color should be green", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md
@@ -1,21 +1,21 @@
-# `07` Reglas Muy Especificas
+# `07` Reglas Muy Específicas
 
 ## **Importante:**
 
-En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba.
+En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba.
 
 ## 📝 Instrucciones:
 
-1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico).
+1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico).
 
 2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class).
 
-3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`.
+3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`.
 
 
 ![Example Image](../../.learn/assets/07-1.png?raw=true)
 >Importante: **NO** debes modificar el archivo index.html
 
-## :bulb: Pista:
+## 💡 Pista:
 
-1. El atributo `!important` ayuda a sobreescribir stilos.
+1. El atributo `!important` ayuda a sobreescribir estilos.
diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md
@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40"
 
 # **Important:**
 
-In this exercise, you can add your code only above the **READ ONLY BLOCK** of the code, you can add as many lines as you want, but always above.
+In this exercise, you can add your code only above the **READ-ONLY BLOCK** of the code, you can add as many lines as you want, but always above.
 
 ## 📝 Instructions:
 
@@ -19,8 +19,8 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th
 
 
 ![Example Image](../../.learn/assets/07-1.png?raw=true)
->Important: You should **NOT** modify the index.html file
+>Important: You should **NOT** modify the index.html file.
 
 ## :bulb: Hint:
 
-1. The `!important` attribute helps to override over other attributes.
+1. The `!important` attribute helps to override other attributes.
diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html
@@ -10,18 +10,18 @@
 		<h1>The learning essay</h1>
 		<h2>3 reasons you know you are learning</h2>
 		<p id="id1">
-			We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning.
+			We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.
 		</p>
 		<ol>
 			<li>You are able to complete the exercises by yourself.</li>
 			<li>You understand what the teacher is talking about</li>
-			<li>Your are able to have conversations about the topic</li>
+			<li>You are able to have conversations about the topic</li>
 		</ol>
 		<h2>3 reasons you know love what you are learning</h2>
 		<ul>
 			<li>Time passes fast.</li>
-			<li>You are anxious to finish this excercise and start the next one.</li>
-			<li>Is 12am and you don't want to go to sleep.</li>
+			<li>You are anxious to finish this exercise and start the next one.</li>
+			<li>It's 12am and you don't want to go to sleep.</li>
 		</ul>
 		<p>
 			If you can't sleep, what better than watching videos of cats?
diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/07-Very-Specific-Rules/solution.hide.css
@@ -12,9 +12,9 @@ tr:nth-child(odd) {
 	background: yellow;
 }
 
-/*********** READ ONLY BLOCK ******
+/*********** READ-ONLY BLOCK ******
 You CANNOT UPDATE anything from here on,
-only add lines of code on top of this lines
+only add lines of code on top of these lines
 **/
 
 body {
diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css
@@ -1,8 +1,8 @@
 /** Insert your code here **/
 
-/*********** READ ONLY BLOCK ******
+/********** READ-ONLY BLOCK ******
 You CANNOT UPDATE anything from here on,
-only add lines of code on top of this lines
+only add lines of code on top of these lines
 **/
 
 body {
diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md
@@ -1,23 +1,23 @@
 # `08` Imagen Redondeada
 
-Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso!
+Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso!
 
 La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. 
 
-El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos:
+El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho, no se verán como un círculo, se verán como óvalos:
 
 ![Example Image](../../.learn/assets/08-1.png?raw=true)
 
 ## 📝 Instrucciones:
 
 1. Usa `border-radius`.
 
-2.  Adicionalmente a `border-radius`, tenemos que también utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
+2. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
 
 ## 💡 Pista:
 
-+ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`.
++ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`.
 
-+ En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/)
++ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/).
 
-+ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
++ Adicionalmente, puedes [leer la documentación de object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md
@@ -2,21 +2,21 @@
 
 A lot of websites use rounded profile images, a technique that really makes a website more beautiful!
 
-The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach, is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals:
+The obvious way to create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals:
 
 ![Example Image](../../.learn/assets/08-1.png?raw=true)
 
 ## 📝 Instructions:
 
 1. Use `border-radius`.
 
-2. In this case, in addition to `border-radius`, you will have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
+2. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
 
 
 ## 💡 Hint:
 
 + If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle.
 
-+ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/)
++ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/).
 
-+ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
++ Additionally you can [read the documentation on object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js
@@ -13,11 +13,11 @@ describe("All the styles should be applied", () => {
 
   const img = document.querySelector(".rounded")
 
-  test("the img tag should exist", () => {
+  test("The img tag should exist", () => {
     expect(img).toBeTruthy();
   })
 
-  test("the width in the img Tag should be equal to its height and vice versa", () => {
+  test("The width of the img tag should be equal to its height and vice versa", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -42,7 +42,7 @@ describe("All the styles should be applied", () => {
     expect(height).toBe(width);
   });
 
-  test("the object-fit value of the img Tag should be 'cover'", () => {
+  test("The object-fit value of the img tag should be 'cover'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
@@ -51,7 +51,7 @@ describe("All the styles should be applied", () => {
     expect(imgStyle["object-fit"]).toBe("cover");
   });
 
-  test("the object-position value of the img Tag should be 'top'", () => {
+  test("The object-position value of the img tag should be 'top'", () => {
     document.querySelector(
       "head"
     ).innerHTML = `<style>${css.toString()}</style>`;
diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md
@@ -4,11 +4,11 @@ A las personas les gusta sentir que están haciendo clic en algo, una manera de
 
 ![Example Image](../../.learn/assets/09-1.png?raw=true)
 
-Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), por ejemplo:
+Puedes controlar qué reglas CSS se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (cuando pasas por encima con el mouse) o `active` (cuando haces clic), por ejemplo:
 
 ```css
 a:active {
-  /* aquí puedes especificar cualquier regla de css que aplique al anchor mientras se presiona' */
+  /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se presiona' */
 }
 ```
 
diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/09-Anchor-Styles/README.md
@@ -4,11 +4,11 @@ People like to feel that they are clicking on something, a great approach to acc
 
 ![Example Image](../../.learn/assets/09-1.png?raw=true)
 
-You can control what css rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example:
+You can control what CSS rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example:
 
 ```css
 a:active {
-  /* here you can specify whatever css rule that applies
+  /* here you can specify whatever CSS rule that applies
   to the anchor while being 'pressed' */
 }
 ```
diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js
@@ -20,14 +20,14 @@ describe("All the styles should be applied", () => {
     expect(cssArray).toBe(".threeDimension");
   })
 
-  test("the 'a' tag in the index.html should not be deleted", () => {
+  test("The 'a' tag in the index.html should not be deleted", () => {
     // we can read from the source code
     // console.log(html.toString());
     expect(html.toString().indexOf(`<a`) > -1).toBeTruthy();
   });
 
 
-  test("The border-color rule for the 'threeDimension active ' property should match the instruction color", () => {
+  test("The border-color rule for the 'a.threeDimension:active' selector should match the instruction color", () => {
     // get computed styles of any element you like
     // let cssArray=document.styleSheets[0].cssRules;
     document.querySelector(
