|
|
2 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 months ago | |
| 2-js-basics | 4 months ago | |
| 3-terrarium | 4 months ago | |
| 4-typing-game | 4 months ago | |
| 5-browser-extension | 4 months ago | |
| 6-space-game | 4 months ago | |
| 7-bank-project | 4 months ago | |
| 8-code-editor/1-using-a-code-editor | 4 months ago | |
| 9-chat-project | 4 months ago | |
| 10-ai-framework-project | 4 months ago | |
| Git-Basics | 4 months ago | |
| docs | 4 months ago | |
| lesson-template | 2 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 4 months ago | |
| .co-op-translator.json | 2 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 4 months ago | |
| CONTRIBUTING.md | 4 months ago | |
| README.md | 2 months ago | |
| Roadmap.md | 4 months ago | |
| SECURITY.md | 4 months ago | |
| SUPPORT.md | 4 months ago | |
| _404.md | 4 months ago | |
| for-teachers.md | 4 months ago | |
README.md
Sviluppo Web per Principianti - Un Curriculum
Impara i fondamenti dello sviluppo web con il nostro corso completo di 12 settimane tenuto 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 abilità e ottimizza la ritenzione della conoscenza con la nostra pedagogia efficace basata su progetti. Inizia oggi il tuo percorso di programmazione!
Unisciti al Discord di Azure AI Foundry e incontra esperti e sviluppatori.
Segui questi passaggi per iniziare a usare queste risorse:
- Forka il 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, Macau) | Cinese (Tradizionale, Taiwan) | Croato | Ceco | Danese | Olandese | Estone | Finlandese | Francese | Tedesco | Greco | Ebraico | Hindi | Ungherese | Indonesiano | Italiano | Giapponese | Kannada | Khmer | 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 | Thailandese | Turco | Ucraino | Urdu | Vietnamita
Preferisci clonare localmente?
Questo repository include più di 50 traduzioni che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa lo 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"Questo ti fornisce tutto il necessario per completare il corso con un download molto più veloce.
Se desideri traduzioni aggiuntive, 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 gratuito per il certificato. Questa è la pagina da aggiungere ai preferiti e consultare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente.
📣 Annuncio - Nuove sfide in 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 prima, essa non si limita a generare testo, ma può anche creare e modificare file, eseguire comandi e altro.
📣 Annuncio - Nuovo progetto da costruire usando l'IA Generativa
Nuovo progetto AI Assistant appena aggiunto, dai un'occhiata progetto
📣 Annuncio - Nuovo curriculum sull’IA Generativa per JavaScript è stato appena rilasciato
Non perdere il nostro nuovo curriculum sull’IA 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.
- Narrativa divertente e coinvolgente, viaggerai nel tempo!
Ogni lezione include un compito da completare, un controllo della conoscenza 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!
🌱 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 didattico, completando le varie attività e verificando la comprensione con il quiz post-lezione.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi pari per lavorare insieme ai progetti! Le discussioni sono incoraggiate nel nostro forum di discussione dove il nostro team di moderatori sarà disponibile a rispondere alle tue domande.
Per approfondire ulteriormente, ti consigliamo di esplorare Microsoft Learn per materiali di studio aggiuntivi.
📋 Configurare l’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 installazioni necessarie), 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 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" 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, clicca il pulsante Code e seleziona Apri con 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 linea 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 per selezionare ciò che funziona meglio per te.
La nostra raccomandazione è di usare Visual Studio Code come editor, che include anche un Terminale integrato. Puoi scaricare Visual Studio Code qui.
-
Clona il tuo repository sul computer. Puoi farlo cliccando il pulsante Code e copiando l'URL:
Poi, apri il Terminal 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 > Open Folder e selezionando la cartella appena clonata.
Estensioni consigliate di Visual Studio Code:
- Live Server - per visualizzare 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 prima della lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- verifiche di conoscenza
- una sfida
- lettura supplementare
- 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 del 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 | Iniziando | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi alla base della maggior parte dei linguaggi di programmazione e il software che aiuta gli sviluppatori professionisti a fare il loro lavoro | Introduzione ai Linguaggi di Programmazione e Strumenti del Mestiere | Jasmine |
| 02 | Iniziando | Nozioni di base di GitHub, inclusa la collaborazione in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | Introduzione a GitHub | Floor |
| 03 | Iniziando | Accessibilità | Impara le basi dell'accessibilità web | Fondamenti di Accessibilità | Christopher |
| 04 | Basi di JS | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | Tipi di Dati | Jasmine |
| 05 | Basi di 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 | Basi di JS | Fare decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | Prendere decisioni | Jasmine |
| 07 | Basi di JS | Array e Cicli | Lavora con i 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 di un layout | Introduzione a HTML | Jen |
| 09 | Terrarium | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, focalizzandoti sulle basi di CSS incluso il rendere la pagina responsive | Introduzione a CSS | Jen |
| 10 | Terrarium | Chiusure in JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, focalizzandoti su chiusure e manipolazione del DOM | Chiusure in JavaScript, manipolazione del DOM | Jen |
| 11 | Typing Game | Costruire un Gioco di Digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | Programmazione Event-Driven | Christopher |
| 12 | Estensione Browser Verde | Lavorare con i Browser | Impara come funzionano i browser, la loro storia e come strutturare i primi elementi di un'estensione per browser | Informazioni sui Browser | Jen |
| 13 | Estensione Browser Verde | Costruire un modulo, chiamare un'API e memorizzare variabili in memoria locale | Costruisci gli elementi JavaScript della tua estensione per browser per chiamare un'API usando variabili memorizzate in memoria locale | API, Moduli e Memoria Locale | Jen |
| 14 | Estensione Browser Verde | 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à in background e prestazioni | Jen |
| 15 | Gioco Spaziale | Sviluppo avanzato di giochi con JavaScript | Impara l'ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione per costruire un gioco | Introduzione allo Sviluppo Avanzato di Giochi | Chris |
| 16 | Gioco Spaziale | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su schermo | Disegnare su Canvas | Chris |
| 17 | Gioco Spaziale | Muovere elementi intorno allo schermo | Scopri come gli elementi possono acquisire movimento usando le coordinate cartesiane e l'API Canvas | Spostare Elementi | Chris |
| 18 | Gioco Spaziale | Rilevamento collisioni | Fai collidere gli elementi e fai 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 | 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 pulire le risorse e resettare i valori delle variabili | La Condizione di Fine | Chris |
| 21 | App Bancaria | 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 | App Bancaria | Costruire un modulo di Login e Registrazione | Impara a costruire moduli e gestire routine di validazione | Moduli | Yohan |
| 23 | App Bancaria | Metodi per recuperare e usare dati | Come i dati fluiscono dentro e fuori dalla tua app, come recuperarli, conservarli e smaltirli | 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 | 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 l'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 i fondamenti di JavaScript, HTML e CSS, così come gli strumenti e le tecniche più recenti 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 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 un Percorso di Apprendimento su Microsoft Learn!
Assicurando che i contenuti siano allineati ai progetti, il processo è reso più coinvolgente per gli studenti e la ritenzione dei concetti sarà aumentata. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione "Beginners Series to: JavaScript", alcuni dei cui autori hanno contribuito a questo curriculum.
Inoltre, un quiz a bassa pressione prima della lezione stabilisce l'intento dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura ulteriore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano piccoli e diventano sempre più complessi verso la fine del ciclo di 12 settimane.
Mentre abbiamo 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: "Beginner Series to: Node.js".
Visita le nostre linee guida Codice di Condotta e Contributi. Accogliamo con favore il tuo feedback costruttivo!
🧭 Accesso offline
Puoi eseguire questa documentazione offline usando Docsify. Forka 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 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:
LangChain
Azure / Edge / MCP / Agents
Series AI Generativa
Apprendimento Base
Serie Copilot
Ottenere Aiuto
Se rimani bloccato o hai domande sulla creazione di app AI. Unisciti a studenti 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. Vedi il file LICENSE per maggiori informazioni.
Disclaimer: Questo documento è stato tradotto utilizzando il servizio di traduzione AI 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 consiglia una traduzione professionale umana. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.


