20 KiB
Sviluppo Web per Principianti - Un programma di lezioni
Gli Azure Cloud Advocates di Microsoft hanno il piacere di offrire un corso di 12 settimane, 24 lezioni riguardante le basi di JavaScript, CSS e HTML. Ogni lezione include dei quiz pre e post lezione, istruzioni scritte per completare la lezione, una soluzione, un esercizio ed altro. La nostra pedagogia basata su progetti ti consente di imparare mentre costruisci, un metodo collaudato per consolidare le nuove skill.
Sentiti ringraziamenti ai nostri autori Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, e all'artista sketchnote Tomomi Imura!
Sei uno studente?
Inizia con le seguenti risorse:
- Pagina Student Hub In questa pagina troverai risorse per principianti, pacchetti studente ed anche come ottenere voucher di certificazione gratuiti. Questa è la pagina da salvare tra i preferiti e controllare di tanto in tanto, ne aggiorniamo i contenuti con cadenza almeno mensile.
- Microsoft Student Learn ambassadors Unisciti alla community globale di student ambassadors, questa potrebbe essere la tua strada per entrare in Microsoft
Per iniziare
Insegnanti, abbiamo inserito alcuni suggerimenti su come utilizzare questo corso. Ci piacerebbe ricevere il tuo feedback nel nostro forum di discussione!
Studenti, per usare questo corso per conto vostro, effettuate una fork dell'intera repo e completate gli esercizi da soli iniziando con i quiz pre-lezione, proseguite poi con la lettura e completate il resto delle attività. Provate a creare i progetti comprendendo le lezioni piuttosto che copiando il codice soluzione; tuttavia, detto codice è disponibile nella cartella /solutions di ogni lezione comprendente un progetto. Un'altra idea potrebbe essere du creare un gruppo di studi con gli amici ed esplorare i contenuti insieme. Per scoprire di più, consigliamo Microsoft Learn e la visione dei video menzionati sotto.
Gif di Mohit Jaisal
🎥 Clicca l'immagine sopra per un video riguardo al progetto e delle persone che lo hanno realizzato!
Pedagogia
Abbiamo tenuto conto di due principi pedagogici nella realizzazione di questo corso: assicurarci che sia basato su dei progetti e che includa frequenti quiz. Alla fine di questa serie, gli studenti avranno costruito un tipico gioco, un terrario virtuale, una estensione del browser 'green', un gioco stile 'space invaders' e un'app business di banking, ed avranno appreso le basi di JavaScript, HTML e CSS insieme all'attuale toolchain degli sviluppatori web di oggi.
🎓 Puoi seguire le prime lezioni di questo corso come Learn Path su Microsoft Learn!
Assicurandoci che il contenuto sia allineato con i progetti, il processo viene reso più coinvolgente per gli studenti e la memorizzazione dei concetti sarà migliorata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre dei concetti, accompagnate da video dalla collezione di video tutorial "Serie per Principianti a: JavaScript", della quale alcuni autori hanno contribuito a questo progetto.
Inoltre un quiz a bassa difficoltà prima di una lezione fissa nello studente l'intenzione di apprendere un argomento, mentre un secondo quiz dopo la lezione garantisce un'ulteriore conservazione delle nozioni apprese. Questo corso è stato progettato per essere flessibile e divertente e può essere seguito per intero o solo in parte. Il progetto parte in piccolo per poi diventare progressivamente più complesso verso la fine del ciclo di 12 settimane.
Anche se abbiamo volutamente evitato di introdurre i frameworks JavaScript per concentrarci sulle skill di base richieste ad un web developer prima di adottare un framework, un buon prossimo passo per completare questo corso sarebbe scoprire di più riguardo a Node.js tramite un'altra collezione di video: "Serie per Principianti a: Node.js".
Guarda il nostro Codice di Condotta e le linee guida su Contributi e Traduzioni. I tuoi feedback costruttivi sono i benvenuti!
Ogni lezione include:
- sketchnote opzionale
- video supplementare opzionale
- quiz di riscaldamento pre-lezione
- lezione scritta
- per le lezioni basate su progetti, guida passo-passo su come costruire il progetto
- check delle competenze
- una sfida
- letture aggiuntive
- compiti
- quiz post-lezione
Una nota riguardo ai quiz: Tutti i quiz sono contenuti in questa app, per un totale di 48 quiz da 3 domande ciascuno. Sono raggiungibili dall'interno delle lezioni ma possono anche essere eseguiti in locale; segui le istruzioni contenute nella cartella
quiz-app. Questi sono progressivamente in via di traduzione.
Lezioni
| Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Link alla Lezione | Autore | |
|---|---|---|---|---|---|
| 01 | Per Iniziare | Introduzione alla programmazione e agli strumenti del mestiere | Scopri le fondamenta della maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il proprio lavoro | Introduzione alla programmazione e agli strumenti del mestiere | Jasmine |
| 02 | Per Iniziare | Basi di GitHub, include lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri sul codice | Introduzione a GitHub | Floor |
| 03 | Per Iniziare | Accessibilità | Impara le basi dell'accessibilità web | Fondamenta di Accessibilità | Christopher |
| 04 | Basi di JS | JavaScript Data Types | Le basi dei data types di JavaScript | Data Types | Jasmine |
| 05 | Basi di JS | Funzioni e Metodi | Informazioni su funzioni e metodi per gestire il flusso logico di un'applicazione | Funzioni e Metodi | Jasmine and Christopher |
| 06 | Basi di JS | Prendere decisioni con JS | Scopri come creare condizioni nel tuo codice utilizzando il processo decisionale | Prendere Decisioni | Jasmine |
| 07 | Basi di JS | Arrays e Loops | Lavorare con i dati usando gli arrays ed i loops in JavaScript | Arrays e Loops | Jasmine |
| 08 | Terrario | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | Introduzione all'HTML | Jen |
| 09 | Terrario | CSS in Pratica | Costruisci il CSS per dare uno stile al terrario online, concentrandoti sulle basi del CSS incluso come rendere la pagina reattiva | Introduzione al CSS | Jen |
| 10 | Terrario | JavaScript Closures, DOM manipulation | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle closures e sulla DOM manipulation | JavaScript Closures, DOM manipulation | Jen |
| 11 | Gioco di Battitura | Costruisci un Gioco di Battitura | Scopri come utilizzare gli eventi della tastiera per guidare la logica della tua app JavaScript | Programmazione guidata dagli eventi | Christopher |
| 12 | Estensione Browser Green | Lavorare con i Browser | Scopri come funzionano i browser, la loro storia e come impostare i primi elementi di un'estensione del browser | Riguardo ai Browsers | Jen |
| 13 | Estensione Browser Green | Creazione di un modulo, chiamata API e archiviazione di variabili nella memoria locale | Crea gli elementi JavaScript della tua estensione browser per chiamare un'API utilizzando le variabili archiviate nella memoria locale | APIs, Forms, e Memoria Locale | Jen |
| 14 | Estensione Browser Green | Processi in background nel browser, performance web | Utilizzare i processi in background del browser per gestire l'icona dell'estensione; scopri di più sulle prestazioni web e alcune ottimizzazioni da apportare | Processi in Background e Performance | Jen |
| 15 | Gioco Spaziale | Sviluppo di giochi più avanzati con JavaScript | Scopri l'ereditarietà utilizzando sia Classi che Composizione e il modello Pub/Sub, in preparazione alla creazione di un gioco | Introduzione allo Sviluppo di Giochi Avanzato | Chris |
| 16 | Gioco Spaziale | Disegnare su canvas | Ulteriori informazioni sull'API Canvas, utilizzata per disegnare elementi su uno schermo | Disegnare su Canvas | Chris |
| 17 | Gioco Spaziale | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi utilizzando le coordinate cartesiane e l'API Canvas | Muovere elementi | Chris |
| 18 | Gioco Spaziale | Rilevamento delle collisioni | Far scontrare e reagire tra loro gli element premendo i tasti e fornendo una funzione di cooldown per garantire le prestazioni del gioco | Rilevamento delle collisioni | Chris |
| 19 | Gioco Spaziale | Tenere il Punteggio | Esegui calcoli matematici in base allo stato e alle prestazioni del gioco | Tenere il Punteggio | Chris |
| 20 | Gioco Spaziale | Terminare e riavviare il gioco | Scopri come terminare e riavviare il gioco, inclusa la pulizia degli asset e il ripristino dei valori delle variabili | Le Condizioni di Termine | Chris |
| 21 | App Bancaria | Modelli e rotte HTML in un'app Web | Scopri come creare le basi dell'architettura di un sito Web multipagina utilizzando routing e templates HTML | Templates HTML e Rotte | Yohan |
| 22 | App Bancaria | Costruire un Form di Login e Registrazione | Linformazioni sulla creazione di moduli e sulla gestione delle routine di convalida | Forms | Yohan |
| 23 | App Bancaria | Metodi di recupero e utilizzo dei dati | Come i dati entrano e escono dalla tua app, come recuperarli, archiviarli ed eliminarli | Dati | Yohan |
| 24 | App Bancaria | Concetti di Gestione dello Stato | Scopri come la tua app mantiene lo stato e come gestirla programmaticamente | Gestione dello Stato | Yohan |
Accesso offline
Puoi utilizzare questa documentazione offline utilizzando Docsify. Esegui un fork di questa repo, installa Docsify sul tuo dispositivo locale e successivamente nella cartella radice (root) di questa repo esegui docsify serve. Il sito web girerà sulla porta 3000 del tuo localhost: localhost:3000.
Puoi trovare un PDF con tutte le lezioni qui.
Altri corsi
Il nostro team produce altri corsi! Dai uno sguardo: