Merge pull request 4GeeksAcademy#31 from ElviraQDP/master

checking instructions

Author: tommygonzaleza

exercises/00-Welcome/README.es.md

@@ -11,9 +11,13 @@ 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>`,
+
 2. Seleccionar elementos HTML para tu sitio web para aplicarle estilos,
+
 3. Aplicar reglas CSS (estilos) a esos elementos,
+
 4. A usar 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!

exercises/00-Welcome/README.md

@@ -10,9 +10,13 @@ Learning to code is hard, you will problably need coaching! DM me on twitter if
 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>`,
+
 2. Selecting HTML Elements from your website to apply the styles to.
+
 3. Apply CSS Rules (styles) to those elements.
+
 4. Use the most popular CSS Rules.
+
 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!

exercises/01-Hello-World/README.es.md

@@ -7,8 +7,10 @@ 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. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS.
-2. Escribe el estilo que quieras usando las reglas CSS.
+
+2. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS.
+
+3. Escribe el estilo que quieras usando las reglas CSS.
 
 ¡Eso es todo! El resto es solo semántica. 😁
 
@@ -29,9 +31,9 @@ Usamos CSS para selectionar todas las etiquetas `<a>` y luego hacerlas `pink`.
 
 ## 📝 Instrucciones
 
-Pega este código en tu sitio web para ver los resultados.
+1. Pega este código en tu sitio web para ver los resultados.
 
-## 💻 Preview
+## 💻 Vista previa:
 
 Debería verse así:
 

exercises/01-Hello-World/README.md

@@ -6,7 +6,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 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! 😁
@@ -26,11 +28,11 @@ 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.
 
-## 📝 Instructions
+## 📝 Instructions:
 
-Paste this code on your website to see the results.
+1. Paste this code on your website to see the results.
 
-## 💻 Preview
+## 💻 Preview:
 
 It should look like this:
 

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

@@ -10,10 +10,11 @@ Puedes tener cuantas etiquetas `<style>`quieras pero se recomienda solo tener un
 </style>
 ```
 
-## 📝 Instruccciones
-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) 
+## 📝 Instruccciones:
 
-## 💻 Vista previa
+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`).
+
+## 💻 Vista previa:
 
 Debería verse así:
 

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

@@ -6,6 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
 
 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>
     /* the website CSS Styles go here */
@@ -14,7 +15,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 all `<p>` tags to turn their text into blue color.
+1. 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,8 +1,8 @@
 # `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):
+Por ejemplo, este es el código si quiero que todos los `anchors` de mi sitio web (etiquetas `<a>`) sean azules (`blue`):
 
 ```css
 a {
@@ -12,6 +12,6 @@ a {
 
 ## 📝 Instrucciones:
 
-1. En este momento, se está aplicando un estilo que se encarga de hacer el enlace rojo (red).
+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).
+2. Cambia el estilo para que tu enlace se vea amarillo (`yellow`).

exercises/01.2-Your-First-Style/README.md

@@ -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 responsable of making the anchor `red`.
 
-2. Change the style to make your anchor look yellow.
+2. Change the style to make your anchor look `yellow`.

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

@@ -13,4 +13,5 @@ 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 (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.

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

@@ -17,4 +17,5 @@ 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` (the whole page blue).

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

@@ -8,9 +8,8 @@ Esa es una mejor práctica porque te permite tener un sitio web a sin diseño, p
 
 LLena el `styles.css` con el contenido necesario para que el body del sitio web azul (blue).
 
-
 ## 💡 Pista:
 
-Busca en Google cómo cambiar el color de fondo (background) de un body de un sitio web. 
++ Busca en Google cómo cambiar el color de fondo (`background-color`) de un body de un sitio web. 
 
 

exercises/02-Separate-Stylesheet/README.md

@@ -14,4 +14,4 @@ Fill the `styles.css` with the content needed to make the website body blue.
 
 ## 💡Hint:
 
-Google how to change the background color of a website body.
++ Google how to change the `background-color` of a website body.

exercises/02.1-Background/README.es.md

@@ -1,27 +1,27 @@
 # `02.1` Background (fondo)
 
-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` 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 modificarse.
 
 ## 📝 Instrucciones:
 
-1.  Construye el ejercicio.
+1. Construye el ejercicio.
 
-2.  Verifica la vista previa.
+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 cambia el `background-size` a `contain` (verifica la pestaña styles.css).
 
-4.  Construye y previsualiza el ejercicio nuevamente.
+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.
+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.
 
 ## 💡Pista:
 
 Google es tu mejor amigo:
 
 - Como usar el background-size: http://lmgtfy.com/?q=css+background-size
+
 - Como usar el background-repeat: http://lmgtfy.com/?q=css+background-repeat

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

@@ -1,18 +1,18 @@
 # `03` Inline Styles (estilos en la línea)
 
-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` 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 header del documento, debes establecer el atributo "style" de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico.
+Para usar estilos inline, en lugar de declarar una etiqueta `<style>` en el header del documento, debes establecer el atributo `style` de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico.
 
 Por ejemplo:
 
 ```html
 <a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
 ```
 
-Estableceremos el color de este enlace específico a rojo (red) y el tamaño de fuente en 14px.
+Estableceremos el color de este enlace específico a rojo (`red`) y el tamaño de fuente (`font-size`) en `14px`.
 
-Nota: Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, separadas por punto y coma.
+*Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, separadas por punto y coma.*
 
 ## 📝 Instrucciones:
 

exercises/03-Inline-Styles/README.md

@@ -16,13 +16,10 @@ 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.
+*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 :(
 
 

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

@@ -2,24 +2,20 @@
 
 Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector `.class`:
 
-#### 1) Selector de clase
+## 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 seleccionarlo. La reglas de estilo se aplicarán a todos los elementos con la misma clase.
+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`.*
 
- Cualquier etiqueta html con `class="small"` tendrá un  font-size de 9px.
-
-
-
-# 📝 Instrucciones:
+## 📝 Instrucciones:
 
 En este momento hay una clase seleccionada en el CSS llamada
 `.b-blue`.

exercises/04-Class-Selector/README.md

@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=RffCSMXgWFc"
 
 There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag` selector, lets talk about the `.class` selector:
 
-#### 1) `.class` Selector
+## `.class` Selector
 
 It is the most popular css selector, you will probably use it every 5 minutes.
 
@@ -17,12 +17,13 @@ Use the class property of the HTML element to select it. Styling rules will appl
     font-size: 9px;
 }
 ```
-**Note:** 
 
-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:
+## 📝 Instructions:
 
-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.
+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

@@ -19,15 +19,13 @@ border: black 1px solid;
 # 📝 Instrucciones:
 
 
-1. Combina las 4 reglas de padding una sola utilizando la regla "padding".
-2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:".
+1. Combina las 4 reglas de padding una sola utilizando la regla `padding`.
 
+2. Combina todas las reglas de background, menos el `background-size`, en una sola línea usando la regla `background:`.
 
-*Nota:**
+*El `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.\*\*
-
-### Pista:
+## 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

@@ -6,7 +6,7 @@ tutorial: "https://youtu.be/watch?v=uQS5QeEE-B4"
 
 CSS files take space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why is important to keep the CSS document as small as possible.
 
-One way to do that is by combining several properties into one such as with "border":
+One way to do that is by combining several properties into one such as with `border`:
 
 ```css
 border-color: black;
@@ -20,18 +20,16 @@ Border's properties can be consolidated into a single line as:
 border: black 1px solid;
 ```
 
-# 📝 Instructions:
+## 📝 Instructions:
 
-
-1. Combine the 4 padding rules into just one using the "padding" rule.
+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.
 
-**Note:**
-
- 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:
+## Hint:
 
 - How to use the background-size: http://lmgtfy.com/?q=css+background
+
 - How to use the padding: http://lmgtfy.com/?q=css+padding

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

@@ -13,9 +13,11 @@ La clase `spades` contienes las reglas de estilo requeridas para convertir la ca
 
 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:
+## 📝 Instrucciones:
 
 Remmplaza la propiedad `spades` de la clase del `<div>` por la clase `heart` y observa los resultados.
 
 
+## Resultado:
+
 ![Poker Card Heart](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/04.2-1.png?raw=true)

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

@@ -17,8 +17,11 @@ The class `spades` contains the styling rules needed to make the card turn into
 
 There are two possible suite classes you can apply to the html element to make it look like a real poker card.
 
-# 📝 Instructions:
+## 📝 Instructions:
 
 Replace the class property `spades` of the `<div>` with the class `heart` and look at the results.
 
+
+## Expected result:
+
 ![Poker Card Heart](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/04.2-1.png?raw=true)