Merge branch 'master' into html-forms-tutorial-exercises

Author: alesanchezr

.devcontainer/devcontainer.json

@@ -22,7 +22,7 @@
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 
-	"onCreateCommand": "npm i [email protected] -g && npm i @learnpack/[email protected].20 -g && learnpack plugins:install [email protected]"
+	"onCreateCommand": "npm i [email protected] -g && npm i @learnpack/[email protected].26 -g && learnpack plugins:install [email protected]"
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

.gitpod.Dockerfile

@@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest
 USER gitpod
 
 RUN npm i [email protected] -g
-RUN npm i @learnpack/[email protected].20 -g && learnpack plugins:install [email protected]
+RUN npm i @learnpack/[email protected].26 -g && learnpack plugins:install [email protected]

README.es.md

@@ -13,29 +13,28 @@
 <a href="https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git"><img src="https://gitpod.io/button/open-in-gitpod.svg" /></a>
 <!-- endhide -->
 
-Los formularios son tan importantes en el mundo de HTML, CSS y Javascript que decidí dedicarles un tutorial especial para enfocarme en todas las entradas/inputs, botones y elementos que HTML trae por defecto para centrarme en la interacción. En estos ejercicios aprenderás:
+Los formularios son tan importantes en el mundo de HTML, CSS y JavaScript que decidí dedicarles un tutorial especial para enfocarme en todas las entradas/inputs, botones y elementos que HTML trae por defecto para centrarme en la interacción. En estos ejercicios aprenderás:
 
 1. Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas.
 
 2. Uso de dropdowns.
 
-3. Formar validaciones preventivas.
+3. Validaciones de formulario.
 
 4. GET vs POST.
 
-5. Diseñar un formulario.
+5. Dar estilos a un formulario.
 
 <!-- hide -->
 #### Antes de empezar... hay otros tutoriales 
+
 <ol>
   <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Aprende HTML</a></li>
-    <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5 </a>← estás aquí</li>
-  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a>
+  <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Aprende Formularios HTML5</a>← 🔥 Estás aquí</li>
+  <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Aprende CSS</a></li>
+    <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Aprende CSS Layouts</a></li>
   <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Aprende Bootstrap</a></li>
 </ol>
-<p align="center">
-  <img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
-</p>
 
 ## Instalación en un clic (recomendado)
 
@@ -47,39 +46,39 @@ Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Co
 
 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+:
+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 download html-forms-tutorial-exercises
 $ cd html-forms-tutorial-exercises
 ```
 
 > Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.
 
-3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo bc.json:
+3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
 
-```sh
+```bash
 $ npm i [email protected] -g
 $ learnpack start
 ```
 <!-- endhide -->
 
 ## ¿Cómo están organizados los ejercicios?
 
-Cada ejercicio es una pequeña aplicación de react que contiene los siguientes archivos:
+Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
 
 1. **index.js:** representa el archivo de entrada para toda la aplicación.
 2. **README.md:** contiene las instrucciones de los ejercicios.
 3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio.
 
-> Nota: Estos ejercicios son autograduados. Los tests son muy rígidos y estrictos, mi recomendación es que ignores los tests y usarlos solo como una recomendación o puedes frustrarte.
+> Nota: Los ejercicios son autograduados, pero los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
 
 ## Colaboradores
 
@@ -89,4 +88,4 @@ 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

@@ -10,11 +10,11 @@
 
 <h3>Start now: </h3>
 <a href="https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git"><img src="https://gitpod.io/button/open-in-gitpod.svg" /></a>
-<!-- endhide -->
 
 *Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/README.es.md) :es:*
+<!-- endhide -->
 
-Forms are so important in the world of HTML, CSS and Javascript that I decided to give them a special course to focus in all the inputs, buttons and elements that HTML brings by default to focus on interaction. During these exercises you will learn:
+Forms are so important in the world of HTML, CSS and JavaScript that I decided to give them a special course to focus in all the inputs, buttons and elements that HTML brings by default to focus on interaction. During these exercises you will learn:
 
 1. Using text inputs, text areas, date inputs and numeric inputs.
 
@@ -24,19 +24,18 @@ Forms are so important in the world of HTML, CSS and Javascript that I decided t
 
 4. GET vs POST.
 
-5. Styling a form
+5. Styling a form.
 
 <!-- hide -->
 #### Before we start... other related tutorials
+
 <ol>
   <li><a href="https://github.com/4GeeksAcademy/html-tutorial-exercises-course">Learn HTML</a></li>
-    <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a>← your are here now</li>
+    <li><a href="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises">Learn HTML5 Forms</a>← 🔥 You are here now</li>
   <li><a href="https://github.com/4GeeksAcademy/css-tutorial-exercises-course">Learn CSS</a></li>
+  <li><a href="https://github.com/4GeeksAcademy/css-layouts-tutorial-exercises">Learn CSS Layouts</a></li>
   <li><a href="https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial">Learn Bootstrap</a></li>
 </ol>
-<p align="center">
-  <img src="https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/.learn/assets/animation.gif?raw=true">
-</p>
 
 ## One click installation (recommended):
 
@@ -48,39 +47,39 @@ You can open these exercises in just a few seconds by clicking: [Open in Codespa
 
 Clone the 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+:
+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
 $ learnpack plugins:install learnpack-html
 ```
 
-2. Download this particular exercises using learnpack and `cd` into the folder:
+2. Download these particular exercises using LearnPack and `cd` into the folder:
 
-```
+```bash
 $ learnpack download html-forms-tutorial-exercises
 $ cd html-forms-tutorial-exercises
 ```
 
-> Note: Once you finish downloading, you will find a "exercises" folder that contains all the exercises within.
+> Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within.
 
-3. Start the tutorial/exercises by running the following command at the same level were your bc.json file is:
+3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is:
 
-```sh
+```bash
 $ npm i [email protected] -g
 $ learnpack start
 ```
 <!-- endhide -->
 
-## How are the React Tutorial Exercises organized?
+## How are the exercises organized?
 
-Each exercise is a small react application containing the following files:
+Each exercise is a small React application containing the following files:
 
 1. **index.js:** represents the entry file for the entire exercise.
 2. **README.md:** contains exercise instructions.
 3. **test.js:** you don't have to open this file, it contains the testing script for the exercise.
 
-> Note: The exercises have automatic grading, but it's very rigid and string, my recommendation is to ignore the tests and use them only as a recommendation, or you can get frustrated :(
+> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated.
 
 ## Contributors
 
@@ -91,4 +90,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-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.