|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 3 months 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 | 3 months ago | |
| Git-Basics | 4 months ago | |
| docs | 5 months ago | |
| lesson-template | 5 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 5 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 5 months ago | |
| CONTRIBUTING.md | 5 months ago | |
| README.md | 1 week ago | |
| SECURITY.md | 5 months ago | |
| SUPPORT.md | 5 months ago | |
| _404.md | 5 months 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 condotto 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 ritenzione delle conoscenze con la nostra efficace pedagogia basata su progetti. Inizia oggi il tuo percorso di programmazione!
Unisciti alla community Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
- 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 | Kannada | Coreano | Lituano | Malese | Malayalam | Marathi | Nepalese | Pidgin Nigeriano | Norvegese | Persiano (Farsi) | Polacco | Portoghese (Brasile) | Portoghese (Portogallo) | Punjabi (Gurmukhi) | Rumeno | Russo | Serbo (Cirillico) | Slovacco | Sloveno | Spagnolo | Swahili | Svedese | Tagalog (Filippino) | Tamil | Telugu | Tailandese | Turco | Ucraino | Urdu | Vietnamita
Preferisci clonare localmente?
Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa il checkout sparso:
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 ciò che ti serve per completare il corso con un download molto più veloce.
Se desideri avere ulteriori lingue di traduzione 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 gratuito per il certificato. Questa è la pagina che ti consigliamo di aggiungere ai preferiti e controllare di tanto in tanto, poiché aggiorniamo i contenuti 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 utilizzando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, è capace non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo progetto da costruire usando AI Generativa
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al progetto
📣 Annuncio - Nuovo curriculum su AI Generativa per JavaScript appena rilasciato
Non perdere il nostro nuovo curriculum su AI Generativa!
Visita https://aka.ms/genai-js-course per iniziare!
- Lezioni che coprono tutto, dalle basi a RAG.
- Interagisci con personaggi storici usando GenAI e la nostra app companion.
- Narrazione divertente e coinvolgente, faremo viaggi nel tempo!
Ogni lezione include un compito da completare, un controllo della conoscenza e una sfida per guidarti nell’apprendimento di argomenti come:
- Prompt e ingegneria del prompt
- Generazione di app di testo e immagini
- App di ricerca
Visita https://aka.ms/genai-js-course per iniziare!
🌱 Come Iniziare
Insegnanti, abbiamo incluso alcuni suggerimenti su come usare questo curriculum. Ci farebbe piacere 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 verificando la tua comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi coetanei per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro forum di discussione dove il nostro team di moderator sarà disponibile a rispondere alle tue domande.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare Microsoft Learn per materiali di studio aggiuntivi.
📋 Configurazione dell'ambiente
Questo curriculum ha un ambiente di sviluppo pronto all’uso! All’inizio puoi scegliere di eseguirlo in un Codespace (un ambiente basato su browser, senza necessità 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 tua copia di questo repository. Puoi farlo cliccando il pulsante Usa questo modello in alto alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
- Fork del Repository: Clicca sul pulsante "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 creata, clicca il pulsante Code e seleziona Open with Codespaces. Questo creerà un nuovo Codespace per lavorare.
Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, ti serviranno un editor di testo, un browser e 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 aiutarti a scegliere cosa funziona meglio per te.
La nostra raccomandazione è di usare Visual Studio Code come editor, che include anche un Terminale. Puoi scaricare Visual Studio Code qui.
-
Clona il tuo repository sul computer. Puoi farlo cliccando il pulsante Code e copiando l’URL:
CodeSpace Poi, 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 appena clonata.
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 progetto, 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 da 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 Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore | |
|---|---|---|---|---|---|
| 01 | Iniziare | Introduzione alla Programmazione e Strumenti del Mestiere | Impara le basi che stanno dietro la maggior parte dei linguaggi di programmazione e sui software che aiutano gli sviluppatori professionisti | Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere | Jasmine |
| 02 | Iniziare | Nozioni base di GitHub, incluso lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di 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 su 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 come creare condizioni nel tuo codice usando metodi di decisione | Prendere Decisioni | Jasmine |
| 07 | Fondamenti JS | 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, concentrandoti sul 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 | Closures JavaScript, manipolazione DOM | Costruisci il JavaScript per rendere il terrario funzionante come interfaccia drag/drop, concentrandoti su closures e manipolazione del DOM | Closures JavaScript, manipolazione DOM | Jen |
| 11 | Typing Game | Costruisci un Gioco di Digitazione | Impara a usare eventi da tastiera per gestire la logica della tua app JavaScript | Programmazione Event-Driven | Christopher |
| 12 | Green Browser Extension | Lavorare con Browser | Impara come funzionano i browser, la loro storia, e come creare i primi elementi di un'estensione browser | Informazioni sui Browsers | Jen |
| 13 | Green Browser Extension | Costruire un modulo, chiamare un API e memorizzare variabili in local storage | Costruisci gli elementi JavaScript della tua estensione browser per chiamare un API usando variabili memorizzate localmente | 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 | Attività in Background e Prestazioni | Jen |
| 15 | Space Game | Sviluppo Avanzato di Giochi con JavaScript | Impara l’Ereditarietà usando sia Classi che Composizione e il modello 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 elementi sullo schermo | Scopri come gli elementi possono acquisire movimento usando coordinate cartesiane e la Canvas API | Muovere Elementi | Chris |
| 18 | Space Game | Rilevamento collisioni | Fai scontrare e reagire gli elementi l’uno con l’altro usando keypress e fornisci una funzione di cooldown per garantire le prestazioni del gioco | Rilevamento Collisioni | Chris |
| 19 | Space Game | Tenere il punteggio | Effettua calcoli matematici basati sullo stato e sulle 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 Routing in un’App Web | Impara a creare lo scheletro dell’architettura di un sito multipagina usando routing e template HTML | Template HTML e Routing | Yohan |
| 22 | Banking App | Costruire un modulo di Login e Registrazione | Impara a costruire moduli e gestire routine di validazione | Moduli | Yohan |
| 23 | Banking App | Metodi di Recupero e Utilizzo dei Dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, memorizzarli, e smaltirli | 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 | Usa l’Editor VScode | Chris |
| 26 | AI Assistants | Lavorare con l’AI | Impara a costruire il tuo assistente AI | Progetto Assistente AI | Chris |
🏫 Pedagogia
Il nostro curriculum è progettato su due principi pedagogici chiave:
- apprendimento basato su progetti
- quiz frequenti
Il programma insegna le basi di JavaScript, HTML e CSS, così come gli ultimi strumenti e tecniche usati dagli sviluppatori web odierni. Gli studenti avranno l’opportunità di sviluppare esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un’estensione browser eco-friendly, un gioco 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 un Percorso di Apprendimento su Microsoft Learn!
Assicurando che i contenuti siano allineati con i progetti, il processo diventa più coinvolgente per gli studenti e il mantenimento dei concetti sarà aumentato. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video dalla collezione di tutorial video "Serie per principianti su: JavaScript", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a basso rischio prima della lezione imposta l’intento dello studente verso l’apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura un ulteriore mantenimento. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito completamente o parzialmente. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Sebbene abbiamo volutamente evitato di introdurre framework JavaScript per concentrare l’attenzione 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 su: Node.js".
Visita le nostre linee guida su Codice di Condotta e Contributi. Accogliamo con piacere i tuoi feedback costruttivi!
🧭 Accesso offline
Puoi eseguire questa documentazione offline utilizzando Docsify. Fai un fork di questo repo, installa Docsify sulla tua macchina locale e quindi nella cartella root di questo repo, digita docsify serve. Il sito web 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 / Agenti
Serie AI Generativa
Apprendimento Base
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 errori durante lo sviluppo visita:
Licenza
Questo repository è concesso in licenza secondo la licenza MIT. Consulta il file LICENSE per maggiori informazioni.
Disclaimer: Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Pur impegnandoci per 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 raccomanda una traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.


