Merge branch '4GeeksAcademy:master' into 06-Practicing-Rules

Author: UmiKami

README.es.md

@@ -48,14 +48,16 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co
 
 ## Instalación manual 
 
-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 14+:
+Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
+
+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 14+:
 
 ```bash
 $ npm i learnpack -g
 $ learnpack plugins:install learnpack-html
 ```
 
-2. Descarga estos ejercicios en particular usando learnpack y luego `cd` para entrar en la carpeta: 
+2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta: 
 
 ```bash
 $ learnpack install css-tutorial-exercises-course
@@ -65,7 +67,7 @@ $ learnpack install css-tutorial-exercises-course
 
 3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
 
-```sh
+```bash
 $ npm i jest@24.8.0 -g
 $ learnpack start
 ```
@@ -94,5 +96,5 @@ Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds
 
 Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
 
-Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
+Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
 

README.md

@@ -13,9 +13,9 @@
 </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 questions. 
-<!-- endhide -->
 
 *Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/README.es.md) :es:*
+<!-- endhide -->
 
 ## You'll be learning the following concepts:
 
@@ -50,7 +50,9 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa
 
 ## Manual installation
 
-1) Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+:
+[Clone the repository](https://4geeks.com/how-to/github-clone-repository) in your local environment and follow the steps below:
+
+1) Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+:
 
 ```bash
 $ npm i learnpack -g
@@ -67,7 +69,7 @@ $ learnpack install css-tutorial-exercises-course
 
 3) Start the tutorial/exercises by running the following command at the same level where your learn.json file is:
 
-```sh
+```bash
 $ npm i jest@24.8.0 -g
 $ learnpack start
 ```
@@ -96,4 +98,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
 
-This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and  [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and  [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).

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:
 

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.

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:
 

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:
 

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`.
 

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.
 

exercises/02.1-Background/index.html

@@ -5,6 +5,6 @@
 		<title>02 Background</title>
 	</head>
 	<body>
-		My background should be an image with th size "contain"
+		My background should be an image with the size "contain"
 	</body>
 </html>

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.
 

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`:
 

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:
 

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

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>

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.
 

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/

exercises/05-Specificity/tests.js

@@ -43,8 +43,8 @@ describe("All the styles should be applied", function () {
     let cssArray = document.styleSheets[0].cssRules;
     let orangeHoverSelector = "";
     for (let i = 0; i < cssArray.length; i++) {
-      if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important") {
-        orangeHoverSelector = cssArray[i].style.background;
+      if (cssArray[i].selectorText === "#thirditem" && cssArray[i].style._importants.background === "important" || cssArray[i].style._importants["background-color"] === "important") {
+        orangeHoverSelector = cssArray[i].style.background || cssArray[i].style["background-color"];
       }
     }
 

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:
 

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:
 

exercises/07-Very-Specific-Rules/README.es.md

@@ -1,6 +1,6 @@
-# `07` Reglas Muy Específicas
+# `07` Very Specific Rules
 
-## **Importante:**
+## 🔎 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.
 

exercises/07-Very-Specific-Rules/README.md

@@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40"
 
 # `07` Very Specific Rules
 
-# **Important:**
+## 🔎 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.
 
@@ -21,6 +21,6 @@ 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.
 
-## :bulb: Hint:
+## 💡 Hint:
 
 1. The `!important` attribute helps to override other attributes.

exercises/07-Very-Specific-Rules/tests.js

@@ -26,7 +26,7 @@ describe("All the styles should be applied", ()=>{
     }
     let reg = new RegExp(/color:\s*red\s*!important\s*;/gm)
 
-    expect(reg.test(color)).toBeTruthy();
+    expect(reg.test(color.toLowerCase())).toBeTruthy();
   });
 
   test("The ol second element background should be green", ()=>{
@@ -44,6 +44,14 @@ describe("All the styles should be applied", ()=>{
 
       }
 
+      if(background){
+        background = background.toLowerCase()
+      }
+
+      if(backgroundColor){
+        backgroundColor = backgroundColor.toLowerCase()
+      }
+
     } expect(background === 'green' || backgroundColor === 'green').toBeTruthy();
   })
 
@@ -62,7 +70,7 @@ describe("All the styles should be applied", ()=>{
 
       }
 
-    } expect(background === "yellow" || backgroundColor === "yellow").toBeTruthy();
+    } expect(background.toLowerCase() === "yellow" || backgroundColor.toLowerCase() === "yellow").toBeTruthy();
   })
 
   test("Write all your rules above the existing code", ()=>{

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!
 

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)
 

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:
 

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
 

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".
 

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.
 

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:

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.
 
@@ -20,6 +20,6 @@ Sigue estos pasos para que tu enlace (`anchor`) se vea así:
 
 6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`.
 
-## Resultado esperado:
+## 💻 Resultado esperado:
 
 ![Example Image](../../.learn/assets/13-1.gif?raw=true)

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`.
 
@@ -18,6 +18,6 @@ Anchors are not only used within text: when you are going to use anchors outside
 
 6. Inside of the `:hover` selector change the background of the button to `darkorange`.
 
-## Expected result:
+## 💻 Expected result:
 
 ![Example Image](../../.learn/assets/13-1.gif?raw=true)