Merge pull request 4GeeksAcademy#119 from josemoracard/jose1-titles

tommygonzaleza · web-flow · commit b8484d7407fd · 2023-05-31T17:27:26.000-04:00
fixed titles
diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md
@@ -1,5 +1,5 @@
 
-# `01` Hello World en CSS
+# `01` Hello World in CSS
 
 CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos:
 
diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md
@@ -1,5 +1,5 @@
 
-# `01.1` Etiqueta Style 
+# `01.1` The Style Tag
 
 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.
diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-Your-First-Style/README.es.md
@@ -1,4 +1,4 @@
-# `01.2` Tu Primer Estilo
+# `01.2` Your First Style
 
 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:
 
diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md
@@ -1,4 +1,4 @@
-# `01.3` Tu Segundo Estilo
+# `01.3` Your Second Style
 
 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:
 
diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md
@@ -1,4 +1,4 @@
-# `02` Hoja de estilos separada
+# `02` Separate Stylesheet
 
 Si usas la etiqueta html `<link>`, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`.
 
diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md
@@ -1,6 +1,6 @@
-# `02.1` Background (fondo)
+# `02.1` Background
 
-La regla `background` del CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`.
+La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`.
 
 Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades, eso puede modificarse.
 
diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md
@@ -1,6 +1,6 @@
-# `03` Inline Styles (estilos en línea)
+# `03` Inline Styles
 
-Los estilos `inline` son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento.
+Los estilos `inline` (estilos en línea) son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento.
 
 Para usar estilos inline, en lugar de declarar una etiqueta `<style>` en el `<head>` del documento, debes establecer el atributo `style` de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico.
 
diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md
@@ -1,4 +1,4 @@
-# `04` El selector de clase
+# `04` Class Selector
 
 Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado los selectores de etiquetas, así que hablemos sobre el selector `.class`:
 
diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md
@@ -18,7 +18,7 @@ Use the class property of the HTML element to select it. Styling rules will appl
 }
 ```
 
-*Any html tag with the `class="small"` will have a font-size of `9px`.*
+*Any HTML tag with the `class="small"` will have a font-size of `9px`.*
 
 ## 📝 Instructions:
 
diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md
@@ -1,4 +1,4 @@
-# `04.1` Reglas Combinadas
+# `04.1` Combined Rules
 
 Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible.
 
@@ -34,4 +34,5 @@ Donde el valor de la izquierda de la barra `/` es la propiedad `background-posit
 ## 💡 Pista:
 
 - Cómo usar el background: https://www.w3schools.com/cssref/css3_pr_background.php
+
 - Cómo usar el padding: https://www.w3schools.com/css/css_padding.asp
diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/04.2-Apply-several-classes/README.es.md
@@ -1,7 +1,8 @@
-# `04.2` Aplica varias clases
+# `04.2` Apply several classes
 
 Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker.
-Vamos a usar clases y aplicarlas al mismo elemento `<div>`.
+
+Vamos a usar dos clases y aplicarlas al mismo elemento `<div>`.
 
 ```html
 <div class="card spades">9</div>
diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md
@@ -1,4 +1,4 @@
-# `04.3` Selector de ID
+# `04.3` The ID CSS Selector
 
 También puedes seleccionar un elemento por su `#id` y aplicarle estilos.
 
diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md
@@ -1,4 +1,4 @@
-# `05` Especificidad
+# `05` Specificity
 
 Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS.
 
@@ -13,4 +13,4 @@ Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="th
 
 ## 💡 Pista:
 
-+ Puedes usar la anotación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/
++ Puedes usar la notación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/
diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md
@@ -1,22 +1,22 @@
-# `06` Practicando las reglas
+# `06` Practicing Rules
 
 ## 📝 Instrucciones:
 
 1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: `../../.learn/assets/background-vertical.jpg?raw=true`
 
 2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
 
-3. Cambia el color del `h1` a rojo(`red`).
+3. Cambia el color del `h1` a rojo (`red`).
 
-4. Haz que todos los `h2` tengan subrayado.
+4. Haz que todos los `h2` tengan subrayado (`underline`).
 
 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 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 pasar el cursor encima del 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
@@ -8,19 +8,19 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU"
 
 1. Set this URL as the background image of the page, and repeat it vertically only: `../../.learn/assets/background-vertical.jpg?raw=true`
 
-2. Change the font-family of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
+2. Change the `font-family` of the `h1` to `Courier` and the rest of the website to `Times new Roman`.
 
 3. Change the color of `h1` to `red`.
 
