diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
index 6d8878d4a..7a30cf0ac 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
@@ -1,5 +1,5 @@
-As we can see from HTML/CSS, the slider is a `<div>` with a colored background, that contains a runner -- another `<div>` with `position:relative`.
+Como podemos ver en el HTML/CSS, la barra de desplazamiento es un `<div>` con un fondo de color, que contiene un pasador: otro `<div>` con `position:relative`.
 
-To position the runner we use `position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`.
+Para posicionar el pasador usamos `position:relative`, para proveer las coordenadas relativas a su padre, aquí es más conveniente que `position:absolute`.
 
-Then we implement horizontal-only Drag'n'Drop with limitation by width.
+En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
index 0c6da4e2c..8f914be93 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Slider
+# Control deslizante
 
-Create a slider:
+Crea un control deslizante:
 
 [iframe src="solution" height=60 border=1]
 
-Drag the blue thumb with the mouse and move it.
+Arrastra el pasador azul con el ratón y muévelo.
 
-Important details:
+Detalles importantes:
 
-- When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
-- If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
+- Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
+- Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
index 62cbdb9c5..1c87698da 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
@@ -1,5 +1,5 @@
-To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute` to lay the element into the document.
+Para arrastrar el elemento podemos usar `position:fixed`, esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a `position:absolute` para fijar el elemento en el documento.
 
-When coordinates are at window top/bottom, we use `window.scrollTo` to scroll it.
+Cuando las coordinadas están en el tope/fondo de la ventana, usamos `window.scrollTo` para desplazarla.
 
-More details in the code, in comments.
+Más detalles en el código, en los comentarios.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
index 91fbaa0f2..b3008f79d 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Drag superheroes around the field
+# Arrastrar super héroes por el campo
 
-This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
+Esta tarea te puede ayudar a comprobar tu entendimiento de varios aspectos de Arrastrar y Soltar, y del DOM.
 
-Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
+Hacer que todos los elementos con clase `draggable` sean arrastrables. Como la pelota de este capítulo.
 
-Requirements:
+Requerimientos:
 
-- Use event delegation to track drag start: a single event handler on `document` for `mousedown`.
-- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
-- There is no horizontal scroll (this makes the task a bit simpler, adding it is easy).
-- Draggable elements or their parts should never leave the window, even after swift mouse moves.
+- Usa delegación de eventos para detectar el inicio del arrastrado: un solo manejador de eventos en el `document` para `mousedown`.
+- Si los elementos son arrastrados a los bordes superior/inferior de la ventana: la página se desliza hacia arriba/abajo para permitir dicho arrastre.
+- Sin desplazamiento horizontal (esto hace la tarea un poco más simple, añadirlo es fácil).
+- Los elementos arrastrables o sus partes nunca deben dejar la ventana, incluso después de movimientos rápidos del ratón.
 
-The demo is too big to fit it here, so here's the link.
+La demostración es demasiado grande para caber aquí, así que aquí está el enlace.
 
 [demo src="solution"]
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
index 80fad3850..7cd78466f 100644
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
@@ -1,4 +1,4 @@
-The solution, step by step:
+La solución, paso a paso:
 
 ```html run
 <select id="genres">
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
index a0e74da57..3b2e031c8 100644
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Add an option to select
+# Añade una opción al select
 
-There's a `<select>`:
+Tenemos un `<select>`:
 
 ```html
 <select id="genres">
@@ -13,10 +13,10 @@ There's a `<select>`:
 </select>
 ```
 
-Use JavaScript to:
+Utiliza JavaScript para:
 
-1. Show the value and the text of the selected option.
-2. Add an option: `<option value="classic">Classic</option>`.
-3. Make it selected.
+1. Mosrar el valor y el texto del option seleccionado.
+2. Añadir un option: `<option value="classic">Classic</option>`.
+3. Seleccionarlo.
 
-Note, if you've done everything right, your alert should show `blues`.
+Nota, si haz hecho todo bien, tu alert debería mostrar `blues`.
diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
index 1c6188b5b..a6ce5056d 100644
--- a/2-ui/4-forms-controls/1-form-elements/article.md
+++ b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -1,23 +1,23 @@
-# Form properties and methods
+# Propiedades y Métodos de Formularios
 
-Forms and control elements, such as `<input>` have a lot of special properties and events.
+Los formularios y controles, como `<input>`, tienen muchos eventos y propiedades especiales.
 
-Working with forms will be much more convenient when we learn them.
+Trabajar con formularios será mucho más conveniente cuando los aprendamos.
 
-## Navigation: form and elements
+## Navegación: Formularios y elementos
 
-Document forms are members of the special collection `document.forms`.
+Los formularios del documento son miembros de la colección especial `document.forms`.
 
-That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form.
+Esa es la llamada "Colección nombrada": es ambas cosas, nombrada y ordenada. Podemos usar el nombre o el número  en el documento para conseguir el formulario.
 
 ```js no-beautify
-document.forms.my - the form with name="my"
-document.forms[0] - the first form in the document
+document.forms.my - el formulario con name="my"
+document.forms[0] - el primar formulario en el documento
 ```
 
-When we have a form, then any element is available in the named collection `form.elements`.
+Cuando tenemos un formulario, cualquier elemento se encuentra disponible en la colección nombrada `form.elements`.
 
-For instance:
+Por ejemplo:
 
 ```html run height=40
 <form name="my">
@@ -26,19 +26,19 @@ For instance:
 </form>
 
 <script>
-  // get the form
-  let form = document.forms.my; // <form name="my"> element
+  // obtención del formulario
+  let form = document.forms.my; // elemento <form name="my">
 
   // get the element
-  let elem = form.elements.one; // <input name="one"> element
+  let elem = form.elements.one; // elemento <input name="one">
 
   alert(elem.value); // 1
 </script>
 ```
 
-There may be multiple elements with the same name, that's often the case with radio buttons.
+Puede haber múltiples elementos con el mismo nombre, tal es el caso de los controles tipo radio.
 
-In that case `form.elements[name]` is a collection, for instance:
+En ese caso `form.elements[name]` es una colección, por ejemplo:
 
 ```html run height=40
 <form>
@@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement]
 </script>
 ```
 
-These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`.
+Estas propiedades de navegación no dependen de la estructura de las etiquetas. Todos los controles, sin importar qué tan profundos se encuentren en el formulario, están disponibles en `form.elements`.
 
 
-````smart header="Fieldsets as \"subforms\""
-A form may have one or many `<fieldset>` elements inside it. They also have `elements` property that lists form controls inside them.
+````smart header="Fieldsets como \"sub-formularios\""
+Un formulario puede tener uno o varios elementos `<fieldset>` dentro. Estos también tienen la propiedad `elements` que enlista los controles del formulario dentro de ellos.
 
-For instance:
+Por ejemplo:
 
 ```html run height=80
 <body>
@@ -81,7 +81,7 @@ For instance:
     let fieldset = form.elements.userFields;
     alert(fieldset); // HTMLFieldSetElement
 
-    // we can get the input by name both from the form and from the fieldset
+    // podemos obtener el input por su nombre tanto desde el formulario como desde el fieldset
     alert(fieldset.elements.login == form.elements.login); // true
 */!*
   </script>
@@ -89,14 +89,14 @@ For instance:
 ```
 ````
 
-````warn header="Shorter notation: `form.name`"
-There's a shorter notation: we can access the element as `form[index/name]`.
+````warn header="Notación corta: `form.name`"
+Hay una notación corta: podemos acceder el elemento como `form[index/name]`.
 
-In other words, instead of `form.elements.login` we can write `form.login`.
+En otras palabras, en lugar de `form.elements.login` podemos escribir `form.login`.
 
-That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one).
+Esto también funciona, pero tiene un error menor: si accedemos un elemento, y cambiamos su `name`, se mantendrá disponible mediante el nombre anterior (así como mediante el nuevo).
 
-That's easy to see in an example:
+Esto es fácil de ver en un ejemplo:
 
 ```html run height=40
 <form id="form">
@@ -104,34 +104,34 @@ That's easy to see in an example:
 </form>
 
 <script>
-  alert(form.elements.login == form.login); // true, the same <input>
+  alert(form.elements.login == form.login); // true, el mismo <input>
 
-  form.login.name = "username"; // change the name of the input
+  form.login.name = "username"; // cambiamos el nombre el <input>
 
-  // form.elements updated the name:
+  // form.elements actualiza el nombre:
   alert(form.elements.login); // undefined
   alert(form.elements.username); // input
 
 *!*
