diff --git a/docs/extras/glossario.md b/docs/extras/glossario.md
index 5c14b7d..ffa02c7 100644
--- a/docs/extras/glossario.md
+++ b/docs/extras/glossario.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 2
+sidebar_position: 4
---
# Glossario
diff --git a/docs/extras/img/mentors-shetech/angelo-giuffredi.png b/docs/extras/img/mentors-shetech/angelo-giuffredi.png
deleted file mode 100644
index 4c4291b..0000000
Binary files a/docs/extras/img/mentors-shetech/angelo-giuffredi.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/attilio-capocchiani.png b/docs/extras/img/mentors-shetech/attilio-capocchiani.png
deleted file mode 100644
index 5c90d64..0000000
Binary files a/docs/extras/img/mentors-shetech/attilio-capocchiani.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/elisa-bordoli.png b/docs/extras/img/mentors-shetech/elisa-bordoli.png
deleted file mode 100644
index 144fc87..0000000
Binary files a/docs/extras/img/mentors-shetech/elisa-bordoli.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/giuseppe-delle-donne.png b/docs/extras/img/mentors-shetech/giuseppe-delle-donne.png
deleted file mode 100644
index 005da9a..0000000
Binary files a/docs/extras/img/mentors-shetech/giuseppe-delle-donne.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/lisa-zhou.png b/docs/extras/img/mentors-shetech/lisa-zhou.png
deleted file mode 100644
index c829d27..0000000
Binary files a/docs/extras/img/mentors-shetech/lisa-zhou.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/luca-napoletano.png b/docs/extras/img/mentors-shetech/luca-napoletano.png
deleted file mode 100644
index 6e8781f..0000000
Binary files a/docs/extras/img/mentors-shetech/luca-napoletano.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/ludovico-besana.png b/docs/extras/img/mentors-shetech/ludovico-besana.png
deleted file mode 100644
index 44041a8..0000000
Binary files a/docs/extras/img/mentors-shetech/ludovico-besana.png and /dev/null differ
diff --git a/docs/extras/img/mentors-shetech/stefania-bottari.png b/docs/extras/img/mentors-shetech/stefania-bottari.png
deleted file mode 100644
index fd6d11b..0000000
Binary files a/docs/extras/img/mentors-shetech/stefania-bottari.png and /dev/null differ
diff --git a/docs/extras/mentors.mdx b/docs/extras/mentors.mdx
deleted file mode 100644
index 42ec692..0000000
--- a/docs/extras/mentors.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-sidebar_position: 1
----
-
-# Mentors
-
-Mentor e mentee possono avere un legame molto importante e duraturo, anche dopo la conclusione del bootcamp.
-Cliccando sull'immagine di ogni mentor sarà possibile accedere al relativo profilo LinkedIn.
-
-## Ludovico Besana
-
-
-
-
-
-
-
-## Stefania Bottari
-
-
-
-
-
-
-
-## Angelo Giuffredi
-
-
-
-
-
-
-
-
-
-## Elisa Bordoli
-
-
-
-
-
-
-
-
-## Luca Napoletano
-
-
-
-
-
-
-
-
-
-## Lisa Zhou
-
-
-
-
-
-
-
-## Giuseppe Delle Donne
-
-
-
-
-
-
-
-## Attilio Capocchiani
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/extras/progetto-finale-extra/_category_.json b/docs/extras/progetto-finale-extra/_category_.json
new file mode 100644
index 0000000..a1edf7b
--- /dev/null
+++ b/docs/extras/progetto-finale-extra/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "Progetto Finale Extra",
+ "position": 1,
+ "link": {
+ "type": "generated-index"
+ }
+}
diff --git a/docs/progetto-finale/css.mdx b/docs/extras/progetto-finale-extra/css.mdx
similarity index 100%
rename from docs/progetto-finale/css.mdx
rename to docs/extras/progetto-finale-extra/css.mdx
diff --git a/docs/extras/progetto-finale-extra/example.md b/docs/extras/progetto-finale-extra/example.md
new file mode 100644
index 0000000..58bd29a
--- /dev/null
+++ b/docs/extras/progetto-finale-extra/example.md
@@ -0,0 +1,13 @@
+---
+sidebar_position: 5
+---
+
+# Esempio
+
+Ecco un esempio di come potrebbe essere sviluppato il progetto finale.
+
+
\ No newline at end of file
diff --git a/docs/progetto-finale/html.md b/docs/extras/progetto-finale-extra/html.md
similarity index 100%
rename from docs/progetto-finale/html.md
rename to docs/extras/progetto-finale-extra/html.md
diff --git a/docs/extras/progetto-finale-extra/img/live-preview.png b/docs/extras/progetto-finale-extra/img/live-preview.png
new file mode 100644
index 0000000..ac02ad9
Binary files /dev/null and b/docs/extras/progetto-finale-extra/img/live-preview.png differ
diff --git a/docs/extras/progetto-finale-extra/img/livepreview-installed.png b/docs/extras/progetto-finale-extra/img/livepreview-installed.png
new file mode 100644
index 0000000..d5a31f9
Binary files /dev/null and b/docs/extras/progetto-finale-extra/img/livepreview-installed.png differ
diff --git a/docs/progetto-finale/js.md b/docs/extras/progetto-finale-extra/js.md
similarity index 100%
rename from docs/progetto-finale/js.md
rename to docs/extras/progetto-finale-extra/js.md
diff --git a/docs/extras/progetto-finale-extra/livepreview.md b/docs/extras/progetto-finale-extra/livepreview.md
new file mode 100644
index 0000000..ca40315
--- /dev/null
+++ b/docs/extras/progetto-finale-extra/livepreview.md
@@ -0,0 +1,31 @@
+---
+sidebar_position: 1
+---
+
+# Live Preview
+
+## Installa Live Preview
+
+**Step 1:** Apri Visual Studio Code sul tuo computer.
+
+**Step 2:** Nella barra laterale sinistra, trova l'icona delle estensioni (simbolo a forma di quadratino con degli angoli arrotondati) e fai clic su di essa.
+
+**Step 3:** Nella barra di ricerca in alto, digita "Live Preview" e premi il tasto Invio. Dovrebbe apparirti il plugin "Live Preview" tra i risultati di ricerca.
+
+**Step 4:** Clicca sul pulsante "Install" accanto al plugin "Live Preview". Visual Studio Code inizierà a scaricare e installare il plugin.
+
+
+
+**Step 5:** Dopo aver completato l'installazione, Visual Studio Code ti chiederà di riavviare il programma. Fai clic su "Restart" per riavviare Visual Studio Code.
+
+**Step 6:** Dopo il riavvio di Visual Studio Code, apri il file HTML che desideri visualizzare in anteprima in tempo reale. Fai clic con il pulsante destro del mouse sul file HTML e seleziona "Open with Live Preview". Dovrebbe aprirsi una finestra con la visualizzazione in anteprima del tuo file HTML.
+
+
+
+
+**Ben fatto! 🎉**
+
+Ora puoi visualizzare in tempo reale le modifiche apportate ai tuoi file HTML senza dover salvare e ricaricare continuamente la pagina.
+
+
+
diff --git a/docs/intro.md b/docs/intro.md
index 5134423..8f31bcc 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -8,11 +8,10 @@ Benvenut* al nostro corso pratico su **JavaScript**!
In questo bootcamp, imparerai a programmare in JavaScript e ad utilizzarlo per creare applicazioni web dinamiche.
-Questo bootcamp di un giorno è stato progettato per **aiutare le donne a conoscere il mondo di JavaScript**, il linguaggio di programmazione più utilizzato al mondo. Imparerai le basi della programmazione e avrai un'introduzione alla tecnologia JavaScript attuale. Costruirai un'interfaccia web interattiva utilizzando JavaScript, HTML e CSS.
+Questo bootcamp di un giorno è stato progettato per aiutare donne (e non solo) a **conoscere il mondo di JavaScript**, il linguaggio di programmazione più utilizzato al mondo. Imparerai le basi della programmazione e avrai un'introduzione alla tecnologia JavaScript attuale. Costruirai un'interfaccia web interattiva utilizzando JavaScript, HTML e CSS.
-Durante il bootcamp potrai anche conoscere nuove persone ed essere supportato da mentor esperti che ti guideranno durante tutta la giornata! Completamente gratuito e aperto a tutte le persone, inoltre **non è richiesta** alcuna conoscenza pregressa di programmazione.
+Durante il bootcamp potrai anche conoscere nuove persone ed essere supportat* da mentor espert* che ti guideranno durante tutta la giornata! Completamente gratuito e aperto a tutte le persone, inoltre **non è richiesta** alcuna conoscenza pregressa di programmazione.
-L'agenda include un'introduzione a JavaScript, elementi di base di JavaScript, condizioni e cicli, funzioni, oggetti e un progetto finale.
-**Il bootcamp si concluderà con la presentazione dei progetti finali.**
+L'agenda include un'introduzione a JavaScript, elementi di base di JavaScript, condizioni e cicli, funzioni, oggetti e un progetto finale. **Il bootcamp si concluderà con la presentazione dei progetti finali.**
Unisciti a noi e inizia il tuo viaggio nel mondo entusiasmante della programmazione JavaScript!
\ No newline at end of file
diff --git a/docs/javascript-i/elementi-di-base.mdx b/docs/javascript-i/elementi-di-base.mdx
index 9803bd9..62cad33 100644
--- a/docs/javascript-i/elementi-di-base.mdx
+++ b/docs/javascript-i/elementi-di-base.mdx
@@ -7,11 +7,18 @@ sidebar_position: 2
Argomenti: DOM, Variabili e Operatori
## Intro
-JavaScript è un linguaggio a tipizzazione dinamica, il che significa che non è necessario specificare il tipo di dato quando si dichiara una variabile. Ciò lo rende molto flessibile e facile da usare per i programmatori.
+JavaScript è un linguaggio che ti permette di dare istruzioni al tuo browser web. Con queste istruzioni, puoi far fare al browser un sacco di cose interessanti, come:
-## DOM
+**Modificare il contenuto di una pagina web**: puoi cambiare il testo, le immagini e altri elementi che vedi su una pagina.
-Il **Document Object Model**, o DOM, è un insieme di oggetti creati dal browser web quando viene caricata una pagina HTML. Il DOM rappresenta la struttura della pagina HTML come un albero gerarchico di oggetti, che possono essere manipolati tramite l'utilizzo del codice JavaScript.
+**Aggiungere interattività**: puoi creare pulsanti, menu e altri elementi che rispondono al clic del mouse o al tocco dello schermo.
+
+**Creare animazioni**: puoi far muovere gli elementi sulla pagina e creare effetti visivi accattivanti.
+Per fare tutto questo, JavaScript utilizza dei "mattoni" fondamentali, che sono:
+
+## DOM (Document Object Model)
+
+Immagina il DOM come una rappresentazione digitale della pagina web che stai visualizzando. È come un albero con rami e foglie: ogni elemento della pagina è rappresentato da un nodo nell'albero, e le relazioni tra gli elementi sono rappresentate dai rami. Usando il DOM, puoi selezionare e modificare qualsiasi parte della pagina.
@@ -25,6 +32,19 @@ Utilizzando il DOM, gli sviluppatori possono manipolare il contenuto della pagin
Il metodo prende un parametro, ovvero l'ID dell'elemento da cercare, e restituisce l'elemento corrispondente. Ad esempio, supponiamo che tu abbia un elemento div con l'ID "mioDiv" nella tua pagina HTML. Puoi utilizzare il metodo document.getElementById() per recuperare l'elemento e poi utilizzarlo per modificarne il contenuto o le proprietà, come ad esempio lo stile CSS.
+*Prova a comprenderlo più a fondo visualizzando il DOM (Document Object Model) come la struttura di una pagina web. Ogni elemento della pagina, come un paragrafo, un'immagine o un pulsante, è come un mattone di questa struttura. A ciascun mattone viene assegnato un ID univoco, come un numero di serie, per identificarlo.*
+
+Il metodo document.getElementById() è come un detective che può trovare un elemento specifico nella pagina web conoscendo il suo ID. Funziona così:
+
+1)Gli dai l'ID da cercare: Pensi all'ID come al nome del mattone che stai cercando.
+
+2)Lui cerca il mattone: Il detective document.getElementById() sfoglia la struttura del DOM, controllando ogni elemento e il suo ID, finché non trova quello che corrisponde all'ID che gli hai dato.
+
+3)Ti restituisce il mattone: Una volta trovato l'elemento, il detective te lo consegna. Ora puoi fare quello che vuoi con quel mattone, ad esempio:
+* Cambiare il suo contenuto: Se il mattone è un paragrafo, puoi modificarne il testo.
+* Cambiare il suo aspetto: Puoi modificare il colore, la dimensione o lo stile del mattone.
+* Nascondere o mostrare il mattone: Puoi decidere se il mattone deve essere visibile o meno sulla pagina.
+
Ecco un esempio:
```html
@@ -56,6 +76,13 @@ document.getElementById() restituisce solo il primo elemento con l'ID specificat
**btn.addEventListener()** è un metodo che viene utilizzato per ascoltare gli eventi che avvengono su un elemento del DOM, ad esempio un pulsante. Il metodo prende due argomenti: il primo è il tipo di evento che si desidera ascoltare (ad esempio "click", "mouseover", "keydown", ecc.), e il secondo è la funzione che deve essere eseguita quando l'evento si verifica. La funzione viene eseguita solo quando l'evento si verifica.
+Immagina di avere un pulsante sulla tua pagina web. Quando clicchi su quel pulsante, vuoi che accada qualcosa, ad esempio cambiare il colore di un paragrafo o mostrare una finestra pop-up. Ecco dove entra in gioco btn.addEventListener().
+
+Pensa a btn.addEventListener() come a un vero e proprio sistema di allarme per il tuo pulsante. Funziona così:
+1) *Scegli l'evento da ascoltare*: Decidi quale azione vuoi che attivi l'allarme, ad esempio un clic, un passaggio del mouse o la pressione di un tasto.
+2) *Imposta l'azione da eseguire*: Decidi cosa vuoi che accada quando l'allarme suona. Potrebbe essere cambiare il colore di un paragrafo, mostrare una finestra pop-up o eseguire un'altra azione.
+3) *Attiva il sistema di allarme*: Usa btn.addEventListener() per collegare l'evento scelto all'azione che vuoi eseguire. In questo modo, quando si verifica l'evento, l'azione verrà eseguita automaticamente.
+
> [Scopri di più](https://www.w3schools.com/js/js_htmldom_eventlistener.asp)
Ad esempio, se si vuole ascoltare il click su un pulsante con id "myButton", si potrebbe utilizzare il seguente codice:
@@ -90,16 +117,23 @@ L'utilizzo di innerHTML può essere pericoloso se il contenuto è fornito dall'u
:::
## Variabili
-In JavaScript, le variabili vengono dichiarate utilizzando la parola chiave **"var"**, **"let"** o **"const"**.
+Le variabili sono come dei contenitori per memorizzare informazioni. Puoi darle un nome e usarle per conservare dati come numeri, testo o persino altri oggetti.
+
+*Immagina le variabili come dei scatoloni che puoi usare per conservare le cose. Ogni scatolone ha un'etichetta che gli dai un nome, così puoi facilmente trovare quello che ti serve. Dentro gli scatoloni puoi mettere diversi tipi di cose, come numeri, parole o anche altri scatoloni.*
-**Una variabile è un'area di memoria in cui è possibile archiviare un valore.** Il valore di una variabile può essere modificato durante l'esecuzione del programma.
+Le variabili sono fondamentali per tenere in ordine il tuo codice e renderlo più efficiente. Invece di dover scrivere sempre lo stesso valore più e più volte, puoi metterlo in una variabile e usarla quando ne hai bisogno.
+
+**Come creare una variabile in JavaScript**:
+
+Per creare una variabile in JavaScript, devi usare una delle parole chiave speciali: **var**, **let** o **const**.
+Dopo la parola chiave, devi scrivere il nome della tua variabile e poi un segno di uguale (=) e il valore che vuoi memorizzare.
La parola chiave "var" è stata usata in precedenza per dichiarare variabili in JavaScript, ma è stata sostituita da "let" e "const". La parola chiave "let" viene utilizzata per dichiarare una variabile il cui valore può essere modificato durante l'esecuzione del programma. La parola chiave "const" viene utilizzata per dichiarare una costante, il cui valore non può essere modificato.
Ad esempio:
```jsx
-let nome = "Mario";
+let nome = "Mario"; //prima avremmo potuto scrivere var nome = "Mario";
let eta = 30;
const PI_GRECO = 3.14;
```
@@ -116,6 +150,8 @@ JavaScript è case-sensitive, quindi i nomi banana, Banana, BaNaNa sono tre vari
## Operatori
+Gli operatori sono una sorta di aiutanti del tuo codice. Ti permettono di fare calcoli, confrontare valori e combinare dati in modi diversi. Esistono molti tipi di operatori, come quelli matematici (+, -, *, /), logici (&&, ||, !) e di confronto (==, !=, <, >).
+
JavaScript supporta anche molti operatori, come ad esempio l'operatore di assegnazione "=", l'operatore di addizione "+", l'operatore di sottrazione "-", l'operatore di moltiplicazione "*", l'operatore di divisione "/", l'operatore di resto "%" e l'operatore di concatenazione "+". Ecco alcuni esempi:
```jsx
@@ -184,4 +220,4 @@ In RunJS dichiara due variabili. Utilizzando gli operatori aritmetici, scrivi un
**Congratulazioni! 🎉**
-Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti.
\ No newline at end of file
+Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti.
diff --git a/docs/progetto-finale/example.md b/docs/progetto-finale/example.md
index 58bd29a..0716e3b 100644
--- a/docs/progetto-finale/example.md
+++ b/docs/progetto-finale/example.md
@@ -6,8 +6,8 @@ sidebar_position: 5
Ecco un esempio di come potrebbe essere sviluppato il progetto finale.
-
\ No newline at end of file
diff --git a/docs/progetto-finale/traccia.md b/docs/progetto-finale/traccia.md
new file mode 100644
index 0000000..33e884b
--- /dev/null
+++ b/docs/progetto-finale/traccia.md
@@ -0,0 +1,138 @@
+---
+sidebar_position: 2
+---
+
+# Traccia
+
+### Obiettivo del Progetto
+
+L'obiettivo di questo progetto è la creazione di un'applicazione web che permetta agli utenti di generare una bio professionale in stile LinkedIn. L'utente inserirà le proprie informazioni professionali e personali attraverso un form, e l'applicazione genererà dinamicamente una pagina che presenta queste informazioni in un formato pulito e professionale.
+
+## Requisiti Specifici:
+
+ - Scrivere uno script JavaScript che prenda le informazioni inserite dall'utente e le visualizzi in una sezione separata della pagina sotto forma di bio.
+ - Implementare la validazione del form per assicurarsi che tutti i campi siano compilati prima di permettere all'utente di generare la bio.
+
+
+### Struttura dei File
+Il progetto dovrà essere organizzato in tre file principali:
+
+- `index.html`: Contiene la struttura della pagina e il form di input.
+- `style.css`: Contiene le regole di stilizzazione per la pagina.
+- `script.js`: Contiene la logica per raccogliere i dati del form e generare la bio.
+
+## Guida alla Realizzazione del Progetto
+
+### Strutturare il Form HTML
+
+- In `index.html`, creare un form con campi di input per tutte le informazioni richieste.
+- Assicurarsi che ogni campo di input abbia un `id` unico per facilitare la raccolta dei dati con JavaScript.
+
+Crea un file HTML contenente questo codice:
+
+```html
+
+
+ Progetto Finale SheTech
+
+
Professional Bio Maker 📝
+
+
+
/ pathname under which your site is served
// For GitHub pages deployment, it is often '//'
- baseUrl: '/javascript-from-scratch/',
+ baseUrl: '/javascript-from-scratch-wl/',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'shetechitaly', // Usually your GitHub org/user name.
- projectName: 'javascript-from-scratch', // Usually your repo name.
+ projectName: 'javascript-from-scratch-wl', // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
@@ -62,7 +62,7 @@ const config = {
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
// Replace with your project's social card
- image: 'img/social-card.png',
+ image: '#',
navbar: {
title: 'JavaScript from scratch',
logo: {
diff --git a/src/pages/index.js b/src/pages/index.js
index a3f63aa..bee6a17 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -31,7 +31,7 @@ export default function Home() {
return (
+ description="Bootcamp JavaScript by SheTech">