You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
25 KiB
206 lines
25 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b672130244189715ac084c3259f6ab58",
|
|
"translation_date": "2025-08-25T20:52:10+00:00",
|
|
"source_file": "README.md",
|
|
"language_code": "it"
|
|
}
|
|
-->
|
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
[](http://makeapullrequest.com)
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
[](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
# Sviluppo Web per Principianti - Un Corso Completo
|
|
|
|
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni approfondisce JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la tua capacità di apprendimento con il nostro approccio basato su progetti. Inizia oggi il tuo viaggio nel mondo del coding!
|
|
|
|
#### 🧑🎓 _Sei uno studente?_
|
|
|
|
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per una certificazione gratuita. Questa è la pagina da salvare nei preferiti e controllare regolarmente, poiché i contenuti vengono aggiornati mensilmente.
|
|
|
|
### 📣 Annuncio - _Nuovo Corso_ su Generative AI per JavaScript appena rilasciato
|
|
|
|
Non perdere il nostro nuovo corso su Generative AI!
|
|
|
|
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
|
|
|
|
<div>
|
|
<img src="./images/background.png" width="600px" />
|
|
</div>
|
|
|
|
- Lezioni che coprono tutto, dai concetti di base a RAG.
|
|
- Interagisci con personaggi storici utilizzando GenAI e la nostra app complementare.
|
|
- Una narrativa divertente e coinvolgente: viaggerai nel tempo!
|
|
|
|
<div>
|
|
<img src="./images/character.png" width="600px" />
|
|
</div>
|
|
|
|
Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell'apprendimento di argomenti come:
|
|
- Prompting e ingegneria dei prompt
|
|
- Generazione di app testuali e grafiche
|
|
- Applicazioni di ricerca
|
|
|
|
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
|
|
|
|
|
|
|
|
## 🌱 Per iniziare
|
|
|
|
> **Insegnanti**, abbiamo [incluso alcune indicazioni](for-teachers.md) su come utilizzare questo corso. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
|
|
|
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz introduttivo e proseguite leggendo il materiale della lezione, completando le varie attività e verificando la vostra comprensione con il quiz finale.
|
|
|
|
Per migliorare la vostra esperienza di apprendimento, connettetevi con i vostri compagni per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), dove il nostro team di moderatori sarà disponibile per rispondere alle vostre domande.
|
|
|
|
Per approfondire la vostra formazione, vi consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio.
|
|
|
|
### 📋 Configurare l'ambiente
|
|
|
|
Questo corso ha un ambiente di sviluppo pronto all'uso! Quando iniziate, potete scegliere di eseguire il corso in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza necessità di installazioni_) o localmente sul vostro computer utilizzando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
|
|
|
#### Crea il tuo repository
|
|
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una copia di questo repository. Puoi farlo cliccando sul pulsante **Use this template** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del corso.
|
|
|
|
Segui questi passaggi:
|
|
1. **Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
|
|
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
|
|
|
#### Eseguire il corso in un Codespace
|
|
|
|
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace in cui lavorare.
|
|
|
|
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
|
|
|
|
#### Eseguire il corso localmente sul tuo computer
|
|
|
|
Per eseguire questo corso localmente sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da riga di comando. La nostra prima lezione, [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti, così potrai scegliere ciò che funziona meglio per te.
|
|
|
|
La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
|
|
|
1. Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
|
|
|
|
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
|
|
|
|
Poi, apri il [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
|
|
|
|
```bash
|
|
git clone <your-repository-url>
|
|
```
|
|
|
|
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Open Folder** e selezionando la cartella che hai appena clonato.
|
|
|
|
> Estensioni consigliate per Visual Studio Code:
|
|
>
|
|
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima le pagine HTML direttamente in Visual Studio Code
|
|
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
|
|
|
|
## 📂 Ogni lezione include:
|
|
|
|
- sketchnote opzionale
|
|
- video supplementare opzionale
|
|
- quiz di riscaldamento pre-lezione
|
|
- lezione scritta
|
|
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
|
|
- controlli delle conoscenze
|
|
- una sfida
|
|
- letture supplementari
|
|
- compito
|
|
- quiz post-lezione
|
|
|
|
> **Nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, per un totale di 48 quiz di tre domande ciascuno. Sono collegati all'interno delle lezioni e l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`. I quiz sono in fase di localizzazione.
|
|
|
|
## 🗃️ Lezioni
|
|
|
|
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
|
|
| :-: | :-----------------------------------------------------------: | :----------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
|
| 01 | Introduzione | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi comuni alla maggior parte dei linguaggi di programmazione e gli strumenti utilizzati dai professionisti | [Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
|
| 02 | Introduzione | Basi di GitHub, incluso il lavoro in team | Come utilizzare GitHub nei tuoi progetti e collaborare con altri su una base di codice | [Introduzione a GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
|
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di Accessibilità](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
|
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di Dati](/2-js-basics/1-data-types/README.md) | Jasmine |
|
|
| 05 | Basi di JS | Funzioni e Metodi | Scopri funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](/2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
|
|
| 06 | Basi di JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice utilizzando metodi decisionali | [Prendere Decisioni](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
|
| 07 | Basi di JS | Array e Cicli | Lavora con i dati utilizzando array e cicli in JavaScript | [Array e Cicli](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
|
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | [Introduzione a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
|
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui concetti base del CSS, inclusa la responsività | [Introduzione a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
|
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Chiusure JavaScript, Manipolazione del DOM | Scrivi il JavaScript per far funzionare il terrario come un'interfaccia drag-and-drop, concentrandoti su chiusure e DOM | [Chiusure JavaScript, Manipolazione del DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
|
| 11 | [Gioco di Scrittura](/4-typing-game/solution/README.md) | Costruisci un Gioco di Scrittura | Impara a utilizzare eventi della tastiera per gestire la logica della tua app JavaScript | [Programmazione Basata su Eventi](/4-typing-game/typing-game/README.md) | Christopher |
|
|
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Lavorare con i browser | Scopri come funzionano i browser, la loro storia e come creare i primi elementi di un'estensione per browser | [Informazioni sui browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
|
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Creare un modulo, chiamare un'API e memorizzare variabili in local storage | Crea gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate in local storage | [API, Moduli e Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
|
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Utilizza i processi in background del browser per gestire l'icona dell'estensione; scopri le prestazioni web e alcune ottimizzazioni | [Attività in background e prestazioni](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
|
| 15 | [Space Game](/6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Scopri l'Ereditarietà utilizzando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per la creazione di un gioco | [Introduzione allo sviluppo di giochi avanzato](/6-space-game/1-introduction/README.md) | Chris |
|
|
| 16 | [Space Game](/6-space-game/solution/README.md) | Disegnare su canvas | Scopri l'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
|
| 17 | [Space Game](/6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento utilizzando le coordinate cartesiane e l'API Canvas | [Muovere gli elementi](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
|
| 18 | [Space Game](/6-space-game/solution/README.md) | Rilevamento delle collisioni | Fai in modo che gli elementi si scontrino e reagiscano tra loro utilizzando i tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento delle collisioni](/6-space-game/4-collision-detection/README.md) | Chris |
|
|
| 19 | [Space Game](/6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Tenere il punteggio](/6-space-game/5-keeping-score/README.md) | Chris |
|
|
| 20 | [Space Game](/6-space-game/solution/README.md) | Terminare e riavviare il gioco | Scopri come terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [Condizione di fine](/6-space-game/6-end-condition/README.md) | Chris |
|
|
| 21 | [Banking App](/7-bank-project/solution/README.md) | Template HTML e routing in un'app web | Scopri come creare la struttura di un sito web multipagina utilizzando il routing e i template HTML | [Template HTML e Routing](/7-bank-project/1-template-route/README.md) | Yohan |
|
|
| 22 | [Banking App](/7-bank-project/solution/README.md) | Creare un modulo di login e registrazione | Scopri come creare moduli e gestire le routine di validazione | [Moduli](/7-bank-project/2-forms/README.md) | Yohan |
|
|
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metodi per recuperare e utilizzare i dati | Scopri come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e eliminarli | [Dati](/7-bank-project/3-data/README.md) | Yohan |
|
|
| 24 | [Banking App](/7-bank-project/solution/README.md) | Concetti di gestione dello stato | Scopri come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello stato](/7-bank-project/4-state-management/README.md) | Yohan |
|
|
|
|
|
|
## 🏫 Pedagogia
|
|
|
|
Il nostro curriculum è progettato seguendo due principi pedagogici fondamentali:
|
|
* apprendimento basato su progetti
|
|
* quiz frequenti
|
|
|
|
Il programma insegna i fondamenti di JavaScript, HTML e CSS, oltre agli strumenti e alle tecniche più recenti utilizzati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione per browser eco-friendly, un gioco in stile Space Invaders e un'app bancaria per aziende. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
|
|
|
|
> 🎓 Puoi seguire le prime lezioni di questo curriculum come [Percorso di apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
|
|
|
|
Assicurando che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti viene migliorata. Abbiamo anche scritto diverse lezioni introduttive sui concetti di base di JavaScript, accompagnate da un video della collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
|
|
|
|
Inoltre, un quiz a basso rischio prima di una lezione orienta lo studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione garantisce una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano in piccolo e diventano sempre più complessi entro la fine del ciclo di 12 settimane.
|
|
|
|
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrarci sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra collezione di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
|
|
|
> Visita le nostre linee guida [Code of Conduct](CODE_OF_CONDUCT.md) e [Contributing](CONTRIBUTING.md). Accogliamo con favore i tuoi feedback costruttivi!
|
|
|
|
|
|
## 🧭 Accesso offline
|
|
|
|
Puoi eseguire questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Fai un fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale e poi, nella cartella principale di questo repository, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 del tuo localhost: `localhost:3000`.
|
|
|
|
## 📘 PDF
|
|
|
|
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
|
|
|
|
|
## 🎒 Altri corsi
|
|
|
|
Il nostro team produce altri corsi! Dai un'occhiata:
|
|
|
|
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
|
|
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
|
|
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
|
|
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
|
|
- [AI for Beginners](https://aka.ms/ai-beginners)
|
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
|
- [ML for Beginners](https://aka.ms/ml-beginners)
|
|
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
|
|
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
|
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
|
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
|
|
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
|
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
|
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
|
|
|
|
## Licenza
|
|
|
|
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per ulteriori informazioni.
|
|
|
|
**Disclaimer**:
|
|
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione. |