-  // form allows both names: the new one and the old one
+  // form permite ambos nombres: el nuevo y el viejo
   alert(form.username == form.login); // true
 */!*
 </script>
 ```
 
-That's usually not a problem, because we rarely change names of form elements.
+Esto usualmente no es un problema, porque raramente se cambian los nombres de los elementos de un formulario.
 
 ````
 
-## Backreference: element.form
+## Referencia inversa: element.form
 
-For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form.
+Para cualquier elemento, el formulario está disponible como `element.form`. Así que un formulario referencia todos los elementos, y los elementos referencian el formulario.
 
-Here's the picture:
+Aquí la imagen:
 
 ![](form-navigation.svg)
 
-For instance:
+Por ejemplo:
 
 ```html run height=40
 <form id="form">
@@ -149,46 +149,46 @@ For instance:
 </script>
 ```
 
-## Form elements
+## Elementos del formulario
 
-Let's talk about form controls.
+Hablemos de los controles de los formularios.
 
-### input and textarea
+### input y textarea
 
-We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes.
+Podemos acceder sus valores como `input.value` (cadena) o `input.checked` (booleano) para casillas de verificación (checkboxes).
 
-Like this:
+De esta manera:
 
 ```js
 input.value = "New value";
 textarea.value = "New text";
 
-input.checked = true; // for a checkbox or radio button
+input.checked = true; // para checkboxes o radios
 ```
 
-```warn header="Use `textarea.value`, not `textarea.innerHTML`"
-Please note that even though `<textarea>...</textarea>` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it.
+```warn header="Usa `textarea.value`, no `textarea.innerHTML`"
+Observa que incluso aunque `<textarea>...</textarea>` contenga su valor como HTML anidado, nunca deberíamos usar `textarea.innerHTML` para acceder a él.
 
-It stores only the HTML that was initially on the page, not the current value.
+Esto solo guarda el HTML que había inicialmente en la página, no su valor actual.
 ```
 
-### select and option
+### select y option
 
-A `<select>` element has 3 important properties:
+Un elemento `<select>` tiene 3 propiedades importantes:
 
-1. `select.options` -- the collection of `<option>` subelements,
-2. `select.value` -- the value of the currently selected `<option>`,
-3. `select.selectedIndex` -- the number of the currently selected `<option>`.
+1. `select.options` -- la colección de subelementos `<option>`,
+2. `select.value` -- el valor del `<option>` seleccionado actualmente, y
+3. `select.selectedIndex` -- el número del `<option>` seleccionado actualmente.
 
-They provide three different ways of setting a value for a `<select>`:
+Ellas proveen tres formas diferentes de asignar un valor para un elemento `<select>`:
 
-1. Find the corresponding `<option>` element and set `option.selected` to `true`.
-2. Set `select.value` to the value.
-3. Set `select.selectedIndex` to the number of the option.
+1. Encontrar el elemento `<option>` correspondiente y asignarle a `option.selected` un `true`.
+2. Asignar el valor a `select.value`.
+3. Asignar el número de la opción a `select.selectedIndex`.
 
-The first way is the most obvious, but `(2)` and `(3)` are usually more convenient.
+La primera forma es la más obvia, pero `(2)` y `(3)` usualmente son más convenientes.
 
-Here is an example:
+Aquí hay un ejemplo:
 
 ```html run
 <select id="select">
@@ -198,18 +198,18 @@ Here is an example:
 </select>
 
 <script>
-  // all three lines do the same thing
+  // las tres líneas hacen lo mismo
   select.options[2].selected = true;
   select.selectedIndex = 2;
   select.value = 'banana';
 </script>
 ```
 
-Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. Although such functionality is available, it is rarely used. 
+A diferencia de la mayoría de controles, `<select>` permite seleccionar multiples opciones a la vez si tiene el atributo `multiple`. Esta característica es raramente utilizada. 
 
-In cases that you have to, then use the first way: add/remove the `selected` property from `<option>` subelements.
+En ese caso, necesitamos usar la primera forma: Añade/elimina la propiedad `selected` de los subelementos `<option>`.
 
