revision of exercises

ElviraQDP · ElviraQDP · commit 8d7fc2b801af · 2020-11-11T15:47:29.000Z
diff --git a/exercises/00-Welcome/README.es.md b/exercises/00-Welcome/README.es.md
@@ -0,0 +1,31 @@
+---
+intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
+---
+
+# ¡¡Bienvenido a los ejercicios de CSS!!
+
+Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂
+Aprender a programar es dificil ¡Necesitas coaching! Envíame un DM vía Twitter si tienes alguna pregunta.
+
+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. Aplicarle 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!
+
+## Colaboradores
+
+Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
+1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (build-tests) :warning:
+
+Este proyecto sigue las especificaciones
+[all-contributors](https://github.com/kentcdodds/all-contributors)
+ ¡Todas las contribuciones son bienvenidas!
+ 
diff --git a/exercises/00-Welcome/README.md b/exercises/00-Welcome/README.md
@@ -9,7 +9,7 @@ Learning to code is hard, you need coaching! DM me on twitter if you have any qu
 
 During this course you will be learning the following concepts:
 
-1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal stylesheet `<link>`,
+1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal 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.
diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md
@@ -1,27 +1,31 @@
+---
+tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
+---
+
 # `01` Hello World en CSS
 
-CSS es sobre estilos (styles). Para aplicar estilos, siempre debe seguir estos pasos:
+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. Programáticamente selecciona un elemento que deseas decorar con los selectores de CSS.
-2. Escribe el estilo que quieras usando las reglas de CSS.
+1. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS.
+2. Escribe el estilo que quieras usando las reglas CSS.
 
-¡Eso es todo! El resto es solo semántica.! 😁
+¡Eso es todo! El resto es solo semántica. 😁
 
 Mira este ejemplo:
 
 ```HTML
 <style>
     a {
-        /* change this style to yellow */
+        /* cambia este estilo a yellow */
         color: pink;
     }
 </style>
 <a href="https://google.com" target="_blank">Click me to open google.com</a>
 ```
 
-Tenemos un enlace de HTML `<a>` que lleva a las personas a google.com cuando se hace click.
-Usamos CSS para selectionar todas las etiquetas `<a>` (anclas) y luego hacerlas rosadas.
+Tenemos un enlace de HTML `<a>` que lleva a las personas a google.com cuando se hace clic.
+Usamos CSS para selectionar todas las etiquetas `<a>` y luego hacerlas `pink`.
 
 ## 📝 Instrucciones
 
diff --git a/exercises/01.1-The-Style-Tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md
@@ -0,0 +1,23 @@
+---
+tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
+---
+
+# `01.1` Etiqueta Style 
+
+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.
+
+```HTML
+<style>
+    /* los estilos CSS del sitio web van aquí */
+</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) 
+
+## 💻 Vista previa
+
+Debería verse así:
+
+![01 Hello World Exercise Preview](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/01.1-1.png?raw=true)
diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-Your-First-Style/README.es.md
@@ -1,8 +1,8 @@
 # `01.2` Tu Primer Estilo
 
-Al hacer 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 anclas de mi sitio web (`<a> tag's`) sean azules:
+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,5 +12,5 @@ a {
 
 ## 📝 Instrucciones:
 
-1. En este momento, se está aplicando un estilo que se encarga de hacer el enlace roja.
-2. Cambia el estilo para que tu enlace se vea amarilla.
+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).
diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md
@@ -1,8 +1,8 @@
 # `01.2` Tu Segundo Estilo
 
-Al hacer CSS, la idea es aplicar `reglas css` a tus` elementos html`, siempres debe 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 enlace de mi sitio web (`<a> tag's`) sean azules:
+Por ejemplo, este es el código si quiero que todos las anchors de mi sitio web (etiquetas `<a>`) sean azules:
 
 ```css
 a {
@@ -12,5 +12,5 @@ a {
 
 ## 📝 Instrucciones:
 
-1. Haz que el fondo de tu sitio web sea azul seleccionando el `body` y aplicando la regla `background` con un valor `azul`.
-2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul de la página (toda la página azul).
+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).
diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md
@@ -0,0 +1,20 @@
+---
+tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg"
+---
+
+# `02` Hoja de estilos separada
+
+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.
+
+## 📝 Instrucciones:
+
+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. 
+
+ 
diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md
@@ -6,11 +6,11 @@ tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg"
 
 If you use the html `<link>` tag, you can also have your styles on a separate file that we normally call `styles.css`.
 
-That is an event better practice because it lets you have an CSS agnostig website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML.
+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.
 
 ## 📝 Instructions:
 
-Fill the `styles.css` with the content needed to bake the website body blue.
+Fill the `styles.css` with the content needed to make the website body blue.
 
 ## 💡Hint:
 
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
@@ -19,7 +19,8 @@ describe("All the styles should be applied", function () {
     jest.resetModules();
   });
   it("The body tag should not contains any inline style", function () {
-    document.querySelector(
+    document.qulector(
+.querySelector(
       "head"
     ).innerHTML=`<style>${css.toString()}</style>`;
     let bodyInlineStyle=document.getElementsByTagName("body");
diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md
@@ -1,17 +1,16 @@
-# `02.1` Background
+# `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 un `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, puede especificar si desea que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puede especificar si desea cambiar el tamaño y ajustar el contenedor completo donde se aplica, 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 ajustarla su tamaño al contenedor completo, entre otras propiedades eso puede ser modificado.
 
 ## 📝 Instrucciones:
 
-
 1.  Construye el ejercicio.
 2.  Verifica la vista previa.
-3.  En el archivo styles.css el background-size a 'contain' (verifica la pestaña styles.css).
-4.  Construye (built) y previsualiza (preview) el ejercicio nuevamente.
-5.  Cambia el background-repeat a 'inherit'  para que se repita sobre el eje x y el eje y.
+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.
 
 
diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md
@@ -1,23 +1,23 @@
-# `03` Inline Styles (estilos alineados)
+# `03` Inline Styles (estilos en la línea)
 
-Inline styles 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 inline styles, en lugar de declarar una etiqueta <style> en el encabezado de el documento, debes establecer el atributo "estilo" de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico.
+Para usar estiloss 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>
 ```
 
-Estableceras el color de este enlace específico en rojo 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 en 14px.
 
 Nota: Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, separadas por punto y coma.
 
 ## 📝 Instrucciones:
 
 
-1. Establece un estilo en línea (inline style) para cambiar el color de fondo de la tabla a verde. Para este ejercicio, NO use styles.css :(
+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 :(
 
 
 ### Pista:
diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md
@@ -0,0 +1,23 @@
+# `04` El selector de clase
+
+Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector de `.class`:
+
+#### 1) Selector de `.class` 
+
+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.
+
+```css
+.small{
+    font-size: 9px;
+}
+```
+Nota: cualquier etiqueta html con `class="small"` tendrá un  font-size de 9px.
+
+# 📝 Instrucciones:
+
+En este momento hay una clase seleccionada en el CSS llamada
+`.b-blue`.
+
+Por favor aplica la clase a ambas etiquetas HTML `<p>`.
diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md
@@ -2,15 +2,15 @@
 
 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.
 
-Una forma de hacerlo es combinando varias propiedades en una, como con "borde":
+Una forma de hacerlo es combinando varias propiedades en una, como con "border":
 
 ```css
 border-color: black;
 border-style: solid;
 border-width: 1px;
 ```
 
-Las propiedades de Border se pueden consolidar en una sola línea como:
+Las propiedades de border se pueden consolidar en una sola línea como:
 
 ```css
 border: black 1px solid;
@@ -29,4 +29,4 @@ P.S: The background size no se puede combinar, los navegadores aún no lo admite
 # Hint:
 
 - Como usar el background-size: http://lmgtfy.com/?q=css+background
-- Como usar el background-size: http://lmgtfy.com/?q=css+padding
+- Como usar el padding: http://lmgtfy.com/?q=css+padding
diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/04.1-Combined-Rules/README.md
@@ -29,4 +29,4 @@ P.S: The background size cannot be combined, the browsers don't support it yet.\
 # Hint:
 
 - How to use the background-size: http://lmgtfy.com/?q=css+background
-- How to use the background-size: http://lmgtfy.com/?q=css+padding
+- How to use the padding: http://lmgtfy.com/?q=css+padding
diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md
@@ -0,0 +1,17 @@
+# `04` Class Selector
+
+You can also select an element by `#id` and apply stiles to it.
+
+#### The `#id` selector
+
+```css
+#small{
+    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.
+
+# 📝 Instructions:
+
+Add the id `button1` on to the `<span>` tag and compile to check the result on the console.
