|
|
1 day ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 day 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 | 1 month ago | |
| docs | 1 month ago | |
| lesson-template | 1 month ago | |
| memory-game | 1 month ago | |
| quiz-app | 1 month ago | |
| .co-op-translator.json | 1 day ago | |
| AGENTS.md | 1 day ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 1 day ago | |
| Roadmap.md | 4 weeks ago | |
| SECURITY.md | 1 month ago | |
| SUPPORT.md | 1 month ago | |
| _404.md | 1 month ago | |
| for-teachers.md | 1 month 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 esplora 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 memorizzazione con la nostra efficace pedagogia basata su progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Comunità Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
- Forka il Repository: Clicca su
- Clona il Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Unisciti al Discord di The Azure AI Foundry e incontra esperti e altri sviluppatori
🌐 Supporto Multilingue
Supportato tramite GitHub Action (Automatizzato e sempre aggiornato)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Preferisci clonare localmente?
Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza le traduzioni, usa il sparse checkout:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Ti fornisce tutto il necessario per completare il corso con un download molto più veloce.
Se desideri altre lingue di traduzione, quelle supportate sono elencate qui
🧑🎓 Sei uno studente?
Visita la pagina Student Hub dove troverai risorse per principianti, pacchetti per studenti e anche i modi per ottenere un voucher gratuito per il certificato. Questa è la pagina da aggiungere tra i preferiti e controllare periodicamente poiché i contenuti vengono aggiornati mensilmente.
📣 Annuncio - Nuove sfide Modalità GitHub Copilot Agent da completare!
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, questa non genera solo testo ma può anche creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo Progetto da costruire usando Generative AI
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al progetto
📣 Annuncio - Nuovo Curriculum sulla Generative AI per JavaScript appena pubblicato
Non perdere il nostro nuovo curriculum sulla Generative AI!
Visita https://aka.ms/genai-js-course per iniziare!
- Lezioni che coprono tutto, dalle basi al RAG.
- Interagisci con personaggi storici usando GenAI e la nostra app companion.
- 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:
- Prompt e prompt engineering
- Generazione di app di testo e immagini
- App di ricerca
Visita https://aka.ms/genai-js-course per iniziare!
🌱 Per Iniziare
Insegnanti, abbiamo incluso qualche suggerimento su come usare questo curriculum. Ci piacerebbe avere il vostro feedback nel nostro forum di discussione!
Studenti, per ogni lezione, iniziate con un quiz pre-lezione e continuate leggendo il materiale della lezione, completando le varie attività e verificando la comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme sui progetti! Sono incoraggiate le discussioni nel nostro forum di discussione dove il nostro team di moderatori sarà disponibile a rispondere alle tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare Microsoft Learn per ulteriori materiali di studio.
📋 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 bisogno di installazioni), oppure localmente sul tuo computer usando un editor di testo come Visual Studio Code.
Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia 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:
- Forka il Repository: Clicca sul bottone "Fork" 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 del repository che hai creato, clicca il bottone Code e seleziona Open with Codespaces. Questo creerà un nuovo Codespace dove potrai lavorare.
Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente serve 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 quella che preferisci.
La nostra raccomandazione è di usare Visual Studio Code come editor, che ha anche un Terminale integrato. Puoi scaricare Visual Studio Code qui.
-
Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante Code e copiando l’URL:
Poi, apri Terminal all’interno di Visual Studio Code ed esegui il comando seguente, 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 > Open Folder e selezionando la cartella appena clonata.
Estensioni consigliate di Visual Studio Code:
- Live Server - per visualizzare in anteprima 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 prima della 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
Una nota sui quiz: Tutti i quiz si trovano nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili qui; l’app del quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella
quiz-app.
🗃️ Lezioni
| Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore | |
|---|---|---|---|---|---|
| 01 | Getting Started | Introduzione alla Programmazione e Strumenti del Mestiere | Impara le basi comuni alla maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il loro lavoro | Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere | Jasmine |
| 02 | Getting Started | Nozioni base su GitHub, incluso il lavoro in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | Introduzione a GitHub | Floor |
| 03 | Getting Started | Accessibilità | Impara le basi dell’accessibilità web | Fondamenti di Accessibilità | Christopher |
| 04 | JS Basics | Tipi di Dati JavaScript | Le basi dei tipi di dati in JavaScript | Tipi di Dati | Jasmine |
| 05 | JS Basics | Funzioni e Metodi | Impara su funzioni e metodi per gestire il flusso logico di un’applicazione | Funzioni e Metodi | Jasmine e Christopher |
| 06 | JS Basics | Prendere Decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | Prendere Decisioni | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavora con dati usando array e cicli in JavaScript | Array e Cicli | Jasmine |
| 08 | Terrarium | HTML in Pratica | Costruisci l’HTML per creare un terrario online, focalizzandoti sulla costruzione del layout | Introduzione a HTML | Jen |
| 09 | Terrarium | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la responsività della pagina | Introduzione a CSS | Jen |
| 10 | Terrarium | Chiusure JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | Chiusure JavaScript, manipolazione del DOM | Jen |
| 11 | Typing Game | Costruire un Gioco di Digitazione | Impara a usare eventi da tastiera per guidare la logica della tua app JavaScript | Programmazione Event-Driven | Christopher |
| 12 | Green Browser Extension | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come strutturare i primi elementi di un’estensione del browser | Informazioni sui Browser | Jen |
| 13 | Green Browser Extension | Costruzione di un form, chiamata API e memorizzazione variabili in local storage | Costruisci gli elementi JavaScript della tua estensione per chiamare un’API usando variabili memorizzate nel local storage | API, Form e Local Storage | Jen |
| 14 | Green Browser Extension | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l’icona dell’estensione; impara sulle prestazioni web e alcune ottimizzazioni per migliorare | Attività Background e Prestazioni | Jen |
| 15 | Space Game | Sviluppo di giochi più avanzato con JavaScript | Impara sull’Ereditarietà usando sia Classi che Composizione e sul pattern Pub/Sub, in preparazione per costruire un gioco | Introduzione allo Sviluppo Avanzato di Giochi | Chris |
| 16 | Space Game | Disegnare su canvas | Impara la Canvas API, usata per disegnare elementi su uno schermo | Disegnare su Canvas | Chris |
| 17 | Space Game | Muovere gli elementi sullo schermo | Scopri come gli elementi possono muoversi usando coordinate cartesiane e la Canvas API | Muovere gli Elementi | Chris |
| 18 | Space Game | Rilevamento collisioni | Fai collidere elementi e reagire tra loro usando pressioni di tasti e fornisci una funzione di cooldown per assicurare le prestazioni del gioco | Rilevamento Collisioni | Chris |
| 19 | Space Game | Mantenere il punteggio | Esegui calcoli matematici basati sullo stato e prestazioni del gioco | Mantenere il Punteggio | Chris |
| 20 | Space Game | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | La Condizione di Fine | Chris |
| 21 | Banking App | Template HTML e Routing in un'app web | Impara a creare la struttura architettonica di un sito multipagina usando routing e template HTML | Template HTML e Routing | Yohan |
| 22 | Banking App | Costruire un form di login e registrazione | Impara a costruire form e gestire routine di validazione | Form | Yohan |
| 23 | Banking App | Metodi di Fetching e Uso dei Dati | Come i dati entrano e escono dalla tua app, come recuperarli, salvarli e scartarli | Dati | Yohan |
| 24 | Banking App | 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 usare un editor di codice | Usare VScode Code Editor | Chris |
| 26 | AI Assistants | Lavorare con AI | Impara a costruire il tuo assistente AI | Progetto Assistente AI | Chris |
🏫 Pedagogia
Il nostro curriculum è progettato secondo due principi pedagogici chiave:
- apprendimento basato su progetti
- quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, così come gli strumenti e le tecniche più recenti usati dagli sviluppatori web di oggi. Gli studenti avranno l’opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un’estensione browser ecologica, 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!
Assicurando che il contenuto sia allineato ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della raccolta "Beginners Series to: JavaScript", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a bassa pressione prima di una lezione pone l’intenzione dello studente verso l’apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito integralmente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Sebbene abbiamo volutamente evitato l’introduzione di 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 raccolta di video: "Beginner Series to: Node.js".
Visita le nostre linee guida Codice di Condotta e Contributi. Accogliamo con piacere il tuo feedback costruttivo!
🧭 Accesso offline
Puoi eseguire questa documentazione offline usando Docsify. Fai un fork di questo repo, installa Docsify sulla tua macchina locale, e poi nella cartella principale di questo repo, digita docsify serve. Il sito sarà servito sulla porta 3000 del tuo localhost: localhost:3000.
Un PDF di tutte le lezioni è disponibile qui.
🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un'occhiata:
LangChain
Azure / Edge / MCP / Agents
Serie AI Generativa
Apprendimento Core
Serie Copilot
Ottenere Aiuto
Se rimani bloccato o hai domande sulla creazione di app AI, unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente.
Se hai feedback sul prodotto o incontri errori durante la creazione visita:
Licenza
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file LICENSE per maggiori informazioni.
Avvertenza: Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Pur facendo del nostro meglio per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia la traduzione professionale effettuata da un umano. Non ci assumiamo responsabilità per eventuali malintesi o interpretazioni errate derivanti dall'uso di questa traduzione.


