Merge pull request #57 from josemoracard/jose2-01-welcome

ejercicios revisados

Author: tommygonzaleza

exercises/01-welcome/README.es.md

@@ -1,22 +1,24 @@
 
 # `01` Welcome to the world of HTML 😆 !!
 
-Hola, mi nombre es [Alejandro Sánchez](http://alesanchezr.com) y soy uno de los fundadores de @4GeeksAcademy (bootcamp de programación). Estos ejercicios y muchos otros tutoriales interactivos se han liberado al público gratuitamente a través del [Sitio web de BreatheCode](www.BreatheCo.de).
+Hola, mi nombre es [Alejandro Sánchez](http://alesanchezr.com) y soy uno de los fundadores de @4GeeksAcademy (bootcamp de programación). Estos ejercicios y muchos otros tutoriales interactivos se han liberado al público gratuitamente a través del [Sitio web de 4Geeks](www.4geeks.com).
 
 Estos ejercicios son para cualquier persona interesada en dominar los formularios HTML. Vamos a abordar los siguientes conceptos:
 
-1. Uso de entradas de formulario
+1. Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas
 
-2. Validaciones de formulario
+2. Uso de dropdowns
 
-3. GET vs POST
+3. Validaciones de formulario
 
-4. Dar estilos a un formulario
+4. GET vs POST
 
-## ➡️ Incremental y ✔️ autoevaluado
+5. Dar estilos a un formulario
+
+## ➡️ Incremental & ✔️ Autoevaluado
 
 - He construido los ejercicios de forma gradual, deberías sentir el progreso poco a poco, y con suerte, el incremento de dificultad entre cada ejercicio nunca será demasiado grande para frustrarte.
 
-- Todos los ejercicios han sido calificados automáticamente gracias a [@username](https://github.com/haydavid23)
+- Todos los ejercicios han sido calificados automáticamente gracias a [@haydavid23](https://github.com/haydavid23)
 
-Presiona `Next ->` en la parte superior de estas instrucciones para comenzar con el primer ejecicio.
+Presiona `Next ->` en la parte superior de estas instrucciones para comenzar con el primer ejercicio.

exercises/01-welcome/README.md

@@ -1,24 +1,24 @@
 
 # `01` Welcome to the world of HTML 😆 !!
 
-Hello, my name is [Alejandro Sanchez](http://alesanchezr.com) and I'm one of the founders of @4GeeksAcademy (coding bootcamp).
+Hello, my name is [Alejandro Sánchez](http://alesanchezr.com), and I'm one of the founders of @4GeeksAcademy. These exercises and many other interactive tutorials have been open sourced and released to the public for free through the [4Geeks Website](www.4geeks.com).
 
-These exercises and many other interactive tutorials have been open sourced and released to the public for free thru the [BreatheCode Website](www.BreatheCo.de).
+These exercises are for anyone interested in mastering HTML Forms, we will go over the following concepts:
 
-This exercises are for anyone interested in mastering HTML Forms, we will go over the following concepts:
+1. Using text inputs, text areas, date inputs and numeric inputs
 
-1. Using inputs
+2. Using dropdowns
 
-2. Form preventive validations
+3. Form preventive validations
 
-3. GET vs POST
+4. GET vs POST
 
-4. Styling a form
+5. Styling a form
 
-## ➡️ Incremental & Autograded
+## ➡️ Incremental & ✔️ Autograded
 
 - I've built the exercises incrementally, you should feel the progress little by little, and hopefully, the difficulty raising between exercises will never be too big to get you frustrated.
 
-- All exercises have been automatically graded thanks to [@username](https://github.com/haydavid23)
+- All exercises have been automatically graded thanks to [@haydavid23](https://github.com/haydavid23)
 
 Click the `Next ->` button on the top of these instructions to begin with the first exercise.

exercises/02-hello-world/README.es.md

@@ -1,4 +1,4 @@
-# `02` Hola, mundo
+# `02` Hello World
 
 ## 📝 Instrucciones:
 
@@ -10,9 +10,8 @@
 
 + Puedes leer sobre la estructura típica de un sitio web aquí:
 
-https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure
-
+https://4geeks.com/es/lesson/what-is-html-learn-html-es#estructura-de-pgina
 
 ## 📎 Nota:
 
-El título aparecerá en el contenido de la página web, se mostrará en la pestaña del navegador.
++ El título aparecerá en el contenido de la página web, se mostrará en la pestaña del navegador.

exercises/02-hello-world/README.md

@@ -4,14 +4,14 @@
 
 1. Add the basic HTML structure for any website (doctype, html, head and body)
 
-2. Add "Hello World" inside the title tag of the website.
+2. Add "Hello World" inside the `<title>` tag of the website.
 
 ## 💡 Hint:
 
 + You can read about a typical website structure here:
 
-https://content.breatheco.de/lesson/what-is-html-learn-html#page-structure
+https://4geeks.com/lesson/what-is-html-learn-html#page-structure
 
-### 📎 Note:
+## 📎 Note:
 
-The title is not going to show on the content of the website, it will show on the browser tab.
++ The title is not going to show on the content of the website, it will show on the browser tab.

exercises/02-hello-world/tests.js

@@ -8,7 +8,7 @@ describe('basic HTML structure', function () {
     beforeEach(() => { document.documentElement.innerHTML = html.toString(); });
     afterEach(() => { jest.resetModules(); });
 
-     it('order of HTML tags', function () {
+     it('Correct order of HTML tags', function () {
         let a = document.documentElement.innerHTML = html.toString()
         let b = a.indexOf("<!DOCTYPE html>")
         let c = a.indexOf("<html")
@@ -28,15 +28,15 @@ describe('basic HTML structure', function () {
      let a = document.documentElement.innerHTML = html.toString()
            expect(a.indexOf("<!DOCTYPE html>")).not.toBe(-1)
     })
-    it('<html> tag should exists', function () {
+    it('<html> tag should exist', function () {
      let a = document.documentElement.innerHTML = html.toString()
            expect(a.indexOf("<html")).not.toBe(-1)
     })
-        it('<head> tag should exists', function () {
+        it('<head> tag should exist', function () {
      let a = document.documentElement.innerHTML = html.toString()
            expect(a.indexOf("<head>")).not.toBe(-1)
     })
-    it('<title> tag exists and the innerHTML needs to be "Hello World"', function () {
+    it('<title> tag exists and the innerHTML should be "Hello World"', function () {
      let a = document.documentElement.innerHTML = html.toString()
            expect(a.indexOf("<title>")).not.toBe(-1)
            expect(document.querySelector("title").innerHTML).toBe("Hello World")

exercises/03-Type-Radio/README.es.md

@@ -10,6 +10,8 @@ Para agrupar varios radios en un mismo grupo de opciones debes asignarles el mis
 
 2. Crea otros 2 input `type=radio` para elegir las orientaciones sexuales: Heterosexual o LGTBI.
 
-### 📎 Nota: 
+## 💡 Pistas: 
 
-Prueba tu formulario, sólo se debe poder elegir un género y una orientación sexual.
++ Investiga sobre las etiquetas `<input>` y `<label>`.
+
++ Prueba tu formulario, solo se debe poder elegir un género y una orientación sexual.

exercises/03-Type-Radio/README.md

@@ -1,15 +1,17 @@
 # `03` Type Radio 
 
-The input type=radio is used when the user is not allowed to pick more than one option.
+The `input type=radio` is used when the user is not allowed to pick more than one option.
 
-To group bind to different radios into the same group of options you need to assign them the same name.
+To bind different radios into the same group of options you need to assign them the same name.
 
 ## 📝 Instructions:
 
 1. Create 2 input `type=radio` to pick the gender values: Male or Female.
 
 2. Create another 2 input `type=radio` to pick sexual orientation: Heterosexual or LGBTI.
 
-### 📎 Note:
+## 💡 Hints:
 
-Test your form, only one gender and one sexual orientation should be allowed to pick.
++ Search about `<input>` and `<label>` tags.
+
++ Test your form, only one gender and one sexual orientation should be allowed to pick.

exercises/03-Type-Radio/tests.js

@@ -9,7 +9,7 @@ describe('basic HTML structure', function () {
     beforeEach(() => { document.documentElement.innerHTML = html.toString(); });
     afterEach(() => { jest.resetModules(); });
 
-     it('order of HTML tags', function () {
+     it('Correct order of HTML tags', function () {
         let a = document.documentElement.innerHTML = html.toString()
         let b = a.indexOf("<!DOCTYPE html>")
         let c = a.indexOf("<html")
@@ -25,12 +25,12 @@ describe('basic HTML structure', function () {
 
     })
 
-    test("there should be four input elements of type radio", function () {
+    test("There should be four input elements of type radio", function () {
         let inpts = document.querySelectorAll("input[type=radio]")
 
         expect(inpts.length).toEqual(4)
     })
-    test("the radio inputs should have the requested values, aka, Male, Female, Heterosexual, LGBTI", function () {
+    test("The radio inputs should have the requested values: Male, Female, Heterosexual, LGBTI", function () {
        let inpts = document.querySelectorAll("input[type=radio]")
         let requestedValues_en = ["Male", "Female", "Heterosexual", "LGBTI"]
         let requestedValues_es = ["Masculino", "Femenino", "Heterosexual", "LGTBI"]
@@ -59,7 +59,7 @@ describe('basic HTML structure', function () {
             expect(expected).toBeTruthy()
         })
     })
-    test("there should only be two unique names, one per pair of radio inputs", function () {
+    test("There should only be two unique names, one per pair of radio inputs", function () {
        let inpts = document.querySelectorAll("input[type=radio]")
         let firstName =  inpts[0].getAttribute("name")
         let secondName =  inpts[2].getAttribute("name")

exercises/04-Replicate-simple-form/README.es.md

@@ -1,5 +1,7 @@
-# `04` Reproducir un simple formulario 
+# `04` Replicate Simple Form
 
-Usando una tabla, replica exactamente este mismo formulario (no te preocupes por los atributos `method` y `action` del formulario):
+## 📝 Instrucciones:
 
-![Formulario](../../.learn/assets/5xKY0rI.png?raw=true)
+1. Usando una tabla, replica exactamente este mismo formulario (no te preocupes por los atributos `method` y `action` del formulario):
+
+![Formulario HTML](../../.learn/assets/5xKY0rI.png?raw=true)

exercises/04-Replicate-simple-form/README.md

@@ -1,5 +1,7 @@
 # `04` Replicate Simple Form
 
-Using a table, replicate this exact same form (don't worry about the `method` and `action` attributes of the form):
+## 📝 Instructions:
 
-![asd](../../.learn/assets/5xKY0rI.png?raw=true)
+1. Using a table, replicate this exact same form (don't worry about the `method` and `action` attributes of the form):
+
+![html form](../../.learn/assets/5xKY0rI.png?raw=true)

exercises/05-GET-vs-POST/README.es.md

@@ -1,6 +1,6 @@
 # `05` GET vs POST
 
-Sigue estos pasos:
+## 📝 Instrucciones:
 
 1. Ejecuta el ejercicio.
 
@@ -20,4 +20,4 @@ https://...whatever...?firstname=value&lastname=value&email=value
 
 7. Envíalo de nuevo.
 
-Ahora la URL es mucho más simple, y los datos recogidos en el formulario están ocultos.
+Ahora la URL es mucho más simple, y los datos recogidos en el formulario están ocultos.

exercises/05-GET-vs-POST/README.md

@@ -1,6 +1,6 @@
 # `05` GET vs POST
 
-Follow these steps:
+## 📝 Instructions:
 
 1. Run the exercise.
 
@@ -20,4 +20,4 @@ https://...whatever...?firstname=value&lastname=value&email=value
 
 7. Submit again.
 
-Now the URL is a lot more simple, and the data collected from the form is hidden.
+Now the URL is a lot more simple, and the data collected from the form is hidden.

exercises/06-fieldsets-labels-and-styles/README.es.md

@@ -1,38 +1,32 @@
-# `06` Campos, etiquetas y estilos
+# `06` Fieldsets, labels and styles
 
-Darle estilo de un formulario es aburrido y tedioso, pero si usas ciertas etiquetas, tu vida puede ser más fácil. 
+Darle estilo a un formulario es aburrido y tedioso, pero si usas ciertas etiquetas, tu vida puede ser más fácil. 
 
-`<label>`  
+`<label>`: Una de las cosas recurrentes que debes hacer es agregar una etiqueta `<label>`. Las etiquetas `<label>` se suelen poner junto a un `<input>` y le dicen al usuario qué representa esa entrada/input.
 
-Una de las cosas recurrentes que debes hacer es agregar un etiqueta `label`. `label` le dice al usuario final que representa esa entrada/input.
+`<fieldset>`: Son ideales para añadir varias entradas en el mismo grupo lógico (por ejemplo, agrupar a los input radio -hombre y mujer- en un conjunto de campos de sexo).
 
-`<fieldset>` 
+`<legend>`: Es el nombre del grupo de campos que se van a mostrar al usuario.
 
-Son ideales para añadir varias entradas en el mismo grupo lógico (por ejemplo, agrupar a los input radio -hombre y mujer- en un conjunto de campos de sexo).
+## 📝 Instrucciones:
 
-`<legend>`  
-
-Es el nombre del grupo de campos que se va a mostrar al usuario final.
-
-## 📝 Instrucciones
-
-1. Aplica un estilo a esta fuente aplicandándolo al "body":
+1. Da estilo al formulario aplicando al `<body>` esta fuente:
 
 ```css
 font-family: "Lato", sans-serif;
 ```
 
-2. Elimina los bordes (`border`) y los márgenes (`margin`) de todos los campos. 
+2. Establece el `display` de la etiqueta `<form>` a `inline-block`.
 
-2. Aplica un relleno (`padding`) de `10px` en la parte superior e inferior de todos los campos (`fieldset`). 
+3. Elimina los bordes (`border`) y los márgenes (`margin`) de todos los `<fieldset>`. 
 
-3. Aplica un relleno (`padding)` de `0px` a la izquierda y a la derecha de todos los campos (`fieldset`). 
+4. Aplica un relleno (`padding`) de `10px` en la parte superior e inferior y de `0px` a la izquierda y derecha de todos los `<fieldset>`
 
-4. Aplicar un grosor de fuente (`font-weight`) de `800` en todos los campos (`fieldset`).
+5. Aplicar un grosor de fuente (`font-weight`) de `800` en todos los `<fieldset>`.
 
-5. Disminuye el grosor de la fuente (`font-weight`) de todas las `label` a `400`.
+6. Disminuye el grosor de la fuente (`font-weight`) de todas las `<label>` a `400`.
 
-6. Aplica estas reglas a todas las entradas (inputs) de texto.
+7. Aplica estas reglas a todas las entradas (inputs) de texto.
 
 ```css
 input[type=text] {
@@ -42,7 +36,7 @@ input[type=text] {
 }
 ```
 
-7. Aplica este estilo al botón de envío (submit).
+8. Aplica este estilo al botón de envío (submit button).
 
 ```css
 input[type=submit] {
@@ -55,6 +49,6 @@ input[type=submit] {
 }
 ```
 
-## El resultado debería ser este:
+## 💻 Resultado Esperado:
 
 ![06-fieldsets-labels-and-styles](../../.learn/assets/NGmLdal.png?raw=true)

exercises/06-fieldsets-labels-and-styles/README.md

@@ -1,36 +1,32 @@
 # `06` Fieldsets, labels and styles
 
-Styling a form is boring and tedious, but if you use certain tags you life can bbe easier. 
+Styling a form is boring and tedious, but if you use certain tags, your life can be easier. 
 
-`<label>`  
+`<label>`: One of the typical things you need to do is add a "label" to your `<input>`, labels tell the end-user what the input stands for.
 
-One of the tipical things you need to do is add a "label" to your input, label's tell the end-user what the input stands for.
+`<fieldset>`: They are ideal to add several inputs into the same logical group (for example grouping radios -male and female- into a gender fieldset).
 
-`<fieldset>`  
+`<legend>`: It's the name of the fieldset group that is going to be shown to the end-user.
 
-Are ideal to add several inputs into the same logical group (for example grouping radios -male and female- into a gender fieldset).
+## 📝 Instructions:
 
-`<legend>`  
-
-Is the name of the fieldset group that is going to be shown to the end-user.
-
-## 📝 Instructions
-
-1. Give a style to this font by aplying to the body:
+1. Give style to this form by applying this font to the `<body>`:
 
 ```css
 font-family: "Lato", sans-serif;
 ```
 
-2. Remove `borders` and `margins` from all the fieldsets. 
+2. Set the `display` of the `<form>` tag to `inline-block`.
+   
+3. Remove `borders` and `margins` from all the `<fieldset>` tags.
 
-3. Apply a `padding` of `10px` to the top and bottom and a `padding` of `0px` to the left and right to all the fieldsets. 
+4. Apply a `padding` of `10px` to the top and bottom and a `padding` of `0px` to the left and right of all the `<fieldset>` tags.
 
-4. Apply a `font-weight` of `800` to all the fieldsets.
+5. Apply a `font-weight` of `800` to all the `<fieldset>` tags.
 
-5. Decrease the `font-weight` off all the lable's to `400`.
+6. Decrease the `font-weight` of all the `<label>` tags to `400`.
 
-6. Apply these rules to all the text inputs:
+7. Apply these rules to all the text inputs:
 
 ```css
 input[type=text] {
@@ -40,7 +36,7 @@ input[type=text] {
 }
 ```
 
-7. Apply this style to the submit button
+8. Apply this style to the submit button:
 
 ```css
 input[type=submit] {
@@ -53,6 +49,6 @@ input[type=submit] {
 }
 ```
 
-## The result should look like this:
+## 💻 Expected Result:
 
 ![06-fieldsets-labels-and-styles](../../.learn/assets/NGmLdal.png?raw=true)