|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 2 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 1 month ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Sviluppo Web per Principianti - Un Curriculum
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 didattico basato sui progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Community Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
- Fai un Fork del Repository: Clicca
- Clona il Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Unisciti al Discord di Azure AI Foundry e incontra esperti e altri sviluppatori
🌐 Supporto Multilingue
Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
Arabo | Bengalese | Bulgaro | Birmano (Myanmar) | Cinese (Semplificato) | Cinese (Tradizionale, Hong Kong) | Cinese (Tradizionale, Macao) | Cinese (Tradizionale, Taiwan) | Croato | Ceco | Danese | Olandese | Estone | Finlandese | Francese | Tedesco | Greco | Ebraico | Hindi | Ungherese | Indonesiano | Italiano | Giapponese | Coreano | Lituano | Malese | Marathi | Nepalese | Norvegese | Persiano (Farsi) | Polacco | Portoghese (Brasile) | Portoghese (Portogallo) | Punjabi (Gurmukhi) | Rumeno | Russo | Serbo (Cirillico) | Slovacco | Sloveno | Spagnolo | Swahili | Svedese | Tagalog (Filippino) | Tamil | Thailandese | Turco | Ucraino | Urdu | Vietnamita
Se desideri avere ulteriori traduzioni, le lingue supportate sono elencate qui
🧑🎓 Sei uno studente?
Visita la pagina Student Hub dove troverai risorse per principianti, pacchetti per studenti e persino modi per ottenere un voucher per un certificato gratuito. Questa è la pagina che vuoi salvare nei preferiti e controllare di tanto in tanto, poiché il contenuto viene aggiornato mensilmente.
📣 Annuncio - Nuove sfide con la modalità Agente di GitHub Copilot da completare!
Nuova sfida aggiunta, cerca "Sfida Agente GitHub Copilot 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare utilizzando GitHub Copilot e la modalità Agente. Se non hai mai usato la modalità Agente prima, è in grado non solo di generare testo, ma anche di creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo Progetto da realizzare utilizzando l'AI Generativa
Nuovo progetto Assistente AI appena aggiunto, dai un'occhiata al progetto
📣 Annuncio - Nuovo Curriculum sull'AI Generativa per JavaScript appena rilasciato
Non perdere il nostro nuovo curriculum sull'AI Generativa!
Visita https://aka.ms/genai-js-course per iniziare!
- Lezioni che coprono tutto, dalle basi alla RAG.
- Interagisci con personaggi storici utilizzando GenAI e la nostra app complementare.
- Narrazione divertente e coinvolgente, viaggerai nel tempo!
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 di testo e immagini
- App di ricerca
Visita https://aka.ms/genai-js-course per iniziare!
🌱 Per iniziare
Insegnanti, abbiamo incluso alcuni suggerimenti su come utilizzare questo curriculum. Ci piacerebbe ricevere il vostro feedback nel nostro forum di discussione!
Studenti, per ogni lezione, inizia con un quiz pre-lezione e prosegui leggendo il materiale della lezione, completando le varie attività e verifica la tua comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro forum di discussione dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare Microsoft Learn per materiali di studio aggiuntivi.
📋 Configurare il tuo ambiente
Questo curriculum ha un ambiente di sviluppo pronto all'uso! Quando inizi, puoi scegliere di eseguire il curriculum in un Codespace (un ambiente basato su browser, senza necessità di installazioni), o localmente sul tuo computer utilizzando un editor di testo come Visual Studio Code.
Crea il tuo repository
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una copia personale di questo repository. Puoi farlo cliccando sul pulsante Usa questo modello in alto nella pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
- Fai un Fork del Repository: Clicca sul pulsante "Fork" nell'angolo in alto a destra di questa pagina.
- Clona il Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Eseguire il curriculum 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.
Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum 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, ti guiderà attraverso varie opzioni per ciascuno di questi strumenti, in modo che tu possa scegliere quello che funziona meglio per te.
La nostra raccomandazione è di utilizzare Visual Studio Code come editor, che ha anche un Terminale integrato. Puoi scaricare Visual Studio Code qui.
-
Clona il tuo repository sul tuo computer. Puoi farlo cliccando sul pulsante Code e copiando l'URL:
Poi, apri Terminale all'interno di Visual Studio Code ed esegui il seguente comando, sostituendo
<your-repository-url>con l'URL che hai appena copiato:git clone <your-repository-url> -
Apri la cartella in Visual Studio Code. Puoi farlo cliccando su File > Apri Cartella e selezionando la cartella che hai appena clonato.
Estensioni consigliate per Visual Studio Code:
- Live Server - per visualizzare in anteprima le pagine HTML all'interno di Visual Studio Code
- Copilot - 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
- verifiche delle conoscenze
- una sfida
- letture supplementari
- compiti
- quiz post-lezione
Nota sui quiz: Tutti i quiz sono contenuti nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili qui e l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella
quiz-app.
🗃️ 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 della maggior parte dei linguaggi di programmazione e i software che aiutano gli sviluppatori professionisti nel loro lavoro | Introduzione ai Linguaggi di Programmazione e agli Strumenti del Mestiere | Jasmine |
| 02 | Introduzione | Fondamenti di GitHub, incluso il lavoro in team | Come utilizzare GitHub nel tuo progetto, come collaborare con altri su una base di codice | Introduzione a GitHub | Floor |
| 03 | Introduzione | Accessibilità | Impara le basi dell'accessibilità web | Fondamenti di Accessibilità | Christopher |
| 04 | Fondamenti JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | Tipi di Dati | Jasmine |
| 05 | Fondamenti JS | Funzioni e Metodi | Impara le funzioni e i metodi per gestire il flusso logico di un'applicazione | Funzioni e Metodi | Jasmine e Christopher |
| 06 | Fondamenti JS | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice utilizzando metodi decisionali | Prendere Decisioni | Jasmine |
| 07 | Fondamenti JS | Array e Cicli | Lavora con i dati utilizzando array e cicli in JavaScript | Array e Cicli | Jasmine |
| 08 | Terrarium | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | Introduzione a HTML | Jen |
| 09 | Terrarium | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sui fondamenti del CSS incluso rendere la pagina responsiva | Introduzione a CSS | Jen |
| 10 | Terrarium | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle chiusure e sulla manipolazione del DOM | Chiusure JavaScript, manipolazione DOM | Jen |
| 11 | Gioco di Scrittura | Costruire un Gioco di Scrittura | Impara a utilizzare gli eventi della tastiera per guidare la logica della tua app JavaScript | Programmazione Basata su Eventi | Christopher |
| 12 | Estensione Green Browser | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come creare i primi elementi di un'estensione per browser | Informazioni sui Browser | Jen |
| 13 | Estensione Green Browser | Costruire un modulo, chiamare un'API e memorizzare variabili nella memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API utilizzando variabili memorizzate nella memoria locale | API, Moduli e Memoria Locale | Jen |
| 14 | Estensione Green Browser | Processi in background nel browser, prestazioni web | Utilizza i processi in background del browser per gestire l'icona dell'estensione; impara le prestazioni web e alcune ottimizzazioni per migliorare | Attività in Background e Prestazioni | Jen |
| 15 | Gioco Spaziale | Sviluppo di Giochi Avanzati con JavaScript | Impara l'Ereditarietà utilizzando sia Classi che Composizione e il pattern Pub/Sub, in preparazione alla costruzione di un gioco | Introduzione allo Sviluppo di Giochi Avanzati | Chris |
| 16 | Gioco Spaziale | Disegnare su canvas | Impara l'API Canvas, utilizzata per disegnare elementi su uno schermo | Disegnare su Canvas | Chris |
| 17 | Gioco Spaziale | Muovere elementi sullo schermo | Scopri come gli elementi possono acquisire movimento utilizzando le coordinate cartesiane e l'API Canvas | Muovere Elementi | Chris |
| 18 | Gioco Spaziale | Rilevamento delle collisioni | Fai collidere gli elementi e reagire tra loro utilizzando i tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | Rilevamento delle Collisioni | Chris |
| 19 | Gioco Spaziale | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | Tenere il Punteggio | Chris |
| 20 | Gioco Spaziale | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, incluso il ripulire le risorse e il ripristinare i valori delle variabili | Condizione di Fine | Chris |
| 21 | App Bancaria | Modelli HTML e Rotte in un'App Web | Impara a creare la struttura di un'architettura di sito web multipagina utilizzando le rotte e i modelli HTML | Modelli HTML e Rotte | Yohan |
| 22 | App Bancaria | Costruire un modulo di Login e Registrazione | Impara a costruire moduli e gestire le routine di validazione | Moduli | Yohan |
| 23 | App Bancaria | Metodi per Recuperare e Utilizzare Dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli e eliminarli | Dati | Yohan |
| 24 | App Bancaria | Concetti di Gestione dello Stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | Gestione dello Stato | Yohan |
| 25 | Browser/VScode Code | Lavorare con VScode | Impara a utilizzare un editor di codice | Usare l'Editor di Codice VScode | Chris |
| 26 | Assistenti AI | Lavorare con l'AI | Impara a costruire il tuo assistente AI | Progetto Assistente AI | Chris |
🏫 Pedagogia
Il nostro curriculum è progettato seguendo due principi pedagogici chiave:
- 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 sviluppare esperienza pratica costruendo un gioco di scrittura, un terrario virtuale, un'estensione per browser eco-friendly, un gioco in stile space-invader 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 su Microsoft Learn!
Assicurandoci che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti viene aumentata. Abbiamo anche scritto diverse lezioni introduttive sui fondamenti di JavaScript per introdurre i concetti, abbinate a un video della collezione di tutorial video "Serie per Principianti: JavaScript", 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 modo semplice e diventano sempre più complessi alla 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: "Serie per Principianti: Node.js".
Visita il nostro Codice di Condotta e le linee guida per Contribuire. Accogliamo con favore i tuoi feedback costruttivi!
🧭 Accesso offline
Puoi eseguire questa documentazione offline utilizzando Docsify. Fai un fork di questo repository, installa Docsify 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.
Un PDF di tutte le lezioni può essere trovato qui.
🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un'occhiata a:
- MCP per Principianti
- Edge AI per Principianti
- Agenti AI per Principianti
- AI Generativa per Principianti .NET
- AI Generativa con JavaScript
- AI generativa con Java
- AI per principianti
- Data Science per principianti
- ML per principianti
- Cybersecurity per principianti
- Sviluppo web per principianti
- IoT per principianti
- Sviluppo XR per principianti
- Padroneggiare GitHub Copilot per uso agentico
- Padroneggiare GitHub Copilot per sviluppatori C#/.NET
- Scegli la tua avventura con Copilot
Ottenere aiuto
Se ti blocchi o hai domande sulla creazione di app AI, unisciti a:
Se hai feedback sui prodotti o riscontri errori durante la creazione, visita:
Licenza
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file LICENSE per maggiori informazioni.
Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero 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 umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.


