merged with jose mora

exercises/00-Welcome/README.es.md → exercises/00-welcome/README.es.md

@@ -27,9 +27,8 @@ Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nad
 
 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) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
-1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (run-tests) :warning:
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentación) 📖
+2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) 💻, (run-tests) ⚠️
+3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribución: (tutoriales, correcciones), 🤖
 
-Este proyecto sigue las especificaciones
-[all-contributors](https://github.com/kentcdodds/all-contributors)
- ¡Todas las contribuciones son bienvenidas!
+Este proyecto sigue las especificaciones [all-contributors](https://github.com/kentcdodds/all-contributors) ¡Todas las contribuciones son bienvenidas!

exercises/00-Welcome/README.md → exercises/00-welcome/README.md

@@ -6,9 +6,9 @@ intro: "https://www.youtube.com/watch?v=AuXnQHKhjxw"
 
 My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂
 
-Learning to code is hard, you will probably need coaching! DM me on twitter if you have any questions.
+Learning to code is hard; you will probably need coaching! DM me on Twitter if you have any questions.
 
-During this course you will be learning the following concepts:
+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>`,
 
@@ -20,14 +20,14 @@ During this course you will be learning the following concepts:
 
 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 CSS is all about! Learn CSS to make your website beautiful. Let's make it shine!
+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 CSS is all about! Learn CSS to make your website beautiful. Let's make it shine!
 
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
-2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (run-tests) :warning:
+1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentation) 📖
+2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder) 💻, (run-tests) ⚠️
 3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribution: (tutorials, corrections), 🤖
 
 This project follows the

exercises/01-inline-styles/README.es.md

@@ -0,0 +1,30 @@
+---
+tutorial: "https://www.youtube.com/watch?v=c5JeXOnI-Sg"
+---
+
+# `01` Inline styles
+
+El CSS se trata de agregar estilos a nuestros elementos HTML.
+
+La forma más **básica** de aplicar un estilo a un elemento HTML es usar el atributo `style` dentro de la etiqueta HTML. Esto se llama "estilos en línea" (*inline style*) y funciona así:
+
+```html
+<a href="google.com" style="color: red; font-size: 14px;">Ir a Google</a>
+```
+
+Esto establecerá el `color` del texto del enlace anterior a rojo y el tamaño de fuente (`font-size`) en 14 píxeles.
+
+En el diseño web contemporáneo, esta forma de aplicar estilos se desaconseja porque no es eficiente: tienes que aplicar estilos etiqueta por etiqueta. Pero te encontrarás con ejemplos de esto y necesitarás estar familiarizado con ello.
+
+Para aplicar estilos, siempre tienes que seguir estos pasos:
+
+1. Leer el HTML y seleccionar qué elemento deseas decorar para aplicarle CSS.
+2. Aplicar el estilo con el atributo `style` como se muestra arriba.
+
+## 📝 Instrucciones:
+
+1. Establece un estilo en línea para cambiar el color de fondo (`background-color`) de la tabla a verde.
+
+## 💡 Pista:
+
+- Cómo usar `background-color`: https://www.w3schools.com/cssref/pr_background-color.php

exercises/00.1-Inline-Styles/README.md → exercises/01-inline-styles/README.md

@@ -1,14 +1,14 @@
 ---
 tutorial: "https://www.youtube.com/watch?v=h9WPp8gPMS8"
 ---
-# `00.1` Inline styles
+# `01` Inline styles
 
 CSS is about adding styles to our HTML elements. 
 
 The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this:
 
 ```HTML
-<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
+<a href="google.com" style="color: red; font-size: 14px;">Go to Google</a>
 ```
 
 This will set the text color of the link above to red, and the font size to 14 pixels.
@@ -22,12 +22,10 @@ To apply styles you always have to follow thеse steps:
 
 That is it! The rest is just semantics! 😁
 
-
 ## 📝 Instructions:
 
-1. Set an inline style to change the background color of the table to green (green). For this exercise, DO NOT use the styles.css :(
+1. Set an inline style to change the `background-color` of the table to green.
 
+## 💡 Hint:
 
-### 💡 Hint:
-- How to use background-color: https://www.w3schools.com/cssref/pr_background-color.php
-- A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in VSCode. 
+- How to use `background-color`: https://www.w3schools.com/cssref/pr_background-color.php

exercises/01-inline-styles/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>01 Inline Styles</title>
+	</head>
+
+	<body>
+		<table>
+			<tr>
+				<td>Hello</td>
+			</tr>
+			<tr>
+				<td>My brother</td>
+			</tr>
+		</table>
+	</body>
+</html>

exercises/01-inline-styles/solution.hide.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>01 Inline Styles</title>
+	</head>
+
+	<body>
+		<table style="background-color: green">
+			<tr>
+				<td>Hello</td>
+			</tr>
+			<tr>
+				<td>My brother</td>
+			</tr>
+		</table>
+	</body>
+</html>

exercises/01-inline-styles/tests.js

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
+
+jest.dontMock('fs');
+
+// Run the tests
+test("There should be a table element", () => {
+    const table = document.querySelector("table");
+    expect(table).toBeTruthy();
+});
+
+test("The table background color should be green", () => {
+    const table = document.querySelector("table");
+    const computedStyles = window.getComputedStyle(table);
+    expect(computedStyles.backgroundColor).toBe("green");
+});
+
+test("There should be two table rows", () => {
+    const rows = document.querySelectorAll("tr");
+    expect(rows.length).toBe(2);
+});

exercises/01-Style-tag/README.es.md → exercises/02-style-tag/README.es.md

@@ -1,7 +1,7 @@
 ---
 tutorial: "https://www.youtube.com/watch?v=9WrVN0rOg_k"
 ---
-# `01` Style tag in CSS
+# `02` Style tag in CSS
 
 Otra manera que existe de aplicar estilos es utilizar una etiqueta `<style>` en lugar de la propiedad `style`, siempre debes seguir estos pasos:
 
@@ -25,14 +25,14 @@ Mira este ejemplo:
 ```
 
 Tenemos un enlace de HTML `<a>` que lleva a las personas a google.com cuando se hace clic.
-Usamos CSS para seleccionar todas las etiquetas `<a>` y luego hacerlas `pink`.
+Usamos CSS para seleccionar todas las etiquetas `<a>` y luego hacerlas rosa (`pink`).
 
-## 📝 Instrucciones
+## 📝 Instrucciones:
 
 1. Pega este código en tu sitio web para ver los resultados.
 
 ## 💻 Vista previa:
 
 Debería verse así:
 
-![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true)
+![Style tag resultado esperado](../../.learn/assets/01-1.png?raw=true)

exercises/01-Style-tag/README.md → exercises/02-style-tag/README.md

@@ -1,17 +1,17 @@
 ---
 tutorial: "https://www.youtube.com/watch?v=iDwXZoQR8EM"
 ---
-# `01` Style tag in CSS
+# `02` Style tag in CSS
 
-Another way to apply styles is by using a `<style>` tag, you always have to follow these steps:
+Another way to apply styles, is by using a `<style>` tag instead of the `style` property. You always have to follow these steps:
 
 1. Read the HTML and pick what element (tag) you want to decorate or apply styles to.
 
 2. Programmatically select the element you want to style using [CSS Selectors](https://4geeks.com/lesson/what-is-css-learn-css#wait-what-is-a-selector).
 
 3. Write the styling that you want by using [CSS property rules](https://4geeks.com/lesson/what-is-css-learn-css#properties).
 
-But make sure your CSS code is wrapped inside a `<style>` tag instead of using the tag `style` property.
+But make sure your CSS code is wrapped inside a `<style>` tag.
 
 Look at this example:
 
@@ -35,4 +35,4 @@ We use CSS to select all the anchor tags and make them pink.
 
 It should look like this:
 
-![01 Hello World Exercise Preview](../../.learn/assets/01-1.png?raw=true)
+![Style tag expected result](../../.learn/assets/01-1.png?raw=true)

exercises/02-style-tag/index.html

@@ -0,0 +1 @@
+<!-- Your code here -->

exercises/01.1-Add-a-style-tag/README.es.md → exercises/02.1-add-a-style-tag/README.es.md

@@ -1,12 +1,13 @@
 ---
 tutorial: "https://www.youtube.com/watch?v=rX-0KNBCxrY"
 ---
-# `01.1` The Style Tag
+
+# `02.1` The Style Tag
 
 Veamos otro ejemplo pero esta vez agregando la etiqueta `<style>` nosotros mismos.
 Puedes tener cuantas etiquetas `<style>` quieras, pero se recomienda solo tener una al principio del código de tu sitio web.
 
-```HTML
+```html
 <style>
     /* Los estilos CSS del sitio web van aquí */
 </style>

exercises/01.1-Add-a-style-tag/README.md → exercises/02.1-add-a-style-tag/README.md

@@ -2,12 +2,12 @@
 tutorial: "https://www.youtube.com/watch?v=K1SrZxiiM6I"
 ---
 
-# `01.1` The Style Tag
+# `02.1` The Style Tag
 
 The previous exercise had a pre-writen `<style>` tag.
 Let's add one style tag ourselves. It is recommended to have only one style tag, always at the beginning of your website code.
 
-```HTML
+```html
 <style>
     /* The website CSS Styles go here */
 </style>

exercises/02.1-add-a-style-tag/index.html

@@ -0,0 +1,6 @@
+<!-- add a style tag and select the <p> tag, then make it color "blue" -->
+<p>
+	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
+	around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity,
+	math, writing, and confidence.
+</p>

exercises/01.1-Add-a-style-tag/solution.hide.html → exercises/02.1-add-a-style-tag/solution.hide.html

@@ -7,6 +7,6 @@
 </style>
 <p>
 	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
-	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,
+	around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity,
 	math, writing, and confidence.
 </p>

exercises/01.2-RGBA-colors/README.es.md → exercises/02.2-rbga-colors/README.es.md

@@ -2,7 +2,7 @@
 tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI"
 ---
 
-# `01.2` Your First Style
+# `02.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.2-RGBA-colors/README.md → exercises/02.2-rbga-colors/README.md

@@ -1,7 +1,8 @@
 ---
 tutorial: "https://www.youtube.com/watch?v=TqmY9GLTwQ0"
 ---
-# `01.2` Your First Style
+
+# `02.2` Your First Style
 
 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:
 

exercises/01.3-Your-Second-Style/README.es.md → exercises/02.3-your-second-style/README.es.md

@@ -2,7 +2,7 @@
 tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8"
 ---
 
-# `01.3` Your Second Style
+# `02.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/01.3-Your-Second-Style/README.md → exercises/02.3-your-second-style/README.md

@@ -2,7 +2,7 @@
 tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds"
 ---
 
-# `01.3` Your Second Style
+# `02.3` Your Second Style
 
 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: