diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
index a38f01645..5da6e2b5a 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md
@@ -1,8 +1,7 @@
-Answer: **1 and 3**.
+Risposta: **1 e 3**.
 
-Both commands result in adding the `text` "as text" into the `elem`.
-
-Here's an example:
+Entrambi i commandi risultano nell'aggiunta di `text` "come testo" dentro a `elem`.
+Ecco un esempio:
 
 ```html run height=80
 <div id="elem1"></div>
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
index 40c75dff3..b7c230831 100644
--- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
+++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md
@@ -4,9 +4,9 @@ importance: 5
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+Abbiamo `elem`, un elemento DOM vuoto, e una stringa`text`.
 
-Which of these 3 commands will do exactly the same?
+Quali di questi 3 comandi fanno esattamente la stessa cosa?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
index 1414e90c1..078bb1219 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md
@@ -52,6 +52,6 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+Nota che la chiamata a `update()` non è programmata solo in `clockStart()`, ma immediatamente dopo l'esecuzione della linea `(*)`. Altrimenti il visitatore dovrebbe aspettare fino alla prima esecuzione di `setInterval`. E l'orologio sarebbe vuoto fino ad allora. 
 
-Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`.
+E' altresì importante impostare il nuovo intervallo in `clockStart()` solo quando l'orologio non sta andando. Altrimenti cliccare il bottone start svariate volte imposterebbe multipli intervali concorrenti. Ancora peggio: terremmo solo il `timerID` dell'ultimo intervallo, perdendo la referenza a tutti gli altri. Così non potremmo più fermare l'orologio! Nota che dobbiamo rimuovere il `timerID` quando l'orologio viene fermato alla linea `(**)`, in modo da permettergi di ricominciare eseguendo `clockStart()`.
\ No newline at end of file
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
index de8ec9aee..20dae4652 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html
@@ -43,26 +43,26 @@
     }
 
     function clockStart() {
-      // set a new interval only if the clock is stopped
-      // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
+      // imposta un nuovo intervallo solo se l'orologio è fermo
+      // altrimenti dovremmo riscrivere la referenza di timerID all'intervallo in esecuzione e non potremmo più fermare l'orologio
       if (!timerId) { 
         timerId = setInterval(update, 1000);
       }
-      update(); // <--  start right now, don't wait 1 second till the first setInterval works
+      update(); // <--  comincia subito, non aspettare un secondo affinché il primo setInterval funzioni
     }
 
     function clockStop() {
       clearInterval(timerId);
-      timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
+      timerId = null; // <-- rimuovi timerID per indicare che l'orologio è stato fermato, in modo da poterlo far ripartire in clockStart()
     }
 
     clockStart();
   </script>
 
-  <!-- click on this button calls clockStart() -->
+  <!-- cliccare questo bottone chiama clockStart() -->
   <input type="button" onclick="clockStart()" value="Start">
 
-  <!-- click on this button calls clockStop() -->
+  <!-- cliccare questo bottone chiama clockStop() -->
   <input type="button" onclick="clockStop()" value="Stop">
 
 </body>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
index ecf5df99a..4dfa81159 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html
@@ -2,10 +2,10 @@
 <html>
 <body>
 
-  <!-- click on this button calls clockStart() -->
+  <!-- cliccare questo bottone chiama clockStart() -->
   <input type="button" onclick="clockStart()" value="Start">
 
-  <!-- click on this button calls clockStop() -->
+  <!-- cliccare questo bottone chiama clockStop() -->
   <input type="button" onclick="clockStop()" value="Stop">
 
 </body>
diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
index a1b53e337..763b564b1 100644
--- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
+++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md
@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# Orologio colorato con setInterval
 
-Create a colored clock like here:
+Crea un orologio colorato come quello dell'esempio:
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Usa HTML/CSS per lo styling, JavaScript aggiorna solo il tempo negli elementi.
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
index 4e77fb5cb..8c1cb147d 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md
@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+Quando abbiamo bisogno di inserire dell'HTML da qualche parte, `insertAdjacentHTML` è la scelta migliore
   
-The solution:
+La soluzione:
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
index 543cd3e46..6054a04e8 100644
--- a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
+++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# Inserisci l'HTML nella lista
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Scrivi il codice per inserire `<li>2</li><li>3</li>` tra i due `<li>` sotto:
 
 ```html
 <ul id="ul">
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
index 49243e8e3..d71571e31 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+La soluzione è breve, ma potrebbe sembrare difficile, quindi la commenteremo in dettaglio:
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
@@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+L'algoritmo passo per passo:
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Trova tutti i `<tr>` dentro `<tbody>`. 
+2. Ordinali comparando il contenuto del primo `<td>` (il campo con il nome).
+3. Ora inserisci i nodi nel giusto ordine con `.append(...sortedRows)`.
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+Non dobbiamo rimuovere gli elementi della fila, solo "re-inserirli", lasciano automaticamente il vecchio posto.
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+P.S. Nel nostro caso c'è un esplicito `<tbody>` nella tabella; ma se anche non vi fosse, la struttura DOM lo include sempre e comunque. 
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
index 9071c88ee..6733eb041 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html
@@ -23,5 +23,5 @@
 </table>
 
 <script>
-  // ... your code ...
+  // ... il tuo codice ...
 </script>
diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
index 7cdba35bc..80be26499 100644
--- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md
+++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Sort the table
+# Ordina la tabella
 
-There's a table:
+Ecco una tabella:
 
 ```html run
 <table>
@@ -30,6 +30,6 @@ There's a table:
 </table>
 ```
 
-There may be more rows in it.
+Potrebbero esserci più file dentro.
 
-Write the code to sort it by the `"name"` column.
+Scrivi il codice per ordinarla in base alla colonna `"name"`.
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
index 62c3386d8..613a99e2e 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md
@@ -1,5 +1,5 @@
 
-First, let's see how *not* to do it:
+Prima, vediamo come *non* farlo:
 
 ```js
 function clear(elem) {
@@ -9,11 +9,11 @@ function clear(elem) {
 }
 ```
 
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+Questo non funziona perché la chiamata a `remove()` muove la collezione `elem.childNodes`, quindi gli elementi partono ogni volta dall'indice `0`. Ma `i` aumenta, perciò alcuni elementi verranno saltati.
 
-The `for..of` loop also does the same.
+Il loop `for..of` fa lo stesso.
 
-The right variant could be:
+La corretta variante potrebbe essere:
 
 ```js
 function clear(elem) {
@@ -23,7 +23,7 @@ function clear(elem) {
 }
 ```
 
-And also there's a simpler way to do the same:
+C'è un modo più semplice per fare lo stesso:
 
 ```js
 function clear(elem) {
diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
index 938d53470..7eeb4a199 100644
--- a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
+++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Clear the element
+# Ripulisci l'elemento
 
-Create a function `clear(elem)` that removes everything from the element.
+Crea una funzione `clear(elem)` che rimuova tutto da un elemento.
 
 ```html run height=60
 <ol id="elem">
@@ -13,8 +13,8 @@ Create a function `clear(elem)` that removes everything from the element.
 </ol>
 
 <script>
-  function clear(elem) { /* your code */ }
+  function clear(elem) { /* il tuo codice */ }
 
-  clear(elem); // clears the list
+  clear(elem); // Ripulisce la lista
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
index 3d1f6698f..02e6740fc 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md
@@ -1,9 +1,9 @@
-The HTML in the task is incorrect. That's the reason of the odd thing.
+L'HTML nel task è incorretto. Questa è la ragione della stranezza.
 
-The browser has to fix it automatically. But there may be no text inside the `<table>`: according to the spec only table-specific tags are allowed. So the browser shows `"aaa"` *before* the `<table>`.
+Il browser deve sistemarlo automaticamente. Ma non vi può essere testo dentro a `<table>`: secondo la specifica, solo gli specifici tag per le tabelle sono permessi. Perciò il browser aggiunge `"aaa"` *prima* di `<table>`.
 
-Now it's obvious that when we remove the table, it remains.
+Ora è ovvio perché, rimuovendo la tabella, il testo rimane.
 
-The question can be easily answered by exploring the DOM using the browser tools. You'll see `"aaa"` before the `<table>`.
+La domanda può facilmente trovare risposta esplorando il DOM con gli strumenti del browser. Mostra `"aaa"` prima di `<table>`.
 
-The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.
+Lo standard HTML specifica in dettaglio come processare cattivo HTML, e questo comportamento del browser è corretto. 
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
index f87074dba..365a8ae47 100644
--- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
+++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -2,13 +2,13 @@ importance: 1
 
 ---
 
-# Why does "aaa" remain?
+# Perché rimane "aaa"?
 
-In the example below, the call `table.remove()` removes the table from the document.
+Nell'esempio sotto, la chiamata a `table.remove()` rimuove la tabella dal documento.
 
-But if you run it, you can see that the text `"aaa"` is still visible.
+Ma se eseguiamo il codice, potrai vedere che il testo `"aaa"` è ancora visibile. 
 
-Why does that happen?
+Perché?
 
 ```html height=100 run
 <table id="table">
@@ -19,9 +19,9 @@ Why does that happen?
 </table>
 
 <script>
-  alert(table); // the table, as it should be
+  alert(table); // la tabella, come dovrebbe essere
 
   table.remove();
-  // why there's still aaa in the document?
+  // perché aaa è ancora nel documento?
 </script>
 ```
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
index 1669be18f..05b45b7d2 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md
@@ -1 +1 @@
-Please note the usage of `textContent` to assign the `<li>` content.
+Nota l'utilizzo di `textContent` per assegnare il contenuto a `<li>`.
diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md
index a57e7e2d9..d72965f83 100644
--- a/2-ui/1-document/07-modifying-document/6-create-list/task.md
+++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md
@@ -2,18 +2,18 @@ importance: 4
 
 ---
 
-# Create a list
+# Crea una lista
 
-Write an interface to create a list from user input.
+Scrivi un'interfaccia per creare una lista dagli input dell'utente.
 
-For every list item:
+Per ogni elemento della lista:
 
-1. Ask a user about its content using `prompt`.
-2. Create the `<li>` with it and add it to `<ul>`.
-3. Continue until the user cancels the input (by pressing `key:Esc` or via an empty entry).
+1. Chiedi all'utente il contenuto utilizzando  `prompt`.
+2. Crea il `<li>` con il contenuto e aggiungilo a `<ul>`.
+3. Continua fino a quando l'utente non interrompe l'input (premendo `key:Esc` o inserendo un contenuto vuoto)
 
-All elements should be created dynamically.
+Tutti gli elementi devono essere creati dinamicamente.
 
-If a user types HTML-tags, they should be treated like a text.
+Se l'utente inserisce tag HTML, questi devono essere trattati come testo.
 
 [demo src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
index 06d9c01b1..16da46111 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -28,8 +28,8 @@
     }
 
     function createTreeDom(obj) {
-      // if there's no children, then the call returns undefined
-      // and the <ul> won't be created
+      // se non ci sono figli, la chiamata ritorna undefined
+      // e <ul> non verrà creato
       if (!Object.keys(obj).length) return;
 
       let ul = document.createElement('ul');
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
index 0f5f6b037..e4c89b6df 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -27,7 +27,7 @@
       container.innerHTML = createTreeText(obj);
     }
 
-    function createTreeText(obj) { // standalone recursive function
+    function createTreeText(obj) { // funzione ricorsiva
       let li = '';
       let ul;
       for (let key in obj) {
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
index d29636ee2..f792a593c 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md
@@ -1,4 +1,4 @@
-The easiest way to walk the object is to use recursion.
+Il modo più semplice per percorrere l'oggetto è utilizzando la ricorsione.
 
-1. [The solution with innerHTML](sandbox:innerhtml).
-2. [The solution with DOM](sandbox:build-tree-dom).
+1. [La soluzione con innerHTML](sandbox:innerhtml).
+2. [La soluzione con DOM](sandbox:build-tree-dom).
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
index 8586f6b24..e980b0e2b 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
@@ -58,7 +58,7 @@
     };
 
     function createTree(container, data) {
-      /* your code */
+      /* il tuo codice */
     }
 
     createTree(document.getElementById('tree'), data);
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
index 5ec1a01bc..a7da21e3c 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Create a tree from the object
+# Crea un albero da un oggetto
 
-Write a function `createTree` that creates a nested `ul/li` list from the nested object.
+Scrivi una funzione `createTree` che crea una lista `ul/li` annidata partendo dall'oggetto annidato.
 
-For instance:
+Ad esempio:
 
 ```js
 let data = {
@@ -28,7 +28,7 @@ let data = {
 };
 ```
 
-The syntax:
+La sintassi:
 
 ```js
 let container = document.getElementById('container');
@@ -37,15 +37,15 @@ createTree(container, data); // creates the tree in the container
 */!*
 ```
 
-The result (tree) should look like this:
+Il risultato (l'albero) dovrebbe somigliare a questo:
 
 [iframe border=1 src="build-tree-dom"]
 
-Choose one of two ways of solving this task:
+Scegli uno dei due metodi per risolvere la task:
 
-1. Create the HTML for the tree and then assign to `container.innerHTML`.
-2. Create tree nodes and append with DOM methods.
+1. Crea l'HTML per l'albero e assegnala a `container.innerHTML`.
+2. Crea i nodi dell'albero e appendili utilizzando i metodi del DOM.
 
-Would be great if you could do both.
+Sarebbe grandioso se riuscissi con entrambi.
 
-P.S. The tree should not have "extra" elements like empty `<ul></ul>` for the leaves.
+P.S. L'albero non dovrebbe avere elementi "extra" -ad esempio`<ul></ul>` vuoti- come foglie.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
index 43b9a362c..75b8d8845 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md
@@ -1 +1 @@
-To append text to each `<li>` we can alter the text node `data`.
+Per appendere testo a ogni `<li>` possiamo modificare il nodo di testo `data`.
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
index ec44bfda1..c9d40f318 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -43,11 +43,11 @@
     let lis = document.getElementsByTagName('li');
 
     for (let li of lis) {
-      // get the count of all <li> below this <li>
+      // il conto di tutti i <li> sotto l'attuale <li>
       let descendantsCount = li.getElementsByTagName('li').length;
       if (!descendantsCount) continue;
 
-      // add directly to the text node (append to the text)
+      // aggiungi direttamente al nodo di testo (appendi al testo)
       li.firstChild.data += ' [' + descendantsCount + ']';
     }
   </script>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
index 542bd9376..eeaa8f6a9 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html
@@ -40,7 +40,7 @@
   </ul>
 
   <script>
-    // ... your code ...
+    // ... il tuo codice ...
   </script>
 
 </body>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
index d6343bf3b..a0e1672de 100644
--- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md
+++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Show descendants in a tree
+# Mostra i discendenti dentro a un albero
 
-There's a tree organized as nested `ul/li`.
+C'è un albero organizzato come `ul/li` annidati.
 
-Write the code that adds to each `<li>` the number of its descendants. Skip leaves (nodes without children).
+Scrivi il codice che aggiunge a ogni `<li>` il numero dei suoi discendenti. Salta le foglie (i nodi senza figli).
 
-The result:
+Il risultato:
 
 [iframe border=1 src="solution"]
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
index de8be56e9..2d54d5f13 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md
@@ -1,9 +1,9 @@
-We'll create the table as a string: `"<table>...</table>"`, and then assign it to  `innerHTML`.
+Creeremo una tabella come stringa, `"<table>...</table>"`, e poi la assegneremo a `innerHTML`.
 
-The algorithm:
+L'algoritmo:
 
-1. Create the table header with `<th>` and weekday names.
-2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`).
-3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with `<td></td>`.
-4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `<td>` to the calendar. If that's a Sunday, then add a newline <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
-5. If the month has finished, but the table row is not yet full, add empty `<td>` into it, to make it square.
+1. Crea il header della tabella con `<th>` e i nomi dei giorni. 
+2. Crea l'oggetto data `d = new Date(year, month-1)`. Questo è il primo giorno di `month` (prendendo in considerazione che in Javascript i mesi partono da `0`, non da `1`).
+3. Le prime celle fino al primo del mese `d.getDay()` sono vuote. Riempiamole con `<td></td>`.
+4. Aumentiamo il giorno in `d`: `d.setDate(d.getDate()+1)`. Se `d.getMonth()` non è ancora il mese successivo, aggiungi la nuova cella `<td>` al calendario. Se questo è una domenica, aggiungi una nuova linea <code>"&lt;/tr&gt;&lt;tr&gt;"</code>.
+5. Se il mese è finito ma la fila della tabella non è ancora piena, aggiungi un `<td>` vuoto in modo da renderla rettangolare.
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
index 7e211abc6..6c8ca8160 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html
@@ -29,30 +29,30 @@
   <script>
     function createCalendar(elem, year, month) {
 
-      let mon = month - 1; // months in JS are 0..11, not 1..12
+      let mon = month - 1; // in JS i mesi sono 0..11, non 1..12
       let d = new Date(year, mon);
 
       let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th><th>TH</th><th>FR</th><th>SA</th><th>SU</th></tr><tr>';
 
-      // spaces for the first row
-      // from Monday till the first day of the month
+      // gli spazi per la prima fila
+      // da lunedì fino al primo giorno del mese
       // * * * 1  2  3  4
       for (let i = 0; i < getDay(d); i++) {
         table += '<td></td>';
       }
 
-      // <td> with actual dates
+      // <td> con le date
       while (d.getMonth() == mon) {
         table += '<td>' + d.getDate() + '</td>';
 
-        if (getDay(d) % 7 == 6) { // sunday, last day of week - newline
+        if (getDay(d) % 7 == 6) { // domenica, ultimo giorno della settimana - a capo
           table += '</tr><tr>';
         }
 
         d.setDate(d.getDate() + 1);
       }
 
-      // add spaces after last days of month for the last row
+      // aggiungi gli spazi per l'ultima fila dopo gli ultimi giorni della settimana
       // 29 30 31 * * * *
       if (getDay(d) != 0) {
         for (let i = getDay(d); i < 7; i++) {
@@ -60,15 +60,15 @@
         }
       }
 
-      // close the table
+      // Chiudi la tabella
       table += '</tr></table>';
 
       elem.innerHTML = table;
     }
 
-    function getDay(date) { // get day number from 0 (monday) to 6 (sunday)
+    function getDay(date) { // ottieni il giorno da 0 (lunedì) a 6 (domenica)
       let day = date.getDay();
-      if (day == 0) day = 7; // make Sunday (0) the last day
+      if (day == 0) day = 7; // rendi domenica (0) l'ultimo giorno
       return day - 1;
     }
 
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
index e1f4cd6bd..4f4e7f3f4 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html
@@ -28,7 +28,7 @@
 
   <script>
     function createCalendar(elem, year, month) {
-      // ...your code that generates the calndar in elem...
+      // ... il tuo codice per generare il calendario in elem...
     }
 
     createCalendar(calendar, 2012, 9);
diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
index 37b1a60d2..f2ce2210a 100644
--- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
+++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md
@@ -2,16 +2,15 @@ importance: 4
 
 ---
 
-# Create a calendar
+# Crea un calendario
+Scrivi una funzione `createCalendar(elem, year, month)`.
 
-Write a function `createCalendar(elem, year, month)`.
+La sua chiamata dovrebbe creare un calendario con il dato anno/mese e metterlo dentro a `elem`.
 
-The call should create a calendar for the given year/month and put it inside `elem`.
+Il calendario dovrebbe essere una tabella dove una settimana è `<tr>` e un giorno è `<td>`. La cima della tabella dovrebbe essere un `<th>` con i nomi dei giorni: il primo giorno dovrebbe essere lunedì e così via fino a domenica.
 
-The calendar should be a table, where a week is `<tr>`, and a day is `<td>`. The table top should be `<th>` with weekday names: the first day should be Monday, and so on till Sunday.
-
-For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar:
+Ad esempio, `createCalendar(cal, 2012, 9)` dovrebbe generare un elemento `cal` con il seguente calendario:
 
 [iframe height=210 src="solution"]
 
-P.S. For this task it's enough to generate the calendar, should not yet be clickable.
+P.S. Per questa task è sufficiente creare il calendario, non è necessario che sia cliccabile.
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 75ce1fbb0..529eeb56e 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -1,14 +1,14 @@
-# Modifying the document
+# Modificare il documento
 
-DOM modification is the key to creating "live" pages.
+La modifica del DOM è la chiave della creazione di pagine dinamiche.
 
-Here we'll see how to create new elements "on the fly" and modify the existing page content.
+Vedremo come creare elementi "al volo" e come modificare il contenuto della pagina già esistente.
 
-## Example: show a message
+## Esempio: mostrare un messaggio
 
-Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`.
+Dimostriamolo con un esempio. Aggiungeremo un messaggio alla pagina, più carino di `alert`.
 
-Here's how it will look:
+Sarà così:
 
 ```html autorun height="80"
 <style>
@@ -28,52 +28,52 @@ Here's how it will look:
 */!*
 ```
 
-That was the HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML/CSS already).
+Questo era l'esempio con HTML. Ora creiamo lo stesso `div` con JavaScript (presupponendo che lo stile sia già in HTML/CSS).
 
-## Creating an element
+## Creare un elemento
 
-To create DOM nodes, there are two methods:
+Per creare nodi DOM, ci sono due metodi:
 
 `document.createElement(tag)`
-: Creates a new *element node* with the given tag:
+: Crea un nuovo *nodo elemento* con il tag fornito:
 
     ```js
     let div = document.createElement('div');
     ```
 
 `document.createTextNode(text)`
-: Creates a new *text node* with the given text:
+  Crea un nuovo *nodo di testo* con il testo fornito:
 
     ```js
     let textNode = document.createTextNode('Here I am');
     ```
 
-Most of the time we need to create element nodes, such as the `div` for the message.
+Nella maggior parte dei casi abbiamo bisogno di creare un nodo elemento, come il `div` per il messaggio.
 
-### Creating the message
+### Creare un messaggio
 
-Creating the message div takes 3 steps:
+Creare un messaggio necessita di tre passaggi:
 
 ```js
-// 1. Create <div> element
+// 1. Creare l'elemento <div> 
 let div = document.createElement('div');
 
-// 2. Set its class to "alert"
+// 2. Impostare la sua classe ad "alert"
 div.className = "alert";
 
-// 3. Fill it with the content
+// 3. Riempirlo con il contenuto
 div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 ```
 
-We've created the element. But as of now it's only in a variable named `div`, not in the page yet. So we can't see it.
+Abbiamo creato l'elemento, ma al momento è solo una variabile chiamata `div`, non è ancora nella pagina, perciò non possiamo vederlo.
 
-## Insertion methods
+## I metodi d'inserimento
+   
+Per rendere visibile `div`, dobbiamo inserirlo da qualche parte nel `document`. Per esempio dentro all'elemento `body`, referenziato da `document.body`.
 
-To make the `div` show up, we need to insert it somewhere into `document`. For instance, into `<body>` element, referenced by `document.body`.
+C'è un metodo speciale per questo, `append`: `document.body.append(div)`.
 
-There's a special method `append` for that: `document.body.append(div)`.
-
-Here's the full code:
+Qui il codice completo:
 
 ```html run height="80"
 <style>
@@ -97,21 +97,21 @@ Here's the full code:
 </script>
 ```
 
-Here we called `append` on `document.body`, but we can call `append` method on any other element, to put another element into it. For instance, we can append something to `<div>` by calling `div.append(anotherElement)`.
+Qui abbiamo chiamato `append` su `document.body`, ma possiamo chiamare `append` su qualsiasi elemento e mettervi dentro un altro elemento. Ad esempio, possiamo appendere qualcosa a `div` chiamando `div.append(anotherElement)`.
 
-Here are more insertion methods, they specify different places where to insert:
+Ecco altri metodi d'inserimento; specificano i differenti posti dove inserire un elemento:
 
-- `node.append(...nodes or strings)` -- append nodes or strings *at the end* of `node`,
-- `node.prepend(...nodes or strings)` -- insert nodes or strings *at the beginning* of `node`,
-- `node.before(...nodes or strings)` –- insert nodes or strings *before* `node`,
-- `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`,
-- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
+- `node.append(...nodi o stringhe)` -- appende nodi o stringhe *alla fine* di `node`,
+- `node.prepend(...nodi o stringhe)` -- inserisce nodi o stringhe *all'inizio* di `node`,
+- `node.before(...nodi o stringhe)` –- inserisce nodi o stringhe *prima* di `node`,
+- `node.after(...nodi o stringhe)` –- inserisce nodi o stringhe *dopo* `node`,
+- `node.replaceWith(...nodi o stringhe)` –- rimpiazza `node` con i nodi o le stringhe passate.
 
-Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically).
+Gli argomenti di questi metodi sono liste arbitrarie di nodi DOM da inserire, o stringhe di testo (che diventano automaticamente nodi testo).
 
-Let's see them in action.
+Vediamoli in azione.
 
-Here's an example of using these methods to add items to a list and the text before/after it:
+Ecco un esempio dell'utilizzo di questi metodi per aggiungere elementi a una lista e del testo prima/dopo di essa:
 
 ```html autorun
 <ol id="ol">
@@ -121,24 +121,24 @@ Here's an example of using these methods to add items to a list and the text bef
 </ol>
 
 <script>
-  ol.before('before'); // insert string "before" before <ol>
-  ol.after('after'); // insert string "after" after <ol>
+  ol.before('before'); // inserisce la stringa "before" prima di <ol>
+  ol.after('after'); // inserisce la stringa "after" dopo <ol>
 
   let liFirst = document.createElement('li');
   liFirst.innerHTML = 'prepend';
-  ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
+  ol.prepend(liFirst); // inserisce liFirst all'inizio di <ol>
 
   let liLast = document.createElement('li');
   liLast.innerHTML = 'append';
-  ol.append(liLast); // insert liLast at the end of <ol>
+  ol.append(liLast); // inserisce liLast alla fine di <ol>
 </script>
 ```
 
-Here's a visual picture of what the methods do:
+Ecco uno schema visivo di cosa fanno questi metodi:
 
 ![](before-prepend-append-after.svg)
 
-So the final list will be:
+La lista finale sarà:
 
 ```html
 before
@@ -152,9 +152,9 @@ before
 after
 ```
 
-As said, these methods can insert multiple nodes and text pieces in a single call.
+Come già detto, questi metodi possono inserire nodi multipli e pezzi di testo in una singola chiamata.
 
-For instance, here a string and an element are inserted:
+Ad esempio, qui vengono inseriti una stringa e un elemento:
 
 ```html run
 <div id="div"></div>
@@ -163,9 +163,9 @@ For instance, here a string and an element are inserted:
 </script>
 ```
 
-Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`.
+Nota: il testo viene inserito "come testo", non "come HTML", con i dovuti escape per caratteri come `<` o `>`.
 
-So the final HTML is:
+Quindi l'HTML finale sarà:
 
 ```html run
 *!*
@@ -175,26 +175,27 @@ So the final HTML is:
 <div id="div"></div>
 ```
 
-In other words, strings are inserted in a safe way, like `elem.textContent` does it.
+In altre parole, le stringhe sono inserite in sicurezza, come con `elem.textContent`.
 
-So, these methods can only be used to insert DOM nodes or text pieces.
+Quindi, questi metodi possono essere usati solo per inserire nodi o pezzi di testo.
 
-But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it?
+E se volessimo inserire stringhe HTML "come HTML", con tutti i tag e le altre funzionalità, come con `elem.innerHTML`?
 
 ## insertAdjacentHTML/Text/Element
 
-For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
+Per questo abbiamo a disposizione un altro metodo, molto versatile: `elem.insertAdjacentHTML(where, html)`.
+
 
-The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
+Il primo parametro è una parola-codice che specifica dove inserire in relazione a `elem`. Deve essere una delle seguenti:
 
-- `"beforebegin"` -- insert `html` immediately before `elem`,
-- `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-- `"beforeend"` -- insert `html` into `elem`, at the end,
-- `"afterend"` -- insert `html` immediately after `elem`.
+- `"beforebegin"` -- inserisce `html` immediatamente prima di `elem`,
+- `"afterbegin"` -- inserisce `html` dentro `elem`, all'inizio,
+- `"beforeend"` -- inserisce `html` dentro `elem`, alla fine,
+- `"afterend"` -- inserisce `html` immediatamente dopo `elem`.
 
-The second parameter is an HTML string, that is inserted "as HTML".
+Il secondo parametro è una stringa HTML, che viene inserita "come HTML"
 
-For instance:
+Ad esempio:
 
 ```html run
 <div id="div"></div>
@@ -204,7 +205,7 @@ For instance:
 </script>
 ```
 
-...Would lead to:
+...Porterebbe a:
 
 ```html run
 <p>Hello</p>
@@ -212,22 +213,22 @@ For instance:
 <p>Bye</p>
 ```
 
-That's how we can append arbitrary HTML to the page.
+Così possiamo appendere HTML alla pagina.
 
-Here's the picture of insertion variants:
+Qui un'immagine delle varianti d'inserimento:
 
 ![](insert-adjacent.svg)
 
-We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.
+Possiamo facilmente notare similarità tra questa immagine e le precedenti. I punti di inserimento sono gli stessi, ma questo metodo inserisce HTML. 
 
-The method has two brothers:
+Il metodo ha due fratelli:
 
-- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML,
-- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element.
+- `elem.insertAdjacentText(where, text)` -- la stessa sintassi, ma una stringa `text` viene inserita "come testo" invece che come HTML,
+- `elem.insertAdjacentElement(where, elem)` -- la stessa sintassi, ma inserisce un elemento.
 
-They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces.
+Questi metodi esistono per rendere la sintassi "uniforme". Nella pratica, nella maggioranza dei casi solo `insertAdjacentHTML` viene utilizzato, perché per elementi e testo abbiamo i metodi `append/prepend/before/after`; questi sono più brevi da scrivere e possono inserire nodi/pezzi di testo.
 
-So here's an alternative variant of showing a message:
+Ecco un variante alternativa per mostrare un messaggio:
 
 ```html run
 <style>
@@ -247,11 +248,11 @@ So here's an alternative variant of showing a message:
 </script>
 ```
 
-## Node removal
+## Rimozione di nodi
 
-To remove a node, there's a method `node.remove()`.
+Per rimuovere un nodo, abbiamo a disposizione il metodo `node.remove()`.
 
-Let's make our message disappear after a second:
+Facciamo sparire il nostro messaggio dopo un secondo:
 
 ```html run untrusted
 <style>
@@ -276,32 +277,32 @@ Let's make our message disappear after a second:
 </script>
 ```
 
-Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
+Nota: se vogliamo *muovere* un elemento in un altro posto, non c'è bisogno di rimuoverlo dal vecchio. 
 
-**All insertion methods automatically remove the node from the old place.**
+**Tutti i metodi d'inserimento rimuovono automaticamente i nodi dal vecchio posto.**
 
-For instance, let's swap elements:
+Ad esempio, scambiamo degli elementi:
 
 ```html run height=50
 <div id="first">First</div>
 <div id="second">Second</div>
 <script>
-  // no need to call remove
-  second.after(first); // take #second and after it insert #first
+  // nessun bisogno di chiamare remove
+  second.after(first); // prende #second e inserisce #first dopo
 </script>
 ```
 
-## Cloning nodes: cloneNode
+## Clonare nodi: cloneNode
 
-How to insert one more similar message?
+Come inserire uno o più messaggi simili? 
 
-We could make a function and put the code there. But the alternative way would be to *clone* the existing `div` and modify the text inside it (if needed).
+Potremmo scrivere una funzione a mettervi dentro il codice. Ma l'alternativa sarebbe *clonare* il `div` esistente e modificare il testo dentro (se necessario).
 
-Sometimes when we have a big element, that may be faster and simpler.
+Qualche volta, quando abbiamo un grosso elemento, questo potrebbe rivelarsi più facile e veloce.
 
-- The call `elem.cloneNode(true)` creates a "deep" clone of the element -- with all attributes and subelements. If we call `elem.cloneNode(false)`, then the clone is made without child elements.
+La chiamata a `elem.cloneNode(true)` crea un clone "profondo" dell'elemento, con tutti gli attributi e i sub-elementi. Se chiamiamo `elem.cloneNode(false)`, l'elemento viene clonato senza i suoi elementi figlio.
 
-An example of copying the message:
+Un esempio copiando un messaggio:
 
 ```html run height="120"
 <style>
@@ -320,21 +321,21 @@ An example of copying the message:
 
 <script>
 *!*
-  let div2 = div.cloneNode(true); // clone the message
-  div2.querySelector('strong').innerHTML = 'Bye there!'; // change the clone
+  let div2 = div.cloneNode(true); // clona il messaggio
+  div2.querySelector('strong').innerHTML = 'Bye there!'; // modifica il clone
 
-  div.after(div2); // show the clone after the existing div
+  div.after(div2); // mostra il clone dopo il div esistente
 */!*
 </script>
 ```
 
 ## DocumentFragment [#document-fragment]
 
-`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
+`DocumentFragment` è uno speciale nodo DOM che serve come wrapper a liste di nodi.
 
-We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
+Possiamo appendervi altri nodi, ma quando viene inserito da qualche parte, viene sostituito con il suo contenuto. 
 
-For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+Nell'esempio sotto, `getListContent` genera un frammento con elementi `<li>`, che dopo vengono inseriti in `<ul>`.
 
 ```html run
 <ul id="ul"></ul>
@@ -358,8 +359,8 @@ ul.append(getListContent()); // (*)
 </script>
 ```
 
-Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
-
+Nota, nell'ultima riga `(*)` appendiamo `DocumentFragment`, ma questo viene
+"sciolto", e la risultante struttura sarà:
 ```html
 <ul>
   <li>1</li>
@@ -368,7 +369,7 @@ Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends
 </ul>
 ```
 
-`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+`DocumentFragment` è raramente utilizzato esplicitamente. Perché appendere elementi a un nodo speciale quando possiamo invece ritornare un array di nodi? Riscriviamo l'esempio:
 
 ```html run
 <ul id="ul"></ul>
@@ -392,22 +393,23 @@ ul.append(...getListContent()); // append + "..." operator = friends!
 </script>
 ```
 
-We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+Menzioniamo `DocumentFragment` principalmente perché vi sono alcuni concetti che vi si basano, come un elemento [template](info:template-element), che vedremo molto più avanti. 
 
-## Old-school insert/remove methods
+## Metodi vecchia scuola di inserimento/rimozione 
 
 [old]
 
-There are also "old school" DOM manipulation methods, existing for historical reasons.
+Vi sono dei metodi di manipolazione del DOM "vecchia scuola", che esistono per motivi storici. 
 
-These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
+Questi metodi vengono dai vecchi tempi. Oggi non c'è ragione per utilizzarli, giacché i metodi moderni come `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, sono più flessibili. 
 
-The only reason we list these methods here is that you can find them in many old scripts:
+L'unica ragione per cui li elenchiamo è che possiamo ancora trovarli in molti vecchi script:
 
 `parentElem.appendChild(node)`
-: Appends `node` as the last child of `parentElem`.
+: Appende `node` come ultimo figlio di `parentElem`.
+  
 
-    The following example adds a new `<li>` to the end of `<ol>`:
+    Il seguente esempio aggiunge un nuovo `<li>` alla fine di `<ol>`:
 
     ```html run height=100
     <ol id="list">
@@ -425,9 +427,9 @@ The only reason we list these methods here is that you can find them in many old
     ```
 
 `parentElem.insertBefore(node, nextSibling)`
-: Inserts `node` before `nextSibling` into `parentElem`.
+: Inserisce `node`, prima di `nextSibling`, dentro `parentElem`.
 
-    The following code inserts a new list item before the second `<li>`:
+    Il codice seguente inserisce una nuova lista di elementi prima del secondo `<li>`:
 
     ```html run height=100
     <ol id="list">
@@ -444,19 +446,19 @@ The only reason we list these methods here is that you can find them in many old
     */!*
     </script>
     ```
-    To insert `newLi` as the first element, we can do it like this:
+    Per inserire `newLi` come primo elemento, possiamo fare così:
 
     ```js
     list.insertBefore(newLi, list.firstChild);
     ```
 
 `parentElem.replaceChild(node, oldChild)`
-: Replaces `oldChild` with `node` among children of `parentElem`.
+: Rimpiazza `oldChild` con `node` tra i figli di `parentElem`.
 
 `parentElem.removeChild(node)`
-: Removes `node` from `parentElem` (assuming `node` is its child).
+: Rimuove `node` da `parentElem` (presupponendo che `node` sia suo figlio).
 
-    The following example removes first `<li>` from `<ol>`:
+    Il seguente esempio rimuove il primo `<li>` da `<ol>`:
 
     ```html run height=100
     <ol id="list">
@@ -471,13 +473,13 @@ The only reason we list these methods here is that you can find them in many old
     </script>
     ```
 
-All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
+Tutti questi metodi ritornano i nodi inseriti/rimossi. In altre parole, `parentElem.appendChild(node)` ritorna `node`. Ma solitamente il valore ritornato non viene utilizzato, è il metodo che ci interessa.
 
-## A word about "document.write"
+## Una parola su "document.write"
 
-There's one more, very ancient method of adding something to a web-page: `document.write`.
+C'è un altro metodo, molto vecchio, per aggiungere qualcosa a una pagina web:  `document.write`.
 
-The syntax:
+La sintassi:
 
 ```html run
 <p>Somewhere in the page...</p>
@@ -489,73 +491,73 @@ The syntax:
 <p>The end</p>
 ```
 
-The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
-
-The method comes from times when there was no DOM, no standards... Really old times. It still lives, because there are scripts using it.
+La chiamata a `document.write(html)` inserisce `html` nella pagina "all'istante". La stringa `html` può essere generata dinamicamente, quindi in un certo senso è flessibile. Possiamo utilizzare JavaScript per creare una pagina web completa e per scrivervi. 
 
-In modern scripts we can rarely see it, because of the following important limitation:
+Il metodo viene dai tempi in cui non c'era un DOM, nessun standart... Tempi molto vecchi. E' ancora vivo perché vi sono script che lo utilizzano. 
 
-**The call to `document.write` only works while the page is loading.**
+Negli script moderni possiamo trovarlo raramente a causa della seguente importante limitazione:
 
-If we call it afterwards, the existing document content is erased.
+**La chiamata a `document.write` funziona solo mentre la pagina sta caricando.**
+  
+Se lo chiamiamo dopo, il contenuto esistente del documento viene cancellato.
 
-For instance:
+Ad esempio:
 
 ```html run
 <p>After one second the contents of this page will be replaced...</p>
 *!*
 <script>
-  // document.write after 1 second
-  // that's after the page loaded, so it erases the existing content
+  // document.write dopo 1 secondo
+  // questo dopo che la pagina ha caricato, quindi il contenuto esistente viene cancellato
   setTimeout(() => document.write('<b>...By this.</b>'), 1000);
 </script>
 */!*
 ```
 
-So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
+Perciò è inutilizzabile dopo il caricamento della pagina, a differenza dei metodi del DOM che abbiamo visto sopra. 
 
-That's the downside.
+Questo è il lato negativo.
 
-There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
+Ma c'è anche un lato positivo. Tecnicamente, quando `document.write` viene chiamato mentre il browser sta leggendo ("analizzando") l'HTML, e vi scrive qualcosa, il browser tratta quel contenuto come se fosse stato dal principio nel testo HTML.
 
-So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
+Quindi lavora molto velocemente, perché *non viene modificato il DOM*. Scrive direttamente nel testo della pagina, quando il DOM non è ancora stato costruito.
 
-So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
+Perciò se abbiamo bisogno di aggiungere dinamicamente molto testo all'HTML, siamo in fase di caricamento della pagina e la velocità conta, potrebbe essere utile. Ma in pratica questo capita raramente. Di solito troviamo questo metodo in uno script solo perché è vecchio. 
 
-## Summary
+## Riepilogo
 
-- Methods to create new nodes:
-    - `document.createElement(tag)` -- creates an element with the given tag,
-    - `document.createTextNode(value)` -- creates a text node (rarely used),
-    - `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.  
+  Metodi per creare nuovi nodi:
+    - `document.createElement(tag)` -- crea un elemento con il dato tag,
+    - `document.createTextNode(value)` -- crea un nodo di testo (raramente utilizzato),
+    - `elem.cloneNode(deep)` -- clona un elemento, se `deep==true` include tutti i discendenti.
 
-- Insertion and removal:
-    - `node.append(...nodes or strings)` -- insert into `node`, at the end,
-    - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
-    - `node.before(...nodes or strings)` –- insert right before `node`,
-    - `node.after(...nodes or strings)` –- insert right after `node`,
-    - `node.replaceWith(...nodes or strings)` –- replace `node`.
-    - `node.remove()` –- remove the `node`.
+- Inserzione e rimozione:
+    - `node.append(...nodi o stringhe)` -- inserisce dentro `node`, alla fine,
+    - `node.prepend(...nodi o stringhe)` -- inserisce dentro `node`, all'inizio,
+    - `node.before(...nodi o stringhe)` –- inserisce subito prima di `node`,
+    - `node.after(...nodi o stringhe)` –- inserisce subito dopo `node`,
+    - `node.replaceWith(...nodi o stringhe)` –- rimpiazza `node`.
+    - `node.remove()` –- rimuove `node`.
 
-    Text strings are inserted "as text".
+    Le stringhe di testo vengono inserite "come testo".
 
-- There are also "old school" methods:
+- Ci sono anche metodi "vecchia scuola":
     - `parent.appendChild(node)`
     - `parent.insertBefore(node, nextSibling)`
     - `parent.removeChild(node)`
     - `parent.replaceChild(newElem, node)`
 
-    All these methods return `node`.
+    Tutti questi metodi ritornano `node`.
 
-- Given some HTML in `html`, `elem.insertAdjacentHTML(where, html)` inserts it depending on the value of `where`:
-    - `"beforebegin"` -- insert `html` right before `elem`,
-    - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
-    - `"beforeend"` -- insert `html` into `elem`, at the end,
-    - `"afterend"` -- insert `html` right after `elem`.
+- Data HTML come `html`, `elem.insertAdjacentHTML(where, html)` inserisce in base al valore di `where`:
+    - `"beforebegin"` -- inserisce `html` subito prima di `elem`,
+    - `"afterbegin"` -- inserisce `html` in `elem`, all'inizio,
+    - `"beforeend"` -- inserisce `html` in `elem`, alla fine,
+    - `"afterend"` -- inserisce `html` subito dopo `elem`.
 
-    Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.
+    Ci sono altri metodi simili, `elem.insertAdjacentText` e `elem.insertAdjacentElement`, che inseriscono stringhe di testo ed elementi, ma vengono raramente utilizzati.
 
-- To append HTML to the page before it has finished loading:
+- Per appendere HTML a una pagina prima che questa carichi:
     - `document.write(html)`
 
-    After the page is loaded such a call erases the document. Mostly seen in old scripts.
+    Dopo che la pagina ha caricato la sua chiamata cancella il contenuto della pagina. Si trova principalmente in vecchi script.