-We can get their collection as `select.options`, for instance:
+Podemos obtener su colección como `select.options`, por ejemplo:
 
 ```html run
 <select id="select" *!*multiple*/!*>
@@ -219,7 +219,7 @@ We can get their collection as `select.options`, for instance:
 </select>
 
 <script>
-  // get all selected values from multi-select
+  // obtener todos los valores seleccionados del multi-select
   let selected = Array.from(select.options)
     .filter(option => option.selected)
     .map(option => option.value);
@@ -228,72 +228,72 @@ We can get their collection as `select.options`, for instance:
 </script>
 ```
 
-The full specification of the `<select>` element is available in the specification <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
+La especificación completa del elemento `<select>` está disponible en la especificación <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
 
 ### new Option
 
-This is rarely used on its own. But there's still an interesting thing.
+Esto es raramente utilizado como tal. Pero sigue siendo algo interesante.
 
-In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
+En la [especificación](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) hay una sintaxis muy corta para crear elementos `<option>`:
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
 ```
 
-Parameters:
+Parámetros:
 
-- `text` -- the text inside the option,
-- `value` -- the option value,
-- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
-- `selected` -- if `true`, then the option is selected.
+- `text` -- el texto dentro del option,
+- `value` -- el valor del option,
+- `defaultSelected` -- si es `true`, entonces se le crea el atributo HTML `selected`,
+- `selected` -- si es `true`, el option se selecciona.
 
-There may be a small confusion about `defaultSelected` and `selected`. That's simple: `defaultSelected` sets HTML-attribute, that we can get using `option.getAttribute('selected')`. And `selected` - whether the option is selected or not, that's more important. Usually both values are either set to `true` or not set (same as `false`).
+Puede haber una pequeña confusión con `defaultSelected` y `selected`. Es simple: `defaultSelected` asigna el atributo HTML, el que podemos obtener usando `option.getAttribute('selected')`. Y `selected` - hace que el option esté o no seleccionado, este es más importante. Usualmente ambos valores son igualmente asignados como `true` o no asignados (igual a `false`).
 
-For instance:
+Por ejemplo:
 
 ```js
 let option = new Option("Text", "value");
-// creates <option value="value">Text</option>
+// crea <option value="value">Text</option>
 ```
 
-The same element selected:
+El mismo elemento seleccionado:
 
 ```js
 let option = new Option("Text", "value", true, true);
 ```
 
-Option elements have properties:
+Los elementos Option tienen propiedades:
 
 `option.selected`
-: Is the option selected.
+: Es el option seleccionado.
 
 `option.index`
-: The number of the option among the others in its `<select>`.
+: El número del option respecto a los demás en su `<select>`.
 
 `option.text`
-: Text content of the option (seen by the visitor).
+: El contenido del option (visto por el visitante).
 
-## References
+## Referencias
 
-- Specification: <https://html.spec.whatwg.org/multipage/forms.html>.
+- Especificación: <https://html.spec.whatwg.org/multipage/forms.html>.
 
-## Summary
+## Resumen
 
-Form navigation:
+Navegación de formularios:
 
 `document.forms`
-: A form is available as `document.forms[name/index]`.
+: Un formulario está disponible como `document.forms[name/index]`.
 
-`form.elements`  
-: Form elements are available as `form.elements[name/index]`, or can use just `form[name/index]`. The `elements` property also works for `<fieldset>`.
+`form.elements`
+: Los elementos del formulario están disponibles como `form.elements[name/index]`, o puedes usar solo `form[name/index]`. La propiedad `elements` también funciona para los `<fieldset>`.
 
 `element.form`
-: Elements reference their form in the `form` property.
+: Los elementos referencian a su formulario en la propiedad `form`.
 
-Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
+El valor está disponible con `input.value`, `textarea.value`, `select.value` etc, o `input.checked` para checkboxes y radios.
 
-For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`.
+Para `<select>` también podemos obtener el valor con el índice `select.selectedIndex` o a través de la colección de opciones `select.options`.
 
-These are the basics to start working with forms. We'll meet many examples further in the tutorial.
+Esto es lo básico para empezar a trabajar con formularios. Conoceremos muchos ejemplos más adelante en el tutorial.
 
-In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.
+En el siguiente capítulo vamos a hablar sobre los eventos `focus` y `blur` que pueden ocurrir en cualquier elemento, pero son manejados mayormente en formularios.