|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 1 week ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 1 week ago | |
| Git-Basics | 1 week ago | |
| docs | 1 week ago | |
| lesson-template | 1 week ago | |
| memory-game | 1 week ago | |
| quiz-app | 1 week ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 1 week ago | |
| CONTRIBUTING.md | 1 week ago | |
| README.md | 1 week ago | |
| SECURITY.md | 1 week ago | |
| SUPPORT.md | 1 week ago | |
| _404.md | 1 week ago | |
| for-teachers.md | 1 week ago | |
README.md
Sviluppo Web per Principianti - Un Curriculum
Impara le basi dello sviluppo web con il nostro corso completo di 12 settimane dei 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 memorizzazione delle conoscenze con la nostra efficace pedagogia basata sui progetti. Inizia oggi il tuo viaggio nella programmazione!
Unisciti alla Comunità Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
- Forka il Repository: Clicca
- Clona il Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Unisciti a The Azure AI Foundry Discord e incontra esperti e altri sviluppatori
🌐 Supporto Multi-Lingua
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 in Locale?
Questo repository include più di 50 traduzioni di lingua che aumentano significativamente la dimensione del download. Per clonare senza le traduzioni, usa lo sparse checkout:
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'Questo ti permette di avere tutto il necessario per completare il corso con un download molto più veloce.
Se desideri che vengano supportate ulteriori lingue di traduzione, sono elencate qui
🧑🎓 Sei uno studente?
Visita la pagina Student Hub dove troverai risorse per principianti, pacchetti per studenti e anche modi per ottenere un voucher gratuito per il certificato. Questa è la pagina che ti conviene aggiungere ai preferiti e consultare di tanto in tanto, perché i contenuti vengono aggiornati mensilmente.
📣 Annuncio - Nuove sfide GitHub Copilot Agent mode 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 prima d'ora, essa è capace non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo progetto da realizzare con Generative AI
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al progetto
📣 Annuncio - Nuovo curriculum su Generative AI per JavaScript appena rilasciato
Non perdere il nostro nuovo curriculum su Generative AI!
Visita https://aka.ms/genai-js-course per iniziare!
- Lezioni che coprono tutto dalle basi fino a 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 test delle conoscenze e una sfida per guidarti nell'apprendimento di argomenti come:
- Prompt e ingegneria dei prompt
- Generazione di app di testo e immagini
- App di ricerca
Visita https://aka.ms/genai-js-course per iniziare!
🌱 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, iniziate con un quiz pre-lezione e proseguite leggendo il materiale della lezione, completando le varie attività e controllando la vostra comprensione con il quiz post-lezione.
Per migliorare la vostra esperienza di apprendimento, connettetevi con i vostri pari per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro forum di discussione dove il nostro team di moderatori sarà disponibile a rispondere alle vostre domande.
Per approfondire lo studio, vi consigliamo vivamente di esplorare Microsoft Learn per ulteriori materiali di studio.
📋 Configurare l’ambiente
Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizierai puoi scegliere di eseguire il curriculum in un Codespace (un ambiente basato su browser che non richiede installazioni), oppure localmente sul tuo computer utilizzando un editor di testo come Visual Studio Code.
Crea il tuo repository
Per salvare facilmente il tuo lavoro, si consiglia di creare una copia personale di questo repository. Puoi farlo cliccando sul pulsante Usa questo modello in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
- Forka il Repository: Clicca sul pulsante "Fork" in alto a destra in 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 potrai lavorare.
Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, di un browser e di uno strumento da linea di comando. La nostra prima lezione, Introduzione ai Linguaggi di Programmazione e Strumenti del mestiere, ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per permetterti di scegliere ciò che funziona meglio per te.
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:
CodeSpace Quindi, apri il 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 anteprima delle 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 di conoscenza
- una sfida
- letture supplementari
- compito
- quiz post-lezione
Una nota sui quiz: Tutti i quiz sono contenuti nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili qui, 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 | Iniziare | Introduzione alla programmazione e strumenti del mestiere | Imparare le basi alla base della maggior parte dei linguaggi di programmazione e dei software che aiutano gli sviluppatori professionisti nel loro lavoro | Introduzione ai linguaggi di programmazione e strumenti del mestiere | Jasmine |
| 02 | Iniziare | Nozioni di base su GitHub, incluso il lavoro di squadra | Come usare GitHub nel tuo progetto, come collaborare con altri su un codice | Introduzione a GitHub | Floor |
| 03 | Iniziare | 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 a conoscere funzioni e 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 usando metodi di decisione | Prendere decisioni | Jasmine |
| 07 | Fondamenti JS | Array e Cicli (Loops) | 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, concentrandoti 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 incluso rendere la pagina responsive | Introduzione a CSS | Jen |
| 10 | Terrarium | Closure di JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su closure e manipolazione DOM | Closure di JavaScript, manipolazione DOM | Jen |
| 11 | Typing Game | Creare un gioco di digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | Programmazione basata su eventi | 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 di browser | Informazioni sui browser | Jen |
| 13 | Green Browser Extension | Costruire un modulo, chiamare un'API e memorizzare variabili nello storage locale | Costruisci gli elementi JavaScript della tua estensione browser per chiamare un'API usando variabili memorizzate nello storage locale | API, moduli e storage locale | 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 le prestazioni web e alcune ottimizzazioni per migliorare | Attività in background e prestazioni | Jen |
| 15 | Space Game | Sviluppo di giochi più avanzato con JavaScript | Impara l'Ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | Introduzione allo sviluppo di giochi avanzati | Chris |
| 16 | Space Game | Disegnare sul canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | Disegnare su Canvas | Chris |
| 17 | Space Game | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi usando le coordinate cartesiane e l'API Canvas | Muovere elementi | Chris |
| 18 | Space Game | Rilevamento collisioni | Fai collidere gli elementi e reagire l'uno all'altro usando pressioni di tasti e fornisci una funzione di cooldown per garantire le prestazioni del gioco | Rilevamento collisioni | Chris |
| 19 | Space Game | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e le prestazioni del gioco | Tenere il punteggio | Chris |
| 20 | Space Game | Terminare e riavviare il gioco | Impara a terminare e riavviare il gioco, incluso pulire le risorse e resettare i valori delle variabili | Condizione di fine | Chris |
| 21 | Banking App | Template HTML e rotte in un'app web | Impara a creare la struttura architettonica di un sito web multipagina usando routing e template HTML | Template HTML e rotte | Yohan |
| 22 | Banking App | Costruire un modulo di accesso e registrazione | Impara a costruire moduli e gestire routine di validazione | Moduli | Yohan |
| 23 | Banking App | Metodi per recuperare e usare dati | Come i dati entrano ed escono dalla tua app, come recuperarli, memorizzarli e rimuoverli | 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 | Codice Browser/VScode | Lavorare con VScode | Impara a usare un editor di codice | Usare l'editor di codice VScode | Chris |
| 26 | Assistenti AI | Lavorare con AI | Impara a costruire il tuo assistente AI | Progetto Assistente AI | Chris |
🏫 Pedagogia
Il nostro curriculum è progettato con due principi pedagogici chiave in mente:
- apprendimento basato su progetti
- quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, oltre agli ultimi strumenti e tecniche usate dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di acquisire esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione del browser ecologica, un gioco in stile space invader e un'app bancaria per le 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 i contenuti siano allineati con i progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo scritto anche diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della raccolta "Serie per Principianti a: JavaScript", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima della lezione prepara 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 in parte. I progetti iniziano in piccolo e diventano sempre più complessi entro la fine del ciclo di 12 settimane.
Sebbene abbiamo deliberatamente 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 raccolta di video: "Serie per Principianti a: Node.js".
Visita le nostre linee guida per il Codice di Condotta e per il Contributo. Accogliamo con favore i tuoi feedback costruttivi!
🧭 Accesso offline
Puoi eseguire questa documentazione offline usando Docsify. Fai il fork di questo repository, installa Docsify sulla tua macchina locale, e poi nella cartella radice di questo repo, digita docsify serve. Il sito sarà servito sulla porta 3000 sul 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:
LangChain
Azure / Edge / MCP / Agents
Serie AI Generativa
Apprendimento Base
Serie Copilot
Ottenere Aiuto
Se resti bloccato o hai domande sulla creazione di app AI, unisciti ad altri apprendenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza è condivisa liberamente.
Se hai feedback sul prodotto o 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 impegnandoci per garantire l’accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua originaria deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un traduttore umano. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.