-4. Make all the `h2's` with an `underline`.
+4. Make all the `h2` have an `underline`.
 
 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).
+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.
 
-8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it).
+8. Change the `anchor` **hover** color to `green` and remove the underline (you have to actually hover the anchor to test it).
 
 ## The result should be something like this:
 
diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md
@@ -1,4 +1,4 @@
-# `07` Reglas Muy Específicas
+# `07` Very Specific Rules
 
 ## **Importante:**
 
diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md
@@ -1,4 +1,4 @@
-# `08` Imagen Redondeada
+# `08` Rounded Image
 
 Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso!
 
diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md
@@ -2,7 +2,9 @@
 
 A lot of websites use rounded profile images, a technique that really makes a website more beautiful!
 
-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:
+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)
 
diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md
@@ -1,4 +1,4 @@
-# `09` Estilos de enlaces (anchor) 3D
+# `09` 3D Anchor Styles
 
 A las personas les gusta sentir que están haciendo clic en algo, una manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:
 
diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/10-Your-Own-Font/README.es.md
@@ -1,4 +1,4 @@
-# `10` Tu Propia Fuente
+# `10` Your Own Font
 
 Aquí puedes encontrar las fuentes de Google: https://fonts.google.com
 
diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md
@@ -1,4 +1,4 @@
-# `11` Iconos Font Awesome 
+# `11` Font Awesome Icons
 
 Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar".
 
diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md
@@ -1,4 +1,4 @@
-# `12` Longitud Relativa em, rem
+# `12` Relative Length em, rem
 
 Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho.
 
diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md
@@ -12,9 +12,9 @@ Since the second `div` has a bigger based `font-size`, then the heading resizes
 
 ## In short:
 
-+ em: Relative to the current font-size of the parent.
++ em: Relative to the current `font-size` of the parent.
 
-+ rem: Relative to the original font-size of the page.
++ rem: Relative to the original `font-size` of the page.
 
 
 ## 📝 Instructions:
diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md
@@ -1,4 +1,4 @@
-# `13` Enlace (anchor) como botón
+# `13` Anchor Like Button
 
 Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable.
 
diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md
@@ -8,7 +8,7 @@ Anchors are not only used within text: when you are going to use anchors outside
 
 2. Rounded borders: set `border-radius` to `4px`.
 
-3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`).
+3. The `background` should be `orange` when not hovered, and `darkorange` on hover (`:hover`).
 
 4. Remove underline: set `text-decoration` to `none`.
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`
`2`		-# `01` Hello World en CSS
	`2`	+# `01` Hello World in CSS
`3`	`3`
`4`	`4`	`CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos:`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `01.2` Tu Primer Estilo
	`1`	+# `01.2` Your First Style
`2`	`2`
`3`	`3`	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:
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `01.3` Tu Segundo Estilo
	`1`	+# `01.3` Your Second Style
`2`	`2`
`3`	`3`	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:
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `02` Hoja de estilos separada
	`1`	+# `02` Separate Stylesheet
`2`	`2`
`3`	`3`	Si usas la etiqueta html `<link>`, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`.
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `04` El selector de clase
	`1`	+# `04` Class Selector
`2`	`2`
`3`	`3`	Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado los selectores de etiquetas, así que hablemos sobre el selector `.class`:
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ Use the class property of the HTML element to select it. Styling rules will appl`
`18`	`18`	`}`
`19`	`19`	```
`20`	`20`
`21`		-Any html tag with the `class="small"` will have a font-size of `9px`.
	`21`	+Any HTML tag with the `class="small"` will have a font-size of `9px`.
`22`	`22`
`23`	`23`	`## 📝 Instructions:`
`24`	`24`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `04.3` Selector de ID
	`1`	+# `04.3` The ID CSS Selector
`2`	`2`
`3`	`3`	También puedes seleccionar un elemento por su `#id` y aplicarle estilos.
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `07` Reglas Muy Específicas
	`1`	+# `07` Very Specific Rules
`2`	`2`
`3`	`3`	`## Importante:`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `08` Imagen Redondeada
	`1`	+# `08` Rounded Image
`2`	`2`
`3`	`3`	`Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso!`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `09` Estilos de enlaces (anchor) 3D
	`1`	+# `09` 3D Anchor Styles
`2`	`2`
`3`	`3`	`A las personas les gusta sentir que están haciendo clic en algo, una manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:`
`4`	`4`