reviewing instructions

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 en tu mente a qué elemento deseas decorar o aplicar estilos.
+1. Lee el HTML y elije qué elemento deseas decorar o aplicar estilos.
 1. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS.
 2. Escribe el estilo que quieras usando las reglas CSS.
 
@@ -35,4 +35,4 @@ Pega este código en tu sitio web para ver los resultados.
 
 Debería verse así:
 
-![01 Hello World Exercise Preview](https://ucarecdn.com/7e9496c0-549a-4767-b771-13b9bfc5d9c2/)
+![01 Hello World Exercise Preview](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/01-1.png?raw=true)

exercises/01-Hello-World/README.md

@@ -5,9 +5,9 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
 
 CSS is about styles. To apply styles you always have to follow this steps:
 
-1. Read the HTML and pick in your mind what element you want to decorate or apply styles to.
-1. Programatically select the element you want to style using CSS Selectors.
-2. Write the styling that you want by using CSS rules.
+1. Read the HTML and pick what element do you want to decorate or apply styles to.
+2. Programatically select the element you want to style using CSS Selectors.
+3. Write the styling that you want by using CSS rules.
 
 That is it! The rest is just semantics! 😁
 

exercises/01.1-The-Style-Tag/README.md

@@ -4,7 +4,7 @@ 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 withing a `<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.
 ```HTML
 <style>
@@ -14,7 +14,7 @@ You can have as many style tags as you want but it is recomended to have only on
 
 ## 📝 Instructions
 
-Add a `<style>` tag into your website and using CSS select the all `<p>` tags to turn their text into blue color.
+Add a `<style>` tag into your website and using CSS select all `<p>` tags to turn their text into blue color.
 
 ## 💻 Preview
 

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):
 
@@ -13,4 +13,5 @@ a {
 ## 📝 Instrucciones:
 
 1. En este momento, se está aplicando un estilo que se encarga de hacer el enlace rojo (red).
+
 2. Cambia el estilo para que tu enlace se vea amarillo (yellow).

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 I want to make all my website anchors (`<a> tag's`) blue:
+For example, this is the code if you want to make all my website anchors (`<a> tag's`) blue:
 
 ```css
 a {
@@ -17,4 +17,5 @@ a {
 ## 📝 Instructions:
 
 1. Right now there is a style being applied that is responsable of making the anchor red.
+
 2. Change the style to make your anchor look yellow.

exercises/01.3-Your-Second-Style/README.es.md

@@ -13,4 +13,4 @@ a {
 ## 📝 Instrucciones:
 
 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 en la página (toda la página azul).
+2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul (toda la página azul).

exercises/01.3-Your-Second-Style/README.md

@@ -17,4 +17,4 @@ a {
 ## 📝 Instructions:
 
 1. Make your website background blue by selecting the `body` and applying the `background` rule with a `blue` value.
-2. Build and preview the exercise and your result should be a blue body of the page (the whole page blue).
+2. Build and preview the exercise and your result should be a blue `body` (the whole page blue).

exercises/02-Separate-Stylesheet/README.es.md

@@ -2,7 +2,7 @@
 
 Si usas la etiqueta html `<link>`, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`.
 
-Esa es una práctica aún mejor porque te permite tener un sitio web a quien no le importe el diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML.
+Esa es una mejor práctica porque te permite tener un sitio web a sin diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML.
 
 ## 📝 Instrucciones:
 

exercises/02-Separate-Stylesheet/README.md

@@ -4,9 +4,9 @@ tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg"
 
 # `02` Separate Stylesheet
 
-If you use the html `<link>` tag, you can also have your styles on a separate file that we normally call `styles.css`.
+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 event 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 an CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML.
 
 ## 📝 Instructions:
 

exercises/02.1-Background/README.es.md

@@ -2,15 +2,20 @@
 
 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`.
 
-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 ser modificado.
+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.
 
 ## 📝 Instrucciones:
 
 1.  Construye el ejercicio.
+
 2.  Verifica la vista previa.
-3.  En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css)
+
+3.  En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css).
+
 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.
+
 6.  Construye y previsualiza el ejercicio nuevamente.
 
 

exercises/02.1-Background/README.md

@@ -6,16 +6,21 @@ tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8"
 
 The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`.
 
-If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified.
+If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified.
 
 ## 📝 Instructions:
 
 
 1.  Build the exercise.
+
 2.  Check the Preview.
-3.  On the styles.css file the background-size to 'contain' (check the styles.css tab).
+
+3.  On the styles.css file change the background-size to 'contain' (check the styles.css tab).
+
 4.  Build and Preview the exercise again.
+
 5.  Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis.
+
 6.  Build and Preview the exercise again.
 
 

exercises/03-Inline-Styles/README.es.md

@@ -19,7 +19,10 @@ Nota: Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, s
 
 1. Establece un estilo inline para cambiar el color de fondo de la tabla a verde (green). Para este ejercicio, NO uses el styles.css :(
 
+**Nota:**    
 
-### Pista:
+Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, separadas por punto y coma.
+
+### 💡Pista:
 
 - Como usar el background-size: http://lmgtfy.com/?q=css+inline+style

exercises/03-Inline-Styles/README.md

@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI"
 
 # `03` Inline Styles
 
-Inline styles are a very bad idea unless you have no choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because there is a chance you will need to use them at some point.
+Inline styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point.
 
 To use inline styles, instead of declaring a <style> tag in the header of the document, you have to set the "style" attribute of any element with the CSS code you need to apply to that specific element.
 
@@ -16,14 +16,16 @@ For example:
 
 Will set the color of that specific link to red and the font-size to 14px
 
-Note: You can append as many CSS rules as you want, within the same line, separated by semi-colon.
+**Note:** 
+
+You can append as many CSS rules as you want, within the same line, separated by semi-colon.
 
 ## 📝 Instructions:
 
 
 1. Set an inline style to change the background color of the table to green. For this exercise, do NOT use styles.css :(
 
 
-### Hint:
+### 💡 Hint:
 
 - How to use the background-size: http://lmgtfy.com/?q=css+inline+style

exercises/04-Class-Selector/README.es.md

@@ -4,14 +4,20 @@ Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, has
 
 #### 1) Selector de clase
 
-Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
+Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos.
+
+ Usa la propiedad de clase del elemento HTML para seleccionarlo. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
 
 ```css
 .small{
     font-size: 9px;
 }
 ```
-Nota: cualquier etiqueta html con `class="small"` tendrá un  font-size de 9px.
+**Nota:**
+
+ Cualquier etiqueta html con `class="small"` tendrá un  font-size de 9px.
+
+
 
 # 📝 Instrucciones:
 

exercises/04-Class-Selector/README.md

@@ -9,19 +9,20 @@ There are many ways to select HTML elements to apply styles to them, so far we h
 #### 1) `.class` Selector
 
 It is the most popular css selector, you will probably use it every 5 minutes.
+
 Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value
 
 ```css
 .small{
     font-size: 9px;
 }
 ```
-Note: any html tag with the `class="small"` will have a font-size of 9px.
+**Note:** 
 
-# 📝 Instructions:
+Any html tag with the `class="small"` will have a font-size of 9px.
 
-Right now there is a class selected on the CSS that is called `.b-blue`.
+# 📝 Instructions:
 
-Please apply that class to both of the `<p>` tags in HTML.
+Right now there is a class selected on the CSS that is called `.b-blue`. Please apply that class to both of the `<p>` tags in HTML.
 
 

exercises/04.1-Combined-Rules/README.es.md

@@ -23,10 +23,11 @@ border: black 1px solid;
 2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:".
 
 
+*Nota:**
 
-P.S: The background size no se puede combinar, los navegadores aún no lo admiten.\*\*
+ El background size no se puede combinar, los navegadores aún no lo admiten.\*\*
 
-# Hint:
+### Pista:
 
 - Como usar el background-size: http://lmgtfy.com/?q=css+background
 - Como usar el padding: http://lmgtfy.com/?q=css+padding

exercises/04.1-Combined-Rules/README.md

@@ -24,11 +24,12 @@ border: black 1px solid;
 
 
 1. Combine the 4 padding rules into just one using the "padding" rule.
-2. Combine the all background rules, but the background size, into just one line using the "background:" rule.
 
+2. Combine the all background rules, but the background size, into just one line using the "background:" rule.
 
+**Note:**
 
-P.S: The background size cannot be combined, the browsers don't support it yet.\*\*
+ The background size cannot be combined, the browsers don't support it yet.\*\*
 
 # Hint:
 

exercises/04.2-Apply-several-classes/README.es.md

@@ -7,11 +7,11 @@ Vamos a usar clases y aplicarlas al mismo elemento `<div>`.
 <div class="card spades">9</div>
 ```
 
-La clase `card`contiene las reglas de estilo para hacer que el div se vea como una carta: Bordes, ancho, etc.
+La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, etc.
 
 La clase `spades` contienes las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas).
 
-Hay dos posibles clases de pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real.
+Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real.
 
 # 📝 Instrucciones:
 

exercises/04.2-Apply-several-classes/README.md

@@ -15,7 +15,7 @@ We are going to use to classes and apply them to the same `<div>` element.
 The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc.
 The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades symbol).
 
-There are two possible suite classes you can apply to the html element and it will make it look like a real poker card.
+There are two possible suite classes you can apply to the html element to make it look like a real poker card.
 
 # 📝 Instructions:
 

exercises/04.3-id-Selector/README.es.md

@@ -9,9 +9,11 @@ También puedes seleccionar un elemento por su `#id` y aplicarle estilos.
     font-size: 9px;
 }
 ```
-Usa la propiedad id del elemento HTML para seleccionar. Las IDs deberían ser únicas, solo un elemento puede tener la misma ID.
+Usa la propiedad id del elemento HTML para seleccionarlo. Las IDs deben ser únicas, solo un elemento puede tener la misma ID.
 
-Nota: La etiqueta HTML con `id="my_number_one"` tendrá un font-size de 9px.
+**Nota:**
+
+La etiqueta HTML con `id="my_number_one"` tendrá un font-size de 9px.
 
 # 📝 Instrucciones:
 

exercises/04.3-id-Selector/README.md

@@ -13,8 +13,11 @@ You can also select an element by `#id` and apply stiles to it.
     font-size: 9px;
 }
 ```
-Use the id property of the HTML element to select it. IDs should be unique, only one element must have the same ID.
-Note: The html tag with the `id="my_number_one"` will have a font-size of 9px.
+Use the id property of the HTML element to select it. ID's should be unique, only one element must have the same ID.
+
+**Note:**
+
+ The html tag with the `id="my_number_one"` will have a font-size of 9px.
 
 # 📝 Instructions:
 

exercises/05-Specificity/README.es.md

@@ -8,11 +8,11 @@ Porque cuanto más específico, más prioridad tiene.
 
 ## 📝 Instrucciones:
 
-```Plain/Text
+
 1. Anula el color de fondo (background-color) de #thirditem sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde.
-```
 
-Tip:
+
+### 💡 Pista:
 
 Puedes usar la anotación **!important** :
 https://css-tricks.com/when-using-important-is-the-right-choice/

exercises/05-Specificity/README.md

@@ -4,20 +4,18 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI"
 
 # `05` Specificity
 
-When creating a CSS document, you need to start from the most generic selector and end with the most specific ones, that is the way CSS works.
+When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works.
 
-It's all about the level of Specificity.
-If you specify that your div with id="thirditem" has a blue background, and later in the document you specify that all divs will have yellow background, #thirditem will keep his blue background. punto!
+It's all about the level of Specificity. If you specify that your `div` with `id="thirditem` has a blue background, and later in the document you specify that all `divs` will have yellow background, `#thirditem` will keep his blue background. punto!
 
-Because the more specific, the more priority it has.
+**Because the more specific, the more priority it has** 
 
 ## 📝 Instrucciones:
 
-```Plain/Text
 1. Override the background-color of #thirditem without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green.
-```
 
-Tip:
+
+### 💡 Hint:
 
 You can use the **!important** annotation:
 https://css-tricks.com/when-using-important-is-the-right-choice/

exercises/06-Practicing-Rules/README.es.md

@@ -6,21 +6,19 @@
 1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente:
    https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true
 
-2. Cambia el tipo de fuente (font-type) del h1 a Courier
-   y el resto del sitio web a Times New Roman.
+2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
 
-3. Cambia el color del h1 a rojo.
+3. Cambia el color del `h1` a rojo(`red`).
 
-4. Haz todos los h2 con un subrayado.
+4. Haz todos los `h2` tengan subrayado.
 
-5. Centra el h1 en el medio.
+5. Centra el `h1`.
 
-6. Agrega un left padding a todo el documento de 20px para que sea más fácil de leer.
+6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer.
 
-7. Agrega un fondo blanco semitransparente (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), y luego aplica un padding de 5px a todos los lados de ese párrafo.
+7. Agrega un fondo blanco semitransparente (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), y luego aplica un `padding` de `5px` a todos los lados de ese párrafo.
 
-8. Cambia el color del anchor/enlace "hover" a verde (green) y elimina el subrayado.
-    (tienes que colocar el anchor para probarlo).
+8. Cambia el color del `anchor`/enlace "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo).
 
 
 El resultado debería ser algo como esto: