Questo è un repository di curriculum educativo per insegnare i fondamenti dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, con 24 lezioni pratiche che coprono JavaScript, CSS e HTML.
Questo è un repository di curriculum educativo per insegnare i fondamenti dello sviluppo web ai principianti. Il curriculum è un corso completo di 12 settimane sviluppato dai Microsoft Cloud Advocates, che propone 24 lezioni pratiche su JavaScript, CSS e HTML.
### Componenti Principali
### Componenti Chiave
- **Contenuti Educativi**: 24 lezioni strutturate organizzate in moduli basati su progetti
- **Progetti Pratici**: Terrarium, Gioco di Scrittura, Estensione per Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
- **Progetti Pratici**: Terrario, Gioco di Digitazione, Estensione Browser, Gioco Spaziale, App Bancaria, Editor di Codice e Assistente Chat AI
Per istruzioni dettagliate sui singoli progetti, consulta i file README in:
- `quiz-app/README.md` - Applicazione quiz Vue 3
- `7-bank-project/README.md` - Applicazione bancaria con autenticazione
- `5-browser-extension/README.md` - Sviluppo di estensioni per browser
- `6-space-game/README.md` - Sviluppo di giochi basati su Canvas
- `5-browser-extension/README.md` - Sviluppo estensione browser
- `6-space-game/README.md` - Sviluppo gioco canvas
- `9-chat-project/README.md` - Progetto assistente chat AI
### Struttura Monorepo
@ -397,10 +397,12 @@ Per istruzioni dettagliate sui singoli progetti, consulta i file README in:
Sebbene non sia un monorepo tradizionale, questo repository contiene più progetti indipendenti:
- Ogni lezione è autonoma
- I progetti non condividono dipendenze
- Lavora su progetti individuali senza influenzare gli altri
- Clona l'intero repository per l'esperienza completa del curriculum
- Lavora su singoli progetti senza influenzare gli altri
- Clona l’intero repo per l’esperienza completa del curriculum
---
**Disclaimer (Avvertenza)**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua madre dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire accuratezza, si prega di notare che le traduzioni automatizzate possono contenere errori o imprecisioni. Il documento originale nella sua lingua originale deve essere considerato la fonte autorevole. Per informazioni critiche si raccomanda una traduzione professionale effettuata da un essere umano. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall’uso di questa traduzione.
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!
Impara le basi 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 competenze e ottimizza la ritenzione delle conoscenze con la nostra efficace metodologia basata su progetti. Inizia oggi il tuo percorso di coding!
Unisciti alla Comunità Discord di Azure AI Foundry
Unisciti alla Community Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Forka il Repository**: Clicca [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Segui questi passaggi per iniziare a usare queste risorse:
1. **Effettua il Fork del Repository**: Clicca [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Unisciti a The Azure AI Foundry Discord e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
3. [**Unisciti alla Azure AI Foundry Discord e incontra esperti e altri sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Supporto Multi-Lingua
### 🌐 Supporto Multilingua
#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
> 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:
> Questo repository include oltre 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza traduzioni, usa il sparse checkout:
> 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.
> Questo ti darà tutto ciò che ti serve per completare il corso con un download molto più veloce.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desideri che vengano supportate ulteriori lingue di traduzione, sono elencate [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desideri che vengano supportate ulteriori lingue di traduzione, troverai l’elenco [qui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Sei uno studente?_
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 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.
Visita la [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dove troverai risorse per principianti, pacchetti per studenti e anche modi per ottenere un voucher gratuito per il certificato. Questa è la pagina che vuoi aggiungere ai preferiti e consultare di tanto in tanto, poiché i contenuti vengono aggiornati mensilmente.
### 📣 Annuncio - Nuove sfide GitHub Copilot Agent mode da completare!
### 📣 Annuncio - Nuove sfide per la 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 d'ora, essa è capace non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
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, essa è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
### 📣 Annuncio - _Nuovo progetto da realizzare con Generative AI_
### 📣 Annuncio - _Nuovo progetto da costruire utilizzando l’IA Generativa_
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md)
Nuovo progetto AI Assistant appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md)
### 📣 Annuncio - _Nuovo curriculum_ su Generative AI per JavaScript appena rilasciato
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
Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell’apprendimento di argomenti come:
- Prompting e ingegneria dei prompt
- Generazione di app testuali e di immagini
- App di ricerca
Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) per iniziare!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
## 🌱 Iniziare
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come utilizzare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Insegnanti**, abbiamo [incluso alcuni suggerimenti](for-teachers.md) su come usare questo curriculum. Ci piacerebbe ricevere il vostro feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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.
**[Studenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, per ogni lezione, iniziate con un quiz pre-lezione, seguite leggendo il materiale della lezione, completate le varie attività e verificate 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](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile a rispondere alle vostre domande.
Per migliorare la tua esperienza di apprendimento, connettiti con i tuoi compagni di corso per lavorare insieme sui progetti! Le discussioni sono incoraggiate nel nostro [forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dove il nostro team di moderatori sarà disponibile per rispondere alle tue domande.
Per approfondire lo studio, vi consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per ulteriori materiali di studio.
Per approfondire la tua formazione, ti consigliamo vivamente di esplorare [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) per materiali di studio aggiuntivi.
### 📋 Configurare l’ambiente
### 📋 Configura il tuo ambiente
Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizierai puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser che non richiede installazioni_), oppure localmente sul tuo computer utilizzando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Questo curriculum ha un ambiente di sviluppo pronto all’uso! Quando inizi puoi scegliere di eseguire il curriculum in un [Codespace](https://github.com/features/codespaces/) (_un ambiente basato su browser, senza necessità di installazioni_), oppure localmente sul tuo computer usando un editor di testo come [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
Per salvare facilmente il tuo lavoro, è consigliato 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 passaggi:
1. **Forka il Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
1. **Effettua il Fork del Repository**: Clicca sul pulsante "Fork" in alto a destra di questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il curriculum in un Codespace
#### Esecuzione del 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.
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 lavorare.
#### Eseguire il curriculum localmente sul tuo computer
#### Esecuzione del 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](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti per permetterti di scegliere ciò che funziona meglio per te.
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](../../1-getting-started-lessons/1-intro-to-programming-languages), ti guiderà attraverso varie opzioni per ciascuno di questi strumenti in modo che tu possa scegliere ciò che funziona meglio per te.
La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che ha anche un [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrato. Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
La nostra raccomandazione è di utilizzare [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) come editor, che include anche un [Terminale integrato](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puoi scaricare Visual Studio Code [qui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l’URL:
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l'URL:
[CodeSpace](./images/createcodespace.png)
Quindi, apri il [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
Quindi, apri [Terminale](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) all'interno di [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ed esegui il seguente comando, sostituendo `<your-repository-url>` con l'URL appena copiato:
```bash
git clone <your-repository-url>
```
2. Apri la cartella in Visual Studio Code. Puoi farlo cliccando su **File** > **Apri cartella** e selezionando la cartella che hai appena clonato.
2. 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per anteprima delle pagine HTML all'interno di Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - per visualizzare in anteprima pagine HTML all'interno di Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - per aiutarti a scrivere codice più velocemente
## 📂 Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- quiz preparatorio alla lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- verifiche di conoscenza
- per le lezioni basate su progetti, guide passo passo su come realizzare il progetto
> **Una nota sui quiz**: Tutti i quiz sono contenuti nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/), l'app dei quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
> **Una nota sui quiz**: tutti i quiz si trovano nella cartella Quiz-app, 48 quiz totali di tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/). 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](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Iniziare | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenti di accessibilità](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fondamenti JS | Tipi di dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Tipi di dati](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fondamenti JS | Funzioni e Metodi | Impara a conoscere funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fondamenti JS | Prendere decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi di decisione | [Prendere decisioni](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fondamenti JS | Array e Cicli (Loops) | Lavora con dati usando array e cicli in JavaScript | [Array e Cicli](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla costruzione del layout | [Introduzione a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS incluso rendere la pagina responsive | [Introduzione a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Creare un gioco di digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua app JavaScript | [Programmazione basata su eventi](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 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](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare sul canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | [Disegnare su Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi usando le coordinate cartesiane e l'API Canvas | [Muovere elementi](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e le prestazioni del gioco | [Tenere il punteggio](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | 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](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | 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](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un modulo di accesso e registrazione | Impara a costruire moduli e gestire routine di validazione | [Moduli](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi per recuperare e usare dati | Come i dati entrano ed escono dalla tua app, come recuperarli, memorizzarli e rimuoverli | [Dati](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di gestione dello stato | Impara come la tua app mantiene lo stato e come gestirlo programmaticamente | [Gestione dello stato](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Codice Browser/VScode](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice| [Usare l'editor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistenti AI](./9-chat-project/README.md) | Lavorare con AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
| | Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Getting Started | Introduzione alla Programmazione e Strumenti del Mestiere | Imparare i fondamenti di base della maggior parte dei linguaggi di programmazione e del software che aiuta gli sviluppatori | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Nozioni base di GitHub, compreso lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibilità | Imparare le basi dell'accessibilità web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Tipi di Dati in JavaScript | Le basi dei tipi di dati in JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funzioni e Metodi | Impara a conoscere funzioni e metodi per gestire il flusso logico di un'applicazione | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Prendere decisioni con JS | Impara a creare condizioni nel tuo codice usando metodi decisionali | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Array e Cicli | Lavora con i dati usando array e cicli in JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione del layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per stilizzare il terrario online, concentrandoti sulle basi del CSS inclusa la realizzazione di una pagina responsiva | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure in JavaScript, manipolazione del DOM | Costruisci il JavaScript per far funzionare il terrario come interfaccia drag/drop, concentrandoti su closure e manipolazione del DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruire un gioco di digitazione | Impara a usare eventi da tastiera per guidare la logica dell'app JavaScript | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lavorare con i Browser | Impara come funzionano i browser, la loro storia, e come strutturare i primi elementi di un'estensione browser | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Costruire un form, chiamare un'API e memorizzare variabili in local storage | Costruisci gli elementi JavaScript dell'estensione browser per chiamare un'API usando variabili memorizzate in local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processi in background nel browser, prestazioni web | Usa i processi in background del browser per gestire l'icona dell'estensione; impararesulle prestazioni web e alcune ottimizzazioni per migliorare | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Sviluppo di giochi avanzato con JavaScript | Impara l'Ereditarietà usando sia Classi che Composizione e il modello Pub/Sub, in preparazione alla costruzione di un gioco | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Impara l'API Canvas, usata per disegnare elementi su uno schermo | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Spostare elementi sullo schermo | Scopri come gli elementi possono ottenere movimento usando coordinate cartesiane e l'API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Rilevamento collisioni | Fai collidere gli elementi e reagire tra di loro usando i tasti premuti e fornisci una funzione di cooldown per assicurare le prestazioni del gioco | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tenere il punteggio | Esegui calcoli matematici basati sullo stato e sulle prestazioni del gioco | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminare e riavviare il gioco | Impara come terminare e riavviare il gioco, inclusa la pulizia delle risorse e il reset dei valori delle variabili | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML e Routing in un'app web | Impara a creare la struttura architettonica di un sito multipagina usando routing e template HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un form di Login e Registrazione | Impara a costruire form e gestire routine di validazione | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi per recuperare e usare dati | Come i dati entrano ed escono dalla tua app, come recuperarli, conservarli e smaltirli | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concetti di gestione dello stato | Impara come la tua app conserva lo stato e come gestirlo programmativamente | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lavorare con VScode | Impara a usare un editor di codice| [Usa l’editor di codice VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con l’AI | Impara a costruire il tuo assistente AI | [Progetto Assistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
@ -184,36 +184,36 @@ 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.
Il programma insegna le basi di JavaScript, HTML e CSS, così come gli strumenti più recenti e le tecniche usate 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 invaders 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](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) su Microsoft Learn!
> 🎓 Puoi seguire le prime lezioni di questo curriculum come un [Percorso di Apprendimento](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 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](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alcuni dei cui autori hanno contribuito a questo curriculum.
Garantendo che i contenuti siano allineati ai progetti, il processo diventa più coinvolgente per gli studenti e la ritenzione dei concetti aumenterà. Abbiamo anche scritto alcune lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione di tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", 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.
Inoltre, un quiz a bassa pressione prima di una lezione stabilisce l'intenzione dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti partono piccoli e diventano progressivamente 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Pur avendo volutamente evitato di introdurre framework JavaScript per concentrare l'attenzione sulle competenze di base necessarie come sviluppatore web prima di adottare un framework, una buona fase successiva per completare questo curriculum sarebbe imparare Node.js tramite un'altra raccolta di video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita le nostre linee guida per il [Codice di Condotta](CODE_OF_CONDUCT.md) e per il [Contributo](CONTRIBUTING.md). Accogliamo con favore i tuoi feedback costruttivi!
> Consulta il nostro [Codice di Condotta](CODE_OF_CONDUCT.md) e le linee guida su [Come Contribuire](CONTRIBUTING.md). Accogliamo con piacere il tuo feedback costruttivo!
## 🧭 Accesso offline
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai il fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) 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`.
Puoi eseguire questa documentazione offline usando [Docsify](https://docsify.js.org/#/). Fai il fork di questo repository, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repository, digita `docsify serve`. Il sito sarà servito sulla porta 3000 sul tuo localhost: `localhost:3000`.
## 📘 PDF
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Altri corsi
Il nostro team produce altri corsi! Dai un'occhiata:
## 🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un'occhiata a:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -224,7 +224,7 @@ Il nostro team produce altri corsi! Dai un'occhiata:
---
### Serie AI Generativa
### Serie Intelligenza Artificiale Generativa
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -232,7 +232,7 @@ Il nostro team produce altri corsi! Dai un'occhiata:
---
### Apprendimento Base
### Apprendimento di Base
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,11 +251,11 @@ Il nostro team produce altri corsi! Dai un'occhiata:
## 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 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.
@ -266,6 +266,6 @@ Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avvertenza**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/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.
**Disclaimer**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si prega di considerare che le traduzioni automatiche possono contenere errori o imprecisioni. 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 ci assumiamo alcuna responsabilità per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.
# Roadmap per il repository Web-Dev-For-Beginners di Microsoft
**Questo repository fornisce una roadmap per imparare le basi dello sviluppo web con un focus su JavaScript, HTML e CSS. Il curriculum è flessibile e può essere seguito nella sua interezza o in parte, con 24 lezioni distribuite su 12 settimane.**
## Traguardi principali
* **Settimane 1-3:**
* Introduzione ai linguaggi di programmazione e agli strumenti del mestiere
* Nozioni di base su GitHub
* Accessibilità
* Basi di JS: tipi di dati, funzioni e metodi
* Prendere decisioni con JS
* **Settimane 4-6:**
* Array e loop
* Terrarium: HTML in pratica
* CSS in pratica
* Chiusure in JavaScript
* Manipolazione del DOM
* **Settimane 7-9:**
* Typing Game: programmazione basata sugli eventi
* Green Browser Extension: lavorare con i browser
* Costruire un modulo, chiamare un’API e memorizzare variabili nello storage locale
* Processi in background nel browser
* Prestazioni web
* **Settimane 10-12:**
* Space Game: sviluppo gioco più avanzato con JavaScript
* Disegnare su canvas
* Spostare elementi sullo schermo
* Rilevamento delle collisioni
* Tenere il punteggio, terminare e riavviare il gioco
* Banking App: template HTML e rotte in una web app
* Costruire un modulo di login e registrazione
* Metodi per recuperare e utilizzare dati
* Concetti di gestione dello stato
## Risultati di apprendimento
**Completando questa roadmap, gli studenti acquisiranno esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un’estensione browser ecologica, un gioco in stile space invader e una app bancaria per le imprese. Svilupperanno inoltre una solida comprensione delle basi dello sviluppo web.**
## Risorse aggiuntive
* Questo repository offre un’ampia gamma di risorse per un ulteriore apprendimento, inclusi tutorial, esempi di codice e sfide.
* La piattaforma Microsoft Learn offre vari corsi di sviluppo web e percorsi di apprendimento.
* Comunità online come Stack Overflow e MDN Web Docs forniscono supporto e risorse preziose per sviluppatori web.
**Spero che questa roadmap ti sia d’aiuto nel tuo percorso di sviluppo web!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avvertenza**:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si segnala che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale effettuata da un umano. Non ci assumiamo responsabilità per eventuali fraintendimenti o interpretazioni errate derivanti dall’uso di questa traduzione.
Este é um repositório de currículo educacional para ensinar fundamentos de desenvolvimento web a iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas que abordam JavaScript, CSS e HTML.
Este é um repositório curricular educacional para ensinar os fundamentos do desenvolvimento web para iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML.
### Componentes Principais
- **Conteúdo Educacional**: 24 aulas estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicativo Bancário, Editor de Código e Assistente de Chat com IA
- **Quizzes Interativos**: 48 quizzes com 3 perguntas cada (avaliações pré/pós-aula)
- **Suporte Multilíngue**: Traduções automáticas para mais de 50 idiomas via GitHub Actions
- Execute a partir do diretório raiz do repositório
- Verifique se `docs/_sidebar.md` existe
### Dicas para Ambiente de Desenvolvimento
- Use VS Code com a extensão Live Server para projetos HTML
- Instale as extensões ESLint e Prettier para formatação consistente
- Use as DevTools do navegador para depurar JavaScript
- Para projetos Vue, instale a extensão Vue DevTools no navegador
- Use VS Code com extensão Live Server para projetos HTML
- Instale as extensões ESLint e Prettier para formatação consistente
- Use DevTools do navegador para depuração de JavaScript
- Para projetos Vue, instale a extensão Vue DevTools no navegador
### Considerações de Desempenho
### Considerações de Performance
- Grande número de arquivos traduzidos (50+ idiomas) significa clones completos grandes
- Use clone superficial se estiver trabalhando apenas no conteúdo: `git clone --depth 1`
- Exclua traduções das buscas ao trabalhar no conteúdo em inglês
- Processos de build podem ser lentos na primeira execução (npm install, build do Vite)
- Grande número de arquivos traduzidos (50+ idiomas) torna clones completos grandes
- Use clone superficial se trabalhar apenas com conteúdo: `git clone --depth 1`
- Exclua traduções das buscas ao trabalhar com conteúdo em inglês
- Processos de build podem ser lentos na primeira execução (npm install, build do Vite)
## Considerações de Segurança
### Variáveis de Ambiente
- Chaves de API nunca devem ser comprometidas no repositório
- Use arquivos `.env` (já em `.gitignore`)
- Documente as variáveis de ambiente necessárias nos READMEs dos projetos
- Chaves API nunca devem ser commitadas no repositório
- Use arquivos `.env` (já no `.gitignore`)
- Documente variáveis de ambiente necessárias nos READMEs dos projetos
### Projetos em Python
### Projetos Python
- Use ambientes virtuais: `python -m venv venv`
- Mantenha as dependências atualizadas
- Tokens do GitHub devem ter permissões mínimas necessárias
- Use ambientes virtuais: `python -m venv venv`
- Mantenha dependências atualizadas
- Tokens GitHub devem ter permissões mínimas necessárias
### Acesso aos Modelos do GitHub
### Acesso aos GitHub Models
- Tokens de Acesso Pessoal (PAT) são necessários para os Modelos do GitHub
- Tokens devem ser armazenados como variáveis de ambiente
- Nunca comprometa tokens ou credenciais
- Tokens de Acesso Pessoal (PAT) são necessários para GitHub Models
- Tokens devem ser armazenados como variáveis de ambiente
- Nunca commit tokens ou credenciais
## Notas Adicionais
### Público-alvo
### Público-Alvo
- Iniciantes completos em desenvolvimento web
- Estudantes e autodidatas
- Professores usando o currículo em salas de aula
- O conteúdo é projetado para acessibilidade e construção gradual de habilidades
- Começantes completos em desenvolvimento web
- Estudantes e autodidatas
- Professores usando o currículo em salas de aula
- Conteúdo projetado para acessibilidade e desenvolvimento gradual de habilidades
### Filosofia Educacional
- Abordagem de aprendizado baseada em projetos
- Verificações frequentes de conhecimento (quizzes)
- Exercícios práticos de codificação
- Exemplos de aplicação no mundo real
- Foco nos fundamentos antes de frameworks
- Aprendizado baseado em projetos
- Verificações frequentes de conhecimento (quizzes)
- Exercícios práticos de codificação
- Exemplos de aplicações do mundo real
- Foco em fundamentos antes de frameworks
### Manutenção do Repositório
- Comunidade ativa de alunos e contribuidores
- Atualizações regulares de dependências e conteúdo
- Issues e discussões monitoradas pelos mantenedores
- Atualizações de tradução automatizadas via GitHub Actions
- Comunidade ativa de aprendizes e colaboradores
- Atualizações regulares em dependências e conteúdo
- Issues e discussões monitoradas por mantenedores
- Atualizações de tradução automatizadas via GitHub Actions
### Recursos Relacionados
- [Módulos do Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para alunos
- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos de IoT disponíveis
- [Módulos Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos do Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: Currículos de IA Generativa, Ciência de Dados, ML, IoT disponíveis
### Trabalhando com Projetos Específicos
Para instruções detalhadas sobre projetos individuais, consulte os arquivos README em:
- `quiz-app/README.md` - Aplicativo de quiz em Vue 3
- `7-bank-project/README.md` - Aplicativo bancário com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas
- `9-chat-project/README.md` - Projeto de assistente de chat com IA
Para instruções detalhadas sobre projetos individuais, veja os arquivos README em:
- `quiz-app/README.md` - Aplicação quiz Vue 3
- `7-bank-project/README.md` - Aplicativo bancário com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em canvas
- `9-chat-project/README.md` - Projeto de assistente de chat AI
### Estrutura de Monorepo
### Estrutura do Monorepo
Embora não seja um monorepo tradicional, este repositório contém vários projetos independentes:
- Cada aula é autônoma
- Projetos não compartilham dependências
- Trabalhe em projetos individuais sem afetar outros
- Clone o repositório inteiro para a experiência completa do currículo
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada aula é autônoma
- Projetos não compartilham dependências
- Trabalhe em projetos individuais sem afetar os outros
- Clone o repositório completo para a experiência curricular completa
---
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, por favor, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas ministrado por Microsoft Cloud Advocates. Cada uma das 24 aulas aborda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aumente suas habilidades e otimize a retenção do conhecimento com nossa pedagógica eficaz baseada em projetos. Comece sua jornada de programação hoje!
Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda-se em JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos no espaço. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje!
Siga estes passos para começar a usar esses recursos:
1. **Faça um Fork do Repositório**: Clique em [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Faça um Fork do Repositório**: Clique em [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
#### Suportado via GitHub Action (Automatizado & Sempre Atualizado)
#### Suportado via GitHub Action (Automatizado e Sempre Atualizado)
> Este repositório inclui mais de 50 traduções de idiomas que aumentam significativamente o tamanho do download. Para clonar sem as traduções, use o checkout esparso:
> Este repositório inclui mais de 50 traduções de idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use o sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Isso fornece tudo que você precisa para completar o curso com um download muito mais rápido.
> Isso te dá tudo o que precisa para completar o curso com um download muito mais rápido.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desejar que idiomas adicionais sejam suportados, veja a lista [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desejar que idiomas adicionais de tradução sejam suportados, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Você é estudante?_
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que você deve favoritar e consultar de tempos em tempos, pois o conteúdo é atualizado mensalmente.
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até maneiras de obter um voucher de certificado gratuito. Esta é a página que você vai querer adicionar aos favoritos e visitar de tempos em tempos, pois atualizamos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios em modo GitHub Copilot Agent para completar!
### 📣 Anúncio - Novos desafios com modo Agente do GitHub Copilot para completar!
Novo desafio adicionado, procure por "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para você completar usando GitHub Copilot e o modo Agent. Se você ainda não usou o modo Agent, ele é capaz não só de gerar texto, mas também de criar e editar arquivos, executar comandos e mais.
Novo desafio adicionado, procure por "Desafio GitHub Copilot Agent 🚀" na maioria dos capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também criar e editar arquivos, executar comandos e mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto Assistente de IA adicionado, confira o [projeto](./9-chat-project/README.md)
Novo projeto Assistente AI acaba de ser adicionado, confira o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado
Não perca nosso novo currículo de IA Generativa!
Não perca nosso novo currículo sobre IA Generativa!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar seu aprendizado sobre temas como:
Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiar seu aprendizado em tópicos como:
- Prompting e engenharia de prompt
- Geração de aplicativos de texto e imagem
- Aplicativos de busca
Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
## 🌱 Começando
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um quiz pré-aula e siga lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula.
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e siga lendo o material da aula, completando as diversas atividades e verifique sua compreensão com o quiz pós-aula.
Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem juntos nos projetos! Discussões são encorajadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder suas perguntas.
Para aprimorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussões](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder às suas perguntas.
Para aprofundar seus estudos, recomendamos fortemente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
Para aprofundar sua educação, recomendamos fortemente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais adicionais de estudo.
### 📋 Configurando seu ambiente
Este currículo já possui um ambiente de desenvolvimento pronto! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado no navegador, sem necessidade de instalação_), ou localmente em seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo já tem o ambiente de desenvolvimento pronto para uso! Ao começar, você pode escolher executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crie seu repositório
Para facilitar salvar seu trabalho, é recomendado que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo.
Para facilitar salvar seu trabalho, recomenda-se que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Usar este modelo** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo.
Siga estes passos:
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
@ -104,13 +104,13 @@ Siga estes passos:
#### Executando o currículo em um Codespace
Na cópia do repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar.
Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isto criará um novo Codespace para você trabalhar.
#### Executando o currículo localmente em seu computador
#### Executando o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira aula, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), irá orientá-lo sobre as várias opções para cada uma dessas ferramentas para você escolher o que funciona melhor.
Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), mostrará várias opções para cada uma dessas ferramentas para você escolher o que funciona melhor.
Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) embutido. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
@ -124,86 +124,86 @@ Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.co
git clone <your-repository-url>
```
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **Arquivo** > **Abrir Pasta** e selecionando a pasta que você acabou de clonar.
2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar.
> Extensões recomendadas para Visual Studio Code:
> Extensões recomendadas para o Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rapidamente
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido
## 📂 Cada aula inclui:
## 📂 Cada lição inclui:
- esboço opcional
- sketchnote opcional
- vídeo suplementar opcional
- questionário de aquecimento pré-aula
- aula escrita
- para aulas baseadas em projeto, guias passo a passo sobre como construir o projeto
- quiz de aquecimento pré-lição
- lição escrita
- para lições baseadas em projetos, guias passo a passo sobre como construir o projeto
> **Uma nota sobre questionários**: Todos os questionários estão contidos na pasta Quiz-app, 48 questionários no total, cada um com três perguntas. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/); o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Aulas
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais a fazer seu trabalho | [Introdução a Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprenda os conceitos básicos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Básico de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Básico de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md)| Jasmine e Christopher |
| 06 | Básico de JS | Tomando Decisões com JS | Aprenda a criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Básico de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, com foco em construir um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico de CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Fechamentos em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar e soltar, com foco em fechamentos e manipulação do DOM | [Fechamentos em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprenda a usar eventos do teclado para conduzir a lógica do seu app JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado com JavaScript | Aprenda sobre herança usando tanto Classes quanto Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem um ao outro usando pressionamento de teclas e forneça uma função cooldown para garantir desempenho | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Encerrando e reiniciando o jogo | Aprenda sobre como encerrar e reiniciar o jogo, incluindo limpeza de recursos e redefinição de valores de variáveis | [A Condição de Encerramento](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda como criar a estrutura da arquitetura de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registro | Aprenda sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos para Buscar e Usar Dados | Como os dados entram e saem da sua aplicação, como buscá-los, armazená-los e descartar | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como sua aplicação retém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Usar o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris |
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Lições
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Vinculada | Autor |
| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Intro às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Começando | Noções básicas do GitHub, inclui trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outros em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos JS | Tomando Decisões com JS | Aprenda a criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface drag/drop, com foco em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para dirigir a lógica do seu app JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançado com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenho no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenho no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos na tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem uns aos outros usando pressionamento de teclas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar ativos e redefinir valores de variáveis | [A Condição de Termino](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda a criar a estrutura arquitetônica de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda a construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos para Buscar e Usar Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Uso do Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente:
* aprendizagem baseada em projetos
* questionários frequentes
* aprendizado baseado em projetos
* quizzes frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, assim como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo estilo Space Invaders e um aplicativo bancário para negócios. Ao final da série, os alunos terão adquirido uma sólida compreensão do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os estudantes terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo no estilo Space Invader e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Você pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas introdutórias em conceitos básicos de JavaScript, emparelhadas com um vídeo da coleção de tutoriais em vídeo "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos cujos autores contribuíram para este currículo.
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os estudantes e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre fundamentos do JavaScript para apresentar conceitos, combinadas com um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos autores da qual contribuíram para este currículo.
Além disso, um questionário de baixo risco antes da aula define a intenção do aluno em relação à aprendizagem de um tópico, enquanto um segundo questionário após a aula assegura maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito na íntegra ou em parte. Os projetos começam pequenos e se tornam cada vez mais complexos até o final do ciclo de 12 semanas.
Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido, podendo ser realizado no todo ou em parte. Os projetos começam pequenos e tornam-se cada vez mais complexos até o final do ciclo de 12 semanas.
Embora tenhamos evitado propositadamente a introdução de frameworks JavaScript para concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, uma boa próxima etapa para completar este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
## 🧭 Acesso Offline
## 🧭 Acesso offline
Você pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e então, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
Você pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e então, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 em seu localhost: `localhost:3000`.
## 📘 PDF
Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Outros Cursos
@ -213,10 +213,10 @@ Nossa equipe produz outros cursos! Confira:
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agentes
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -249,13 +249,13 @@ Nossa equipe produz outros cursos! Confira:
Se você ficar preso ou tiver alguma dúvida sobre como construir aplicativos de IA. Junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
Se você ficar preso ou tiver alguma dúvida sobre como criar aplicativos de IA. Participe de discussões com outros alunos e desenvolvedores experientes sobre MCP. É uma comunidade acolhedora onde perguntas são bem-vindas e o conhecimento é compartilhado livremente.
@ -266,6 +266,6 @@ Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, é recomendada a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
**Aviso Legal**:
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
# Roteiro para o Repositório Web-Dev-For-Beginners da Microsoft
**Este repositório fornece um roteiro para aprender os fundamentos do desenvolvimento web com foco em JavaScript, HTML e CSS. O currículo é flexível e pode ser feito na íntegra ou em parte, com 24 aulas distribuídas ao longo de 12 semanas.**
## Marcos Principais
* **Semanas 1-3:**
* Introdução às linguagens de programação e ferramentas da área
* Noções básicas de GitHub
* Acessibilidade
* Conceitos básicos de JS: tipos de dados, funções e métodos
* Tomando decisões com JS
* **Semanas 4-6:**
* Arrays e loops
* Terrário: HTML na prática
* CSS na prática
* Closures em JavaScript
* Manipulação do DOM
* **Semanas 7-9:**
* Jogo de Digitação: Programação orientada a eventos
* Extensão Green para Navegador: Trabalhando com navegadores
* Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local
* Processos em segundo plano no navegador
* Desempenho na web
* **Semanas 10-12:**
* Jogo Espacial: Desenvolvimento de jogos mais avançado com JavaScript
* Desenhando em canvas
* Movimentando elementos pela tela
* Detecção de colisão
* Mantendo a pontuação, terminando e reiniciando o jogo
* App Bancário: Templates HTML e Rotas em um App Web
* Construindo um Formulário de Login e Registro
* Métodos de busca e uso de dados
* Conceitos de Gerenciamento de Estado
## Resultados de Aprendizagem
**Ao completar este roteiro, os alunos terão experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo estilo invasores do espaço e um aplicativo bancário para negócios. Eles também desenvolverão uma compreensão sólida dos fundamentos do desenvolvimento web.**
## Recursos Adicionais
* Este repositório oferece uma variedade de recursos para aprendizado adicional, incluindo tutoriais, exemplos de código e desafios.
* A plataforma Microsoft Learn oferece diversos cursos e trilhas de aprendizado em desenvolvimento web.
* Comunidades online como Stack Overflow e MDN Web Docs fornecem suporte e recursos valiosos para desenvolvedores web.
**Espero que este roteiro ajude você na sua jornada de desenvolvimento web!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para alcançar a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este é um repositório de currículo educacional para ensinar os fundamentos do desenvolvimento web a iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 lições práticas que cobrem JavaScript, CSS e HTML.
Este é um repositório de currículo educativo para o ensino dos fundamentos do desenvolvimento web a principiantes. O currículo é um curso abrangente de 12 semanas desenvolvido pelos Microsoft Cloud Advocates, com 24 aulas práticas cobrindo JavaScript, CSS e HTML.
### Componentes Principais
- **Conteúdo Educacional**: 24 lições estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrário, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicação Bancária, Editor de Código e Assistente de Chat com IA
- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré/pós-lição)
- **Suporte Multilíngue**: Traduções automáticas para mais de 50 idiomas via GitHub Actions
- **Conteúdo Educativo**: 24 lições estruturadas organizadas em módulos baseados em projetos
- **Projetos Práticos**: Terrarium, Jogo de Digitação, Extensão de Navegador, Jogo Espacial, Aplicação Bancária, Editor de Código e Assistente de Chat AI
- **Questionários Interativos**: 48 questionários com 3 perguntas cada (avaliações pré/pós-aula)
- **Suporte Multilíngue**: Traduções automáticas para 50+ idiomas via GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: IA generativa, Ciência de Dados, ML, currículos IoT disponíveis
### Trabalhando com Projetos Específicos
### Trabalhar com Projetos Específicos
Para instruções detalhadas sobre projetos individuais, consulte os arquivos README em:
- `quiz-app/README.md` - Aplicação de questionário em Vue 3
- `7-bank-project/README.md` - Aplicação bancária com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão de navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas
- `9-chat-project/README.md` - Projeto de assistente de chat com IA
Para instruções detalhadas sobre projetos individuais, consulte os ficheiros README em:
- `quiz-app/README.md` - Aplicação de quiz Vue 3
- `7-bank-project/README.md` - Aplicação bancária com autenticação
- `5-browser-extension/README.md` - Desenvolvimento de extensão para navegador
- `6-space-game/README.md` - Desenvolvimento de jogo baseado em Canvas
- `9-chat-project/README.md` - Projeto de assistente chat AI
### Estrutura Monorepo
Embora não seja um monorepo tradicional, este repositório contém vários projetos independentes:
- Cada lição é autônoma
- Projetos não compartilham dependências
- Trabalhe em projetos individuais sem afetar outros
- Clone o repositório inteiro para a experiência completa do currículo
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada aula é autónoma
- Projetos não partilham dependências
- Trabalhe em projetos individuais sem afetar outros
- Clone o repositório completo para a experiência do currículo completo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
# Desenvolvimento Web para Iniciantes - Um Currículo
Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas, por Microsoft Cloud Advocates. Cada uma das 24 aulas aprofunda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de browser e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do conhecimento com a nossa pedagogia eficaz baseada em projetos. Comece a sua jornada de codificação hoje!
Aprenda os fundamentos do desenvolvimento web com o nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições aprofunda JavaScript, CSS e HTML através de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe em questionários, discussões e tarefas práticas. Melhore as suas competências e otimize a retenção do conhecimento com a nossa eficaz pedagogia baseada em projetos. Comece hoje a sua jornada de programação!
Siga estes passos para começar a usar estes recursos:
1. **Fork do Repositório**: Clique em [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone do Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Siga estes passos para começar a utilizar estes recursos:
1. **Faça um Fork do Repositório**: Clique [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros programadores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
#### Suportado via Ação GitHub (Automatizado & Sempre Atualizado)
#### Suportado através de GitHub Action (Automatizado e Sempre Atualizado)
> Este repositório inclui traduções em mais de 50 idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use sparse checkout:
> Este repositório inclui mais de 50 traduções que aumentam significativamente o tamanho do download. Para clonar sem traduções, utilize o sparse checkout:
@ -41,23 +41,23 @@ Siga estes passos para começar a usar estes recursos:
> Isto oferece tudo o que precisa para completar o curso com um download muito mais rápido.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Se desejar que línguas adicionais sejam suportadas, estas estão listadas [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Se desejar ter idiomas de tradução adicionais, os suportados estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _É estudante?_
Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para iniciantes, kits para estudantes e até formas de obter um voucher de certificado gratuito. Esta é a página que deve guardar nos favoritos e consultar de tempos a tempos, pois atualizamos o conteúdo mensalmente.
Visite a [**página do Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde encontrará recursos para iniciantes, pacotes para estudantes e até formas de obter um voucher para certificado gratuito. Esta é a página que deve adicionar aos favoritos e consultar regularmente pois alteramos o conteúdo mensalmente.
### 📣 Anúncio - Novos desafios no modo Agente GitHub Copilot para completar!
### 📣 Anúncio - Novos desafios do modo GitHub Copilot Agent para completar!
Novo desafio adicionado, procure por "Desafio Agente GitHub Copilot 🚀" na maioria dos capítulos. Este é um novo desafio para completar usando o GitHub Copilot e o modo Agente. Se nunca usou o modo Agente, ele é capaz não só de gerar texto, mas também de criar e editar ficheiros, executar comandos e muito mais.
Novo desafio adicionado, procure "GitHub Copilot Agent Challenge 🚀" na maioria dos capítulos. Este é um novo desafio para completar utilizando o GitHub Copilot e o modo Agent. Se nunca usou o modo Agent, ele é capaz não só de gerar texto mas também de criar e editar ficheiros, executar comandos e muito mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente IA adicionado, veja o [projeto](./9-chat-project/README.md)
Novo projeto de Assistente AI acabou de ser adicionado, veja o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado
Não perca o nosso novo currículo de IA Generativa!
@ -65,56 +65,57 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar a aprendizagem de tópicos como:
Cada lição inclui uma tarefa a completar, um teste de conhecimento e um desafio para o guiar na aprendizagem de tópicos como:
- Prompting e engenharia de prompts
- Criação de apps de texto e imagem
- Apps de pesquisa
- Geração de aplicações de texto e imagem
- Aplicações de pesquisa
Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar!
Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar!
## 🌱 Introdução
## 🌱 Começar
> **Professores**, incluímos algumas sugestões [aqui](for-teachers.md) sobre como usar este currículo. Agradecemos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos o seu feedback [no nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um questionário pré-lectura, siga lendo o material da aula, complete as várias atividades e verifique a sua compreensão com o questionário pós-lectura.
**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um questionário pré-aula e avance lendo o material da aula, completando as várias atividades e verificando a sua compreensão com o questionário pós-aula.
Para melhorar a sua experiência de aprendizagem, conecte-se com os seus colegas para trabalharem juntos nos projetos! As discussões são incentivadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde a nossa equipa de moderadores estará disponível para responder às suas perguntas.
Para melhorar a sua experiência de aprendizagem, conecte-se com os seus colegas para trabalharem juntos nos projetos! As discussões são encorajadas no nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde a nossa equipa de moderadores estará disponível para responder às suas perguntas.
Para aprofundar a sua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
Para aprofundar a sua educação, recomendamos vivamente explorar o [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais.
### 📋 Configurar o seu ambiente
Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começar, pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado no navegador, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo tem um ambiente de desenvolvimento pronto a usar! Ao começar pode optar por executar o currículo num [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em browser, sem necessidade de instalações_), ou localmente no seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Criar o seu repositório
Para guardar o seu trabalho facilmente, é recomendado criar a sua própria cópia deste repositório. Pode fazê-lo clicando no botão **Use this template** no topo da página. Isso criará um novo repositório na sua conta GitHub com uma cópia do currículo.
#### Crie o seu repositório
Para guardar facilmente o seu trabalho, recomenda-se criar a sua própria cópia deste repositório. Pode fazer isto clicando no botão **Use this template** no topo da página. Isto criará um novo repositório na sua conta GitHub com uma cópia do currículo.
Siga estes passos:
1. **Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
2. **Clone do Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página.
2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Executar o currículo num Codespace
Na sua cópia deste repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para trabalhar.
Na sua cópia do repositório que criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para trabalhar.
#### Executar o currículo localmente no seu computador
Para executar este currículo localmente no seu computador, precisará de um editor de texto, um browser e uma ferramenta de linha de comandos. A nossa primeira aula, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), guiará através de várias opções para cada uma destas ferramentas para selecionar o que melhor lhe convém.
Para executar este currículo localmente no seu computador, vai precisar de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma destas ferramentas para seleccionar o que funcionar melhor para si.
A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) incorporado. Pode fazer download do Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Recomendamos usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também inclui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Pode descarregar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone o seu repositório para o seu computador. Pode fazê-lo clicando no botão **Code** e copiando a URL:
1. Clone o seu repositório para o seu computador. Pode fazer isto clicando no botão **Code** e copiando a URL:
[CodeSpace](./images/createcodespace.png)
Depois, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `<your-repository-url>` pelo URL que acabou de copiar:
@ -123,59 +124,59 @@ A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.
git clone <your-repository-url>
```
2. Abra a pasta no Visual Studio Code. Pode fazer isto clicando em **Ficheiro** > **Abrir Pasta** e selecionando a pasta que acabou de clonar.
2. Abra a pasta no Visual Studio Code. Pode fazer isto clicando em **File** > **Open Folder** e selecionando a pasta que acabou de clonar.
> Extensões recomendadas para o Visual Studio Code:
> Extensões recomendadas para o Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para pré-visualizar páginas HTML dentro do Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rapidamente
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar a escrever código mais rápido
## 📂 Cada lição inclui:
- sketchnote opcional
- vídeo suplementar opcional
- quiz de aquecimento antes da lição
- quiz de aquecimento pré-lição
- lição escrita
- para lições baseadas em projetos, guias passo a passo sobre como construir o projeto
- verificação de conhecimento
- para lições baseadas em projetos, guias passo a passo para construir o projeto
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes de três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/); a aplicação dos quizzes pode ser executada localmente ou implantada no Azure; siga as instruções na pasta `quiz-app`.
> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, 48 quizzes no total com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/); a aplicação do quiz pode ser executada localmente ou implementada no Azure; siga as instruções na pasta `quiz-app`.
## 🗃️ Lições
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor |
| 01 | A Começar | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos por detrás da maioria das linguagens de programação e sobre software que ajuda os programadores profissionais a fazer o seu trabalho | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | A Começar | Noções básicas de GitHub, incluindo trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | A Começar | Acessibilidade | Aprender os fundamentos da acessibilidade web | [Fundamentos da Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Fundamentos de JS | Tomar Decisões com JS | Aprender como criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays e Loops | Trabalhar com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na criação de uma disposição/layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Criar o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Criar um Jogo de Digitação | Aprender como usar eventos de teclado para conduzir a lógica da sua aplicação JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegadores](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história e como estruturar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegadores](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis no armazenamento local | Construir os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegadores](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Usar os processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre desempenho web e algumas otimizações a realizar | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado com JavaScript | Aprender sobre Herança usando Classes e Composição, e o padrão Pub/Sub, para preparar-se para criar um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos num ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos pelo ecrã | Descobrir como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detetar Colisões | Fazer os elementos colidirem e reagirem entre si usando teclas e fornecer uma função de cooldown para garantir o desempenho do jogo | [Detetar Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter a pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Terminar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis | [A Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancária](./7-bank-project/solution/README.md) | Templates HTML e Rotas numa App Web | Aprender como criar a estrutura arquitetónica de um website multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancária](./7-bank-project/solution/README.md) | Criar um Formulário de Login e Registo | Aprender a criar formulários e gerir rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancária](./7-bank-project/solution/README.md) | Métodos para Obter e Usar Dados | Como os dados entram e saem da sua aplicação, como buscá-los, guardá-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancária](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua aplicação mantém o estado e como gerí-lo programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código | [Usar o Editor VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes AI](./9-chat-project/README.md) | Trabalhar com AI | Aprender a criar o seu próprio assistente AI | [Projeto de Assistente AI](./9-chat-project/README.md) | Chris |
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Lição Ligada | Autor |
| 01 | A Começar | Introdução à Programação e Ferramentas do Ofício | Aprender os fundamentos básicos por trás da maioria das linguagens de programação e sobre software que ajuda desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | A Começar | Noções Básicas de GitHub, inclui trabalho em equipa | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | A Começar | Acessibilidade | Aprender os conceitos básicos de acessibilidade web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Noções Básicas de JS | Tipos de Dados em JavaScript | Os conceitos básicos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Noções Básicas de JS | Funções e Métodos | Aprender sobre funções e métodos para gerir o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | Noções Básicas de JS | Tomar Decisões com JS | Aprender a criar condições no seu código usando métodos de tomada de decisão | [Tomar Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Noções Básicas de JS | Arrays e Loops | Trabalhar com dados usando arrays e ciclos em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML na Prática | Construir o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS na Prática | Construir o CSS para estilizar o terrário online, focando nos conceitos básicos de CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construir o JavaScript para que o terrário funcione como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construir um Jogo de Digitação | Aprender como usar eventos do teclado para conduzir a lógica da sua aplicação JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Trabalhar com Navegadores | Aprender como os navegadores funcionam, a sua história, e como esboçar os primeiros elementos de uma extensão para navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Construir um formulário, chamar uma API e armazenar variáveis no local storage | Construir os elementos JavaScript da sua extensão para navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários, e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão Verde para Navegador](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, performance web | Usar processos em segundo plano do navegador para gerir o ícone da extensão; aprender sobre performance web e algumas otimizações para melhorar | [Tarefas em Segundo Plano e Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado em JavaScript | Aprender sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhar no canvas | Aprender sobre a API Canvas, usada para desenhar elementos no ecrã | [Desenhar no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Mover elementos no ecrã | Descobrir como elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisões | Fazer elementos colidirem e reagirem entre si usando teclas e providenciar uma função de cooldown para assegurar o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Manter pontuação | Realizar cálculos matemáticos baseados no estado e desempenho do jogo | [Manter Pontuação](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizar e reiniciar o jogo | Aprender sobre terminar e reiniciar o jogo, incluindo limpar recursos e redefinir valores de variáveis | [Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas numa Aplicação Web | Aprender como criar o esqueleto da arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Recolha e Uso de Dados | Como os dados fluem para dentro e para fora da sua aplicação, como buscar, armazenar e dispensar deles | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua aplicação retém estado e como gerir isso programaticamente | [Gestão de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabalhar com VScode | Aprender a usar um editor de código | [Usar o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhar com IA | Aprender a construir o seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
@ -183,21 +184,22 @@ O nosso currículo foi concebido com dois princípios pedagógicos chave em ment
* aprendizagem baseada em projetos
* quizzes frequentes
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web atuais. Os estudantes terão a oportunidade de desenvolver experiência prática criando um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo space-invader e uma aplicação bancária para negócios. No final da série, os estudantes terão adquirido uma compreensão sólida do desenvolvimento web.
O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web atuais. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, terrário virtual, extensão de navegador ecológica, jogo estilo space-invader, e uma aplicação bancária para negócios. No final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web.
> 🎓 Pode fazer as primeiras lições deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Ao assegurar que o conteúdo está alinhado com projetos, o processo torna-se mais envolvente para os estudantes e a retenção de conceitos será aumentada. Também escrevemos várias lições iniciais sobre os fundamentos de JavaScript para introduzir conceitos, combinadas com um vídeo da coleção de tutoriais em vídeo "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos cujos autores contribuíram para este currículo.
Garantindo que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições introdutórias sobre noções básicas de JavaScript para introduzir conceitos, acompanhadas de um vídeo da coleção de tutoriais em vídeo “[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)”, alguns dos cujos autores contribuíram para este currículo.
Além disso, um quiz de baixo risco antes da aula define a intenção do estudante para aprender um tópico, enquanto um segundo quiz após a aula assegura uma maior retenção. Este currículo foi desenhado para ser flexível e divertido, podendo ser seguido na totalidade ou parcialmente. Os projetos começam pequenos e tornam-se progressivamente mais complexos até final do ciclo de 12 semanas.
Além disso, um quiz de baixo risco antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula assegura uma retenção adicional. Este currículo foi desenhado para ser flexível e divertido e pode ser feito na totalidade ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas.
Embora tenhamos evitado intencionalmente a introdução de frameworks JavaScript para nos concentrarmos nas competências básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Embora tenhamos evitado intencionalmente a introdução de frameworks JavaScript para nos concentrarmos nas competências básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js através de outra coleção de vídeos: “[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)”.
> Visite as nossas orientações do [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuir](CONTRIBUTING.md). Aguardamos o seu feedback construtivo!
> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos o seu feedback construtivo!
## 🧭 Acesso offline
Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e, depois, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`.
## 🧭 Acesso Offline
Pode executar esta documentação offline usando o [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e depois, na pasta raiz deste repositório, digite `docsify serve`. O website será servido na porta 3000 no seu localhost: `localhost:3000`.
## 📘 PDF
@ -205,16 +207,16 @@ Um PDF de todas as lições pode ser encontrado [aqui](https://microsoft.github.
## 🎒 Outros Cursos
A nossa equipa produz outros cursos! Confira:
A nossa equipa produz outros cursos! Veja:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agentes
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -249,21 +251,21 @@ A nossa equipa produz outros cursos! Confira:
## Obter Ajuda
Se ficar preso ou tiver alguma pergunta sobre a construção de aplicações de IA. Junte-se a outros alunos e programadores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é partilhado livremente.
Se ficar preso ou tiver alguma dúvida sobre como criar aplicações de IA. Junte-se a outros estudantes e programadores experientes em discussões sobre MCP. É uma comunidade de apoio onde as perguntas são bem-vindas e o conhecimento é partilhado livremente.
Este repositório está licenciado ao abrigo da licença MIT. Veja o ficheiro [LICENSE](../../LICENSE) para mais informações.
Este repositório é licenciado sob a licença MIT. Veja o ficheiro [LICENSE](../../LICENSE) para mais informações.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos por garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional por um tradutor humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos pela precisão, por favor tenha em atenção que as traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes da utilização desta tradução.
# Roteiro para o Repositório Web-Dev-For-Beginners da Microsoft
**Este repositório fornece um roteiro para aprender os fundamentos do desenvolvimento web com foco em JavaScript, HTML e CSS. O currículo é flexível e pode ser feito na totalidade ou em parte, com 24 lições distribuídas por 12 semanas.**
## Marcos Principais
* **Semanas 1-3:**
* Introdução às linguagens de programação e ferramentas da área
* Noções básicas de GitHub
* Acessibilidade
* Noções básicas de JS: tipos de dados, funções e métodos
* Tomar decisões com JS
* **Semanas 4-6:**
* Arrays e loops
* Terrário: HTML na prática
* CSS na prática
* Closures em JavaScript
* Manipulação do DOM
* **Semanas 7-9:**
* Jogo de digitação: programação orientada a eventos
* Extensão Green Browser: trabalhar com navegadores
* Construir um formulário, chamar uma API e armazenar variáveis no armazenamento local
* Processos em segundo plano no navegador
* Performance web
* **Semanas 10-12:**
* Jogo espacial: desenvolvimento de jogos mais avançado com JavaScript
* Desenhar no canvas
* Mover elementos pela tela
* Detecção de colisões
* Manter a pontuação, terminar e reiniciar o jogo
* App bancária: Templates HTML e rotas numa aplicação web
* Construir um formulário de login e registo
* Métodos de obtenção e utilização de dados
* Conceitos de Gestão de Estado
## Resultados da Aprendizagem
**Ao completar este roteiro, os estudantes ganharão experiência prática ao construir um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo ao estilo space invaders e uma aplicação bancária para empresas. Também desenvolverão uma compreensão sólida dos fundamentos do desenvolvimento web.**
## Recursos Adicionais
* Este repositório oferece uma abundância de recursos para aprofundar o aprendizado, incluindo tutoriais, exemplos de código e desafios.
* A plataforma Microsoft Learn oferece vários cursos e percursos de aprendizagem em desenvolvimento web.
* Comunidades online como Stack Overflow e MDN Web Docs fornecem suporte e recursos valiosos para desenvolvedores web.
**Espero que este roteiro lhe seja útil na sua jornada de desenvolvimento web!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso de Isenção de Responsabilidade**:
Este documento foi traduzido utilizando o serviço de tradução automática [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional realizada por um humano. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
localizeflow[bot]
4 weeks ago