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 curriculare educativo per insegnare le basi 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.
### 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**: Terrarium, 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:
Per istruzioni dettagliate su singoli progetti, fare riferimento ai 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 su canvas
- `9-chat-project/README.md` - Progetto assistente chat AI
### Struttura Monorepo
Sebbene non sia un monorepo tradizionale, questo repository contiene più progetti indipendenti:
- Ogni lezione è autonoma
Pur non essendo un monorepo tradizionale, questo repository contiene più progetti indipendenti:
- Ogni lezione è autoconclusiva
- I progetti non condividono dipendenze
- Lavora su progetti individuali senza influenzare gli altri
- Clona l'intero repository per l'esperienza completa del curriculum
- Lavorare su singoli progetti senza influenzare gli altri
- Clonare l’intero repo per fruire del curriculum completo
---
**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 AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pur impegnandoci per garantire l’accuratezza, si prega di tenere presente che le traduzioni automatiche possono contenere errori o inesattezze. Il documento originale nella sua lingua nativa deve essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale effettuata da un esperto. Non ci assumiamo alcuna responsabilità per 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 offerto dai Microsoft Cloud Advocates. Ognuna delle 24 lezioni approfondisce JavaScript, CSS e HTML attraverso progetti pratici come terrari, estensioni per browser e giochi spaziali. Partecipa a quiz, discussioni e compiti pratici. Migliora le tue competenze e ottimizza la memorizzazione delle conoscenze con la nostra efficace pedagogia basata su progetti. Inizia oggi il tuo viaggio nel coding!
Unisciti alla Comunità Discord di Azure AI Foundry
Segui questi passaggi per iniziare a utilizzare queste risorse:
1. **Forka il Repository**: Clicca [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
1. **Forka il Repository**: Clicca su [](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 all'Azure AI Foundry Discord e incontra esperti e sviluppatori**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Supporto Multi-Lingua
### 🌐 Supporto Multilingue
#### Supportato tramite GitHub Action (Automatizzato e Sempre Aggiornato)
#### Supportato tramite GitHub Action (Automatico 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 più di 50 traduzioni linguistiche che aumentano significativamente la dimensione del download. Per clonare senza le 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 fornisce tutto il necessario 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 altre lingue di traduzione, sono elencate [qui](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)
#### 🧑🎓 _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 ti consigliamo di salvare tra i preferiti e controllare di tanto in tanto poiché i contenuti vengono aggiornati mensilmente.
### 📣 Annuncio - Nuove sfide GitHub Copilot Agent mode da completare!
### 📣 Annuncio - Nuove sfide con GitHub Copilot Agent mode da completare!
Nuova sfida aggiunta, cerca "GitHub Copilot Agent Challenge 🚀" nella maggior parte dei capitoli. È una nuova sfida da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent prima d'ora, essa è capace non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
Nuova sfida aggiunta, cerca la "Sfida GitHub Copilot Agent 🚀" nella maggior parte dei capitoli. È una nuova sfida per te da completare usando GitHub Copilot e la modalità Agent. Se non hai mai usato la modalità Agent, questa è in grado non solo di generare testo ma anche di creare e modificare file, eseguire comandi e altro.
### 📣 Annuncio - _Nuovo progetto da realizzare con Generative AI_
### 📣 Annuncio - _Nuovo progetto da costruire usando l'Intelligenza Artificiale Generativa_
Nuovo progetto Assistente AI appena aggiunto, dai un’occhiata al [progetto](./9-chat-project/README.md)
Nuovo progetto AI Assistant appena aggiunto, dagli un'occhiata [progetto](./9-chat-project/README.md)
### 📣 Annuncio - _Nuovo curriculum_ su Generative AI per JavaScript appena rilasciato
### 📣 Annuncio - _Nuovo Curriculum_ su Intelligenza Artificiale Generativa per JavaScript appena rilasciato
Non perdere il nostro nuovo curriculum su Generative AI!
Non perdere il nostro nuovo curriculum sull’Intelligenza Artificiale Generativa!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
Ogni lezione include un compito da completare, un test delle conoscenze e una sfida per guidarti nell'apprendimento di argomenti come:
- Prompt e ingegneriadei prompt
Ogni lezione include un compito da completare, un controllo delle conoscenze e una sfida per guidarti nell’apprendimento di argomenti come:
- Prompting e prompt engineering
- Generazione di app di testo e immagini
- App di ricerca
@ -83,42 +83,42 @@ Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pe
## 🌱 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 avere 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 e proseguite leggendo il materiale della lezione, completando le varie attività e verificando 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 per lavorare insieme ai 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 ulteriormente la tua istruzione, 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
### 📋 Configurare 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 già 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 bisogno di 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).
#### 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, ti consigliamo di creare una tua copia di questo repository. Puoi farlo cliccando sul pulsante **Usa questo modello** in cima alla pagina. Questo creerà un nuovo repository nel tuo account GitHub con una copia del curriculum.
Segui questi passaggi:
Segui questi passi:
1. **Forka il Repository**: Clicca sul pulsante "Fork" in alto a destra in questa pagina.
2. **Clona il Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Eseguire il curriculum in un Codespace
Nella tua copia di questo repository che hai creato, clicca sul pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace in cui potrai lavorare.
Nella tua copia di questo repository che hai creato, clicca il pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace dove potrai lavorare.
#### Eseguire il curriculum localmente sul tuo computer
Per eseguire questo curriculum localmente sul tuo computer, avrai bisogno di un editor di testo, 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 ognuno di questi strumenti per selezionare 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).
1. Clona il tuo repository sul computer. Puoi farlo cliccando sul pulsante **Code** e copiando l’URL:
1. Clona il tuo repository sul tuo computer. Puoi fare questo 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 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 comando seguente, sostituendo `<your-repository-url>` con l'URL che hai appena copiato:
```bash
git clone <your-repository-url>
@ -129,7 +129,7 @@ La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualst
> 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 le 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:
@ -138,45 +138,45 @@ La nostra raccomandazione è di usare [Visual Studio Code](https://code.visualst
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- lezione scritta
- per le lezioni basate su progetti, guide passo-passo su come costruire il progetto
- per le lezioni basate su progetti, guide passo-passo per costruire 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 sono contenuti nella cartella Quiz-app, in totale 48 quiz da tre domande ciascuno. Sono disponibili [qui](https://ff-quizzes.netlify.app/web/), l'app per i quiz può essere eseguita localmente o distribuita su Azure; segui le istruzioni nella cartella `quiz-app`.
## 🗃️ Lezioni
| | Nome del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | 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 del Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Lezione Collegata | Autore |
| 01 | Getting Started | Introduzione alla Programmazione e agli Strumenti del Mestiere | Impara le basi che stanno alla base della maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a fare il proprio lavoro | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basi di GitHub, include lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri su una base di codice | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibilità | Impara 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 sulle funzioni e metodi per gestire il flusso logico di un'applicazione | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher |
| 06 | JS Basics | Prendere decisioni con JS | Impara come 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 costruzione 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 creazione di pagine reattive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Chiusure JavaScript, manipolazione DOM | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti su chiusure e manipolazione del DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Costruisci un gioco di digitazione | Impara a usare gli eventi da tastiera per guidare la logica della tua 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 del browser | [About Browsers](./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 | [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; impara sulle 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 giochi avanzato con JavaScript | Impara sull'ereditarietà usando sia Classi che Composizione e il pattern Pub/Sub, in preparazione alla costruzione di un gioco | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Disegnare su canvas | Impara sull'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) | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi usando le 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 loro usando keypress 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 a 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 Routes in un'app web | Impara a creare la struttura dell'architettura di un sito multipagina usando routing e template HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Costruire un modulo di login e registrazione | Impara a costruire form e a gestire le routine di validazione | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metodi di recupero e uso dei dati | Come i dati entrano e escono dalla tua app, come recuperarli, memorizzarli e eliminarli | [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 mantiene lo stato e come gestirlo programmaticamente | [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| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lavorare con AI | Impara a costruire il tuo assistente AI | [AI Assistant project](./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 ultimi strumenti e tecniche usati dagli sviluppatori web di oggi. Gli studenti avranno l'opportunità di sviluppare esperienza pratica costruendo un gioco di digitazione, un terrario virtuale, un'estensione browser eco-friendly, un gioco in stile space-invader e un'app bancaria per le imprese. Alla fine della serie, gli studenti avranno acquisito una solida comprensione dello sviluppo web.
> 🎓 Puoi seguire le prime lezioni di questo curriculum come [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 il contenuto sia allineato con i progetti, il processo diventa più coinvolgente per gli studenti e si aumenta la ritenzione dei concetti. Abbiamo anche scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre i concetti, abbinate a un video della collezione "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" di tutorial video, 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 basso rischio prima della lezione imposta l'intento dello studente verso l'apprendimento di un argomento, mentre un secondo quiz dopo la lezione assicura una maggiore ritenzione. Questo curriculum è stato progettato per essere flessibile e divertente e può essere seguito interamente o in parte. I progetti iniziano piccoli e diventano progressivamente più complessi entro la fine del ciclo di 12 settimane.
Sebbene abbiamo 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)".
Sebbene abbiamo evitato volutamente di introdurre framework JavaScript per concentrarci sulle abilità di base necessarie come sviluppatore web prima di adottare un framework, un buon passo successivo per completare questo curriculum sarebbe imparare Node.js tramite un'altra raccolta di video: "[Beginner Series to: Node.js](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!
> Visita le nostre linee guida per il [Codice di Condotta](CODE_OF_CONDUCT.md) e il [Contributo](CONTRIBUTING.md). Accogliamo con piacere i tuoi feedback costruttivi!
## 🧭 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 un fork di questo repo, [installa Docsify](https://docsify.js.org/#/quickstart) sulla tua macchina locale, e poi nella cartella radice di questo repo, digita `docsify serve`. Il sito web sarà servito sulla porta 3000 sul tuo localhost: `localhost:3000`.
## 📘 PDF
Un PDF di tutte le lezioni può essere trovato [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Altri corsi
## 🎒 Altri Corsi
Il nostro team produce altri corsi! Dai un'occhiata:
<!-- 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
@ -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,21 +251,21 @@ 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 ti blocchi o hai domande sulla creazione di app AI. Unisciti ad altri studenti e sviluppatori esperti nelle discussioni su MCP. È una comunità di supporto dove le domande sono benvenute e la conoscenza viene condivisa liberamente.
Questo repository è concesso in licenza sotto la licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
Questo repository è concesso in licenza secondo i termini della licenza MIT. Consulta il file [LICENSE](../../LICENSE) per maggiori informazioni.
---
<!-- 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). Sebbene ci impegniamo per garantire accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua natìa deve essere considerato la fonte autorevole. Per informazioni critiche, si consiglia la traduzione professionale effettuata da un umano. Non siamo responsabili per eventuali malintesi o interpretazioni errate derivanti dall’uso di questa traduzione.
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 de currículo educacional para ensinar fundamentos de desenvolvimento web para iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido por 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)
- **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 AI
- **Quizzes Interativos**: 48 quizzes com 3 perguntas cada (avaliações pré e 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 manifest.json está corretamente formatado
- Cheque erros no console do navegador
- Siga instruções específicas de instalação para o navegador
**Problemas no projeto de chat Python**:
- Certifique-se que o pacote OpenAI está instalado: `pip install openai`
- Verifique se a variável ambiente GITHUB_TOKEN está configurada
- Confira permissões de acesso aos modelos GitHub
**Docsify não serve a documentação**:
- Instale o docsify-cli globalmente: `npm install -g docsify-cli`
- Execute a partir da 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
- Use VS Code com extensão Live Server para projetos HTML
- Instale extensões ESLint e Prettier para formatação consistente
- Utilize DevTools do navegador para depurar 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 (mais de 50 idiomas) torna clones completos grandes
- Use clone raso se trabalhar apenas no conteúdo: `git clone --depth 1`
- Exclua traduções de buscas quando trabalhar com conteúdo em inglês
- Processos de build podem ser lentos na primeira execução (npm install, build Vite)
## Considerações de Segurança
### Variáveis de Ambiente
- Chaves de API nunca devem ser comprometidas no repositório
- Chaves de API nunca devem ser commitadas no repositório
- Use arquivos `.env` (já em `.gitignore`)
- Documente as 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
- Mantenha dependências atualizadas
- Tokens do GitHub devem ter permissões mínimas necessárias
### Acesso aos Modelos do GitHub
- Tokens de Acesso Pessoal (PAT) são necessários para os Modelos do GitHub
- Tokens de Acesso Pessoal (PAT) necessários para Modelos GitHub
- Tokens devem ser armazenados como variáveis de ambiente
- Nunca comprometa tokens ou credenciais
- 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
- Professores utilizando o currículo em salas de aula
- Conteúdo projetado para acessibilidade e construção gradual de habilidades
### Filosofia Educacional
- Abordagem de aprendizado baseada em projetos
- Abordagem 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
- Foco nos fundamentos antes dos frameworks
### Manutenção do Repositório
- Comunidade ativa de alunos e contribuidores
- Comunidade ativa de aprendizes e contribuidores
- Atualizações regulares de dependências e conteúdo
- Issues e discussões monitoradas pelos mantenedores
- 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/)
- [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 alunos
- Cursos adicionais: IA Generativa, Ciência de Dados, ML, currículos de IoT disponíveis
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: AI Generativa, Data Science, ML, currículos 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
- `quiz-app/README.md` - aplicação de 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 assistente de chat AI
### Estrutura de Monorepo
### Estrutura Monorepo
Embora não seja um monorepo tradicional, este repositório contém vários projetos independentes:
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 outros
- Trabalhe em projetos individuais sem afetar os outros
- Clone o repositório inteiro para a experiência completa do currículo
---
<!-- 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 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.
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 em sua língua nativa deve ser considerado a fonte autoritativa. 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.
# 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 ministrado pelos Microsoft Cloud Advocates. Cada uma das 24 aulas mergulha em JavaScript, CSS e HTML por meio de projetos práticos, como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa metodologia 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. **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 desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
3. [**Junte-se ao Discord Azure AI Foundry e conheça especialistas e colegas 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, o que aumenta significativamente o tamanho do download. Para clonar sem as traduções, utilize o checkout esparso:
@ -41,21 +41,21 @@ Siga estes passos para começar a usar esses recursos:
> Isso fornece tudo que você 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 suportar idiomas adicionais, 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 do 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ê deve salvar nos favoritos e consultar de tempos em tempos, pois o conteúdo é atualizado mensalmente.
### 📣 Anúncio - Novos desafios em modo GitHub Copilot Agent para completar!
### 📣 Anúncio - Novos desafios do modo GitHub Copilot Agent 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. Este é um novo desafio para você completar usando o GitHub Copilot no modo Agent. Se você ainda não usou o modo Agent, ele é capaz não apenas de gerar texto, mas também de criar e editar arquivos, executar comandos e muito mais.
### 📣 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 foi adicionado, confira o [projeto](./9-chat-project/README.md)
### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acaba de ser lançado
@ -67,13 +67,13 @@ Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
- Aulas cobrindo desde o básico até RAG.
- Interaja com personagens históricos usando GenAI e nosso aplicativo acompanhante.
- Narrativa divertida e envolvente, você vai viajar no tempo!
- Narrativa divertida e envolvente, você fará uma viagem no tempo!
Cada aula inclui uma tarefa para completar, um teste de conhecimento e um desafio para guiar seu aprendizado sobre temas como:
- Prompting e engenharia de prompt
Cada aula inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo no aprendizado de tópicos como:
- Prompting e engenharia de prompts
- Geração de aplicativos de texto e imagem
- Aplicativos de busca
@ -81,44 +81,44 @@ Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pa
## 🌱 Começando
## 🌱 Primeiros Passos
> **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)!
**[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 aula, comece com um quiz pré-aula e siga lendo o material, completando as diversas atividades e verificando seu entendimento 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 melhorar 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ão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde nossa equipe de moderadores estará disponível para responder 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 avançar nos estudos, 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 possui um ambiente de desenvolvimento pronto para uso! 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 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 o salvamento do seu trabalho, é recomendado criar 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 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.
1. **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`
#### 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 do repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso 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, 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á guiá-lo pelas várias opções para cada uma dessas ferramentas para que você escolha o que funciona melhor para você.
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).
Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que também possui um [Terminal integrado](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL:
[CodeSpace](./images/createcodespace.png)
Então, 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>` pela URL que você acabou de copiar:
Em seguida, 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>` pela URL que você acabou de copiar:
```bash
git clone <your-repository-url>
@ -127,79 +127,79 @@ Nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.co
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.
> Extensões recomendadas para Visual Studio Code:
> Extensões recomendadas do 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:
- esboço opcional
- sketchnote opcional
- vídeo suplementar opcional
- questionário de aquecimento pré-aula
- quiz de aquecimento pré-aula
- aula escrita
- para aulas baseadas em projeto, 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`.
> **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/); 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 |
| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor |
| 01 | Primeiros Passos | 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 a realizar 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 | Primeiros Passos | Noções básicas de GitHub, incluindo trabalho em equipe | Como usar o GitHub no seu projeto, como colaborar com outras pessoas em uma base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeiros Passos | 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 | O básico sobre 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 and Christopher |
| 06 | Fundamentos JS | Tomada de Decisões com JS | Aprenda como criar condições no seu código usando métodos de decisão | [Tomada de 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 | Crie 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) | Closures em JavaScript, manipulação do DOM | Crie o JavaScript para fazer o terrário funcionar 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) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para conduzir a lógica do seu aplicativo 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 montar 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 localmente | Crie 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 de fundo no navegador, desempenho da web | Use os processos de fundo do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações paramelhorar | [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, 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 entre si usando pressionamentos 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 terminar e reiniciar o jogo, incluindo limpar ativos e resetar valores de variáveis | [A Condição de Término](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Modelos HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura da arquitetura de um site multipágina usando roteamento e modelos HTML | [Modelos e Rotas HTML](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Criando um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Métodos de Busca e Uso de Dados | Como os dados fluem dentro e fora do seu app, como buscá-los, armazená-los e dispensá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplicativo Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprende como seu app 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 como utilizar um editor de código | [Use VScode Code Editor](./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 |
## 🏫 Pedagogia
Nosso currículo foi projetado com dois princípios pedagógicos-chave em mente:
Nosso currículo foi elaborado com dois princípios pedagógicos chave em mente:
* aprendizagem baseada em projetos
* questionários frequentes
* 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, assim como as últimas ferramentas e técnicas usadas pelos desenvolvedores web hoje. Os alunos terão a oportunidade de ganhar 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 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 aulas deste currículo como uma [Trilha 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 se alinhe com 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 fundamentos 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 quais seus autores 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 relação ao aprendizado do tema, 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 feito inteiro ou em partes. Os projetos começam pequenos e tornam-se progressivamente mais complexos ao longo 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 propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após 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)".
> Visite nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo!
> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e as diretrizes de [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) 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`.
## 📘 PDF
@ -211,51 +211,51 @@ Nossa equipe produz outros cursos! Confira:
<!-- 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://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
[](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)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série de IA 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)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](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)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
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 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.
@ -267,5 +267,5 @@ 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.
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 automatizadas 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 humana. 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 educacional para ensino dos fundamentos do desenvolvimento web a iniciantes. O currículo é um curso abrangente de 12 semanas desenvolvido por Microsoft Cloud Advocates, com 24 lições práticas cobrindo JavaScript, CSS e HTML.
### Componentes Principais
- **Conteúdo Educacional**: 24 lições estruturadas organizadas em módulos baseados em projetos
- **Conteúdo Educativo**: 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
@ -14,7 +14,7 @@ Este é um repositório de currículo educacional para ensinar os fundamentos do
### Arquitetura
- Repositório educacional com estrutura baseada em lições
- Repositório educativo com estrutura baseada em lições
- Cada pasta de lição contém README, exemplos de código e soluções
- Projetos independentes em diretórios separados (quiz-app, vários projetos de lições)
- Sistema de tradução usando GitHub Actions (co-op-translator)
@ -22,9 +22,9 @@ Este é um repositório de currículo educacional para ensinar os fundamentos do
## Comandos de Configuração
Este repositório é principalmente para consumo de conteúdo educacional. Para trabalhar com projetos específicos:
Este repositório é principalmente para consumo de conteúdo educativo. Para trabalhar com projetos específicos:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para aprendizes
- Cursos adicionais: IA generativa, Data Science, 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 de projetos individuais, consulte os ficheiros README em:
- `quiz-app/README.md` - aplicação quiz 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 com Canvas
- `9-chat-project/README.md` - projeto assistente de chat com IA
### 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
Embora não seja um monorepo tradicional, este repositório contém múltiplos projetos independentes:
- Cada lição é autónoma
- Projetos não partilham dependências
- Trabalhe em projetos individuais sem afetar outros
- Clone o repositório inteiro para a experiência completa do currículo
- Clone o repositório inteiro para ter a experiência completa do currículo
---
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso**:
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, por favor tenha em conta 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 por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas 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 aulas mergulha em 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 trabalhos práticos. Aprimore as suas competências e otimize a retenção do conhecimento com a nossa metodologia eficaz baseada em projetos. Comece a sua jornada de programação hoje!
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`
3. [**Junte-se ao Azure AI Foundry Discord e conheça especialistas e outros programadores**](https://discord.com/invite/ByRwuEEgH4)
1. **Faça o 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 desenvolvedores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporte Multilíngue
#### Suportado via Ação GitHub (Automatizado & Sempre Atualizado)
#### Suportado via 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 traduções para mais de 50 idiomas, o que aumenta significativamente o tamanho do download. Para clonar sem as traduções, use sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Isto oferece tudo o que precisa para completar o curso com um download muito mais rápido.
> Isto dá-lhe 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 que sejam suportadas línguas adicionais, elas estão listadas [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 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 quer guardar nos favoritos e consultar de vez em quando, pois o conteúdo é atualizado mensalmente.
### 📣 Anúncio - Novos desafios no modo Agente GitHub Copilot 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.
Foi adicionado um novo desafio, procure por "GitHub Copilot Agent Challenge 🚀" 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 antes, ele é capaz não só de gerar texto, mas também de criar e editar ficheiros, executar comandos e mais.
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_
Novo projeto de Assistente IA adicionado, veja o [projeto](./9-chat-project/README.md)
Foi adicionado um novo projeto assistente de IA, 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 acabou de ser lançado
Não perca o nosso novo currículo de 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 a aprendizagem de tópicos como:
- Prompting e engenharia de prompts
- Criação de apps de texto e imagem
- Apps de pesquisa
Cada aula inclui um trabalho a completar, uma verificação de conhecimento e um desafio para o guiar em tópicos como:
- Prompting e engenharia de prompt
- Geração de aplicações de texto e imagem
- Aplicações de busca
Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar!
## 🌱 Introdução
## 🌱 Como 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.
**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada aula, comece com um questionário pré-lectura e depois leia o material das aulas, complete as várias atividades e verifique a sua compreensão com o questionário pós-lectura.
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 pares para trabalharem nos projetos juntos! 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 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 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).
#### 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 isso 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.
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 o 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
@ -109,15 +110,15 @@ Na sua cópia deste repositório que criou, clique no botão **Code** e selecion
#### 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, precisará de um editor de texto, um navegador e uma ferramenta de linha de comandos. A nossa primeira aula, [Introdução às Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), conduzirá através de várias opções para cada uma destas ferramentas para que possa selecionar o que funciona 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).
A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também já 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 isso 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:
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>` pela URL que acabou de copiar:
```bash
git clone <your-repository-url>
@ -126,78 +127,79 @@ A nossa recomendação é usar o [Visual Studio Code](https://code.visualstudio.
2. Abra a pasta no Visual Studio Code. Pode fazer isto clicando em **Ficheiro** > **Abrir Pasta** e selecionando a pasta que acabou de clonar.
> Extensões recomendadas para o Visual Studio Code:
> Extensões recomendadas do 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
## 📂 Cada lição inclui:
- sketchnote opcional
- esboço opcional
- vídeo suplementar opcional
- quiz de aquecimento antes da lição
- questionário de aquecimento antes da lição
- lição escrita
- para lições baseadas em projetos, guias passo a passo sobre como 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`.
> **Nota sobre os questionários**: Todos os questionários estão contidos na pasta Quiz-app, 48 questionários com três perguntas cada. Estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e a app do questionário 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 os programadores profissionais no 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 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 | Noções básicas sobre 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 utilizando métodos 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 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 construção do 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 fundamentos 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 fazer o terrário funcionar como uma interface de arrastar e largar, 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 a usar eventos de teclado para conduzir a lógica da sua app JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Trabalhar com Browsers | Aprender como os browsers funcionam, a sua história, e como estruturar os primeiros elementos de uma extensão para navegador | [Sobre Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./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 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Processos em segundo plano no browser, desempenho web | Usar os processos em segundo plano do browser para gerir o ícone da extensão; aprender 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 | [Space Game](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Avançado com JavaScript | Aprender 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 | [Space Game](./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 | [Space Game](./6-space-game/solution/README.md) | Movimentar elementos pelo ecrã | Descobrir como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteção de colisões | Fazer com que elementos colidam e reajam uns com os outros usando o pressionar de teclas e fornecer uma função de cooldown para garantir o desempenho do jogo | [Deteção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Registo de pontos | Fazer cálculos matemáticos baseados no estado e desempenho do jogo | [Registo de Pontos](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminar e reiniciar o jogo| Aprender sobre terminar e reiniciar o jogo, incluindo limpar recursos e reiniciar valores das variáveis | [A Condição de Fim](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Modelos HTML e Rotas numa Aplicação Web | Aprender a criar a estrutura da arquitetura de um website multipágina usando rotas e modelos HTML | [Modelos HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Construir um Formulário de Login e Registo | Aprender a construir formulários e a gerir rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Métodos para Obter e Usar Dados | Como os dados entram e saem da sua aplicação, como obtê-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Conceitos de Gestão de Estado | Aprender como a sua aplicação mantém o estado e como geri-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 de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Trabalhar com IA | Aprender a construir o seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
O nosso currículo foi concebido com dois princípios pedagógicos chave em mente:
O nosso currículo foi desenhado com dois princípios pedagógicos-chave em mente:
* aprendizagem baseada em projetos
* quizzes frequentes
* questionários 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 mais recentes ferramentas e técnicas usadas pelos desenvolvedores web atuais. 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 browser ecológica, um jogo estilo space-invaders e uma app bancária para negócios. Ao fim da série, os estudantes terão 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.
Ao garantir que o conteúdo está alinhado com os projetos, o processo torna-se mais envolvente para os estudantes e a retenção dos conceitos é aumentada. Também escrevemos várias lições iniciais em noções básicas de JavaScript para introduzir conceitos, acompanhadas por 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 autores dos quais contribuíram para este currículo.
Além disso, um questionário de baixo risco antes de uma aula define a intenção do estudante para aprender um tópico, enquanto um segundo questionário após a aula assegura uma maior retenção. Este currículo foi desenhado para ser flexível e divertido, podendo ser realizado na totalidade ou em parte. Os projetos começam pequenos e tornam-se progressivamente mais complexos até ao final do ciclo de 12 semanas.
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.
Embora tenhamos evitado propositadamente introduzir frameworks JavaScript para nos concentrar 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: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visite as nossas diretrizes de [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuição](CONTRIBUTING.md). Agradecemos o seu feedback construtivo!
> Visite as nossas orientações do [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuir](CONTRIBUTING.md). Aguardamos o seu feedback construtivo!
## 🧭 Acesso offline
## 🧭 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`.
Pode executar esta documentação offline usando [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`.
## 📘 PDF
@ -211,7 +213,7 @@ A nossa equipa 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 / Agents
@ -230,7 +232,7 @@ A nossa equipa produz outros cursos! Confira:
---
### Aprendizagem Fundamental
### Aprendizagem Core
[](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)
@ -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 aprendizes e desenvolvedores 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 está licenciado sob a licença MIT. Consulte 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.
**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 para garantir a precisão, por favor tenha em conta que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.