|
|
4 weeks 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 | 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 | 4 weeks ago | |
| AGENTS.md | 4 weeks ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.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 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 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 all'Azure AI Foundry Discord e incontra esperti e sviluppatori
🌐 Supporto Multilingue
Supportato tramite GitHub Action (Automatico 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) | Panjabi (Gurmukhi) | Rumeno | Russo | Serbo (Cirillico) | Slovacco | Sloveno | Spagnolo | Swahili | Svedese | Tagalog (Filippino) | Tamil | Telugu | Thai | Turco | Ucraino | Urdu | Vietnamita
Preferisci clonare localmente?
Questo repository include più di 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza le traduzioni, usa il 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 fornisce tutto il necessario per completare il corso con un download molto più veloce.
Se desideri che vengano supportate altre 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 consigliamo di salvare tra i preferiti e controllare di tanto in tanto poiché i contenuti vengono aggiornati mensilmente.
📣 Annuncio - Nuove sfide con GitHub Copilot Agent mode da completare!
Nuova sfida aggiunta, cerca la "Sfida GitHub Copilot Agent 🚀" nella maggior parte dei capitoli. È una nuova sfida per te da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, questa è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo progetto da costruire usando l'Intelligenza Artificiale Generativa
Nuovo progetto AI Assistant appena aggiunto, dagli un'occhiata progetto
📣 Annuncio - Nuovo Curriculum su Intelligenza Artificiale Generativa per JavaScript appena rilasciato
Non perdere il nostro nuovo curriculum sull’Intelligenza Artificiale Generativa!
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:
- Prompting e prompt engineering
- 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 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 proseguite leggendo il materiale della lezione, completando le varie attività e verificando la vostra comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni per lavorare insieme ai 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 ulteriormente la tua istruzione, ti consigliamo vivamente di esplorare Microsoft Learn per materiali di studio aggiuntivi.
📋 Configurare il tuo ambiente
Questo curriculum ha un ambiente di sviluppo già 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 utilizzando un editor di testo come Visual Studio Code.
Crea il tuo repository
Per salvare facilmente il tuo lavoro, ti consigliamo di creare una tua copia 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 passi:
- 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 il pulsante 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 sul tuo computer, avrai bisogno di un editor di testo, un browser e uno strumento da linea di comando. La nostra prima lezione, Introduzione ai linguaggi di programmazione e agli strumenti del mestiere, ti guiderà attraverso varie opzioni per ognuno di questi strumenti per selezionare 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 tuo computer. Puoi fare questo cliccando sul pulsante Code e copiando l’URL:
CodeSpace Quindi, apri il Terminale 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 > 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 per 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, in totale 48 quiz da tre domande ciascuno. Sono disponibili qui, l'app per i 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 | Getting Started | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi che stanno alla base della maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a fare il proprio lavoro | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | Basi di GitHub, include lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | Intro to GitHub | Floor |
| 03 | Getting Started | Accessibilità | Impara le basi dell'accessibilità web | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | Data Types | Jasmine |
| 05 | JS Basics | Funzioni e Metodi | Impara sulle funzioni e metodi per gestire il flusso logico di un'applicazione | Functions and Methods | Jasmine e Christopher |
| 06 | JS Basics | Prendere decisioni con JS | Impara come creare condizioni nel tuo codice usando metodi decisionali | Making Decisions | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML in pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla costruzione del layout | Introduction to HTML | Jen |
| 09 | Terrarium | CSS in pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la creazione di pagine reattive | Introduction to CSS | Jen |
| 10 | Terrarium | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Costruisci un gioco di digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | Event-Driven Programming | 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 | About Browsers | 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 | APIs, Forms, and 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 | Background Tasks and Performance | Jen |
| 15 | Space Game | Sviluppo giochi avanzato con JavaScript | Impara sull'ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione alla costruzione di un gioco | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Disegnare su canvas | Impara sull'API Canvas, usata per disegnare elementi su uno schermo | Drawing to Canvas | Chris |
| 17 | Space Game | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi usando le coordinate cartesiane e l'API Canvas | Moving Elements Around | Chris |
| 18 | Space Game | Rilevamento collisioni | Fai collidere gli elementi e reagire tra loro usando keypress e fornisci una funzione di cooldown per assicurare le prestazioni del gioco | Collision Detection | Chris |
| 19 | Space Game | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | Keeping Score | 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 | The Ending Condition | Chris |
| 21 | Banking App | Template HTML e Routes in un'app web | Impara a creare la struttura dell'architettura di un sito multipagina usando routing e template HTML | HTML Templates and Routes | Yohan |
| 22 | Banking App | Costruire un modulo di login e registrazione | Impara a costruire form e a gestire le routine di validazione | Forms | Yohan |
| 23 | Banking App | Metodi di recupero e uso dei dati | Come i dati entrano e escono dalla tua app, come recuperarli, memorizzarli e eliminarli | Data | Yohan |
| 24 | Banking App | Concetti di gestione dello stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | State Management | Yohan |
| 25 | Browser/VScode Code | Lavorare con VScode | Impara a usare un editor di codice | Use VScode Code Editor | Chris |
| 26 | AI Assistants | Lavorare con AI | Impara a costruire il tuo assistente AI | AI Assistant project | 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, così come gli ultimi strumenti e tecniche usati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser eco-friendly, un gioco in stile space-invader e un'app bancaria per le imprese. 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!
Garantendo che il contenuto sia allineato con i progetti, il processo diventa più coinvolgente per gli studenti e si aumenta la ritenzione dei concetti. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione "Beginners Series to: JavaScript" di tutorial video, 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 una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Sebbene abbiamo evitato volutamente di introdurre framework JavaScript per concentrarci sulle abilità 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 per il Codice di Condotta e il Contributo. Accogliamo con piacere i tuoi feedback costruttivi!
🧭 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 radice 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 / Agents
Serie AI Generativa
Apprendimento di Base
Serie Copilot
Ottenere Aiuto
Se ti blocchi 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 i termini della licenza MIT. Consulta il file LICENSE per maggiori informazioni.
Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua natìa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia la traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.


