|
|
2 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 3 weeks ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 3 weeks ago | |
| Git-Basics | 4 months ago | |
| docs | 5 months ago | |
| lesson-template | 5 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 5 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 5 months ago | |
| CONTRIBUTING.md | 5 months ago | |
| README.md | 2 weeks ago | |
| SECURITY.md | 5 months ago | |
| SUPPORT.md | 5 months ago | |
| _404.md | 5 months ago | |
| for-teachers.md | 2 weeks ago | |
README.md
Dezvoltare Web pentru Începători - Un Curriculum
Învață elementele fundamentale ale dezvoltării web cu cursul nostru cuprinzător de 12 săptămâni oferit de Microsoft Cloud Advocates. Fiecare dintre cele 24 de lecții explorează JavaScript, CSS și HTML prin proiecte practice precum terarii, extensii pentru browser și jocuri spațiale. Participă la chestionare, discuții și teme practice. Îmbunătățește-ți abilitățile și optimizează reținerea cunoștințelor cu pedagogia noastră eficientă bazată pe proiecte. Începe-ți călătoria în programare astăzi!
Alătură-te comunității Discord Azure AI Foundry
Urmează acești pași pentru a începe să folosești aceste resurse:
- Fork Repository-ul: Click pe
- Clonează Repository-ul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Alătură-te Discord Azure AI Foundry și întâlnește experți și alți dezvoltatori
🌐 Suport Multilingv
Susținut prin GitHub Action (Automat și Întotdeauna Actualizat)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Preferi să Clonazi Local?
Acest repository include peste 50 de traduceri, sporind semnificativ dimensiunea descărcării. Pentru a clona fără traduceri, folosește sparse checkout:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'Acest lucru îți oferă tot ce ai nevoie pentru a parcurge cursul cu o descărcare mult mai rapidă.
Dacă dorești să fie susținute și alte limbi de traducere, acestea sunt listate aici
🧑🎓 Ești student?
Vizitează pagina Student Hub unde vei găsi resurse de început, pachete pentru studenți și chiar modalități de a obține un voucher gratuit pentru certificare. Aceasta este pagina pe care dorești să o adaugi la favorite și să o verifici din când în când, deoarece schimbăm conținutul lunar.
📣 Anunț - Provocări noi pentru modul Agent GitHub Copilot de completat!
Provocare nouă adăugată, caută "GitHub Copilot Agent Challenge 🚀" în majoritatea capitolelor. Este o provocare nouă pe care să o completezi folosind GitHub Copilot și modul Agent. Dacă nu ai folosit modul Agent până acum, acesta este capabil nu doar să genereze text, ci și să creeze și editeze fișiere, să ruleze comenzi și mai mult.
📣 Anunț - Proiect Nou de construit folosind Generative AI
Proiectul nou Asistent AI a fost adăugat recent, vezi proiectul
📣 Anunț - Curriculum Nou despre Generative AI pentru JavaScript a fost lansat
Nu rata noul nostru curriculum pentru Generative AI!
Vizitează https://aka.ms/genai-js-course pentru a începe!
- Lecții acoperind totul, de la elementele de bază până la RAG.
- Interacționează cu personaje istorice folosind GenAI și aplicația noastră companion.
- Narațiune distractivă și captivantă, vei călători în timp!
Fiecare lecție include o temă de completat, o verificare a cunoștințelor și o provocare pentru a te ghida în învățarea unor subiecte precum:
- Prompting și ingineria prompturilor
- Generarea de aplicații text și imagine
- Aplicații de căutare
Vizitează https://aka.ms/genai-js-course pentru a începe!
🌱 Începe
Profesori, am inclus câteva sugestii despre cum să folosiți acest curriculum. Ne-ar plăcea să primim feedback-ul vostru în forumul nostru de discuții!
Elevi, pentru fiecare lecție, începeți cu un chestionar pre-lecture și urmați parcurgerea materialului didactic, completarea diverselor activități și verificați-vă înțelegerea cu chestionarul post-lecture.
Pentru a vă îmbunătăți experiența de învățare, conectați-vă cu colegii pentru a lucra împreună la proiecte! Discuțiile sunt încurajate în forumul nostru de discuții unde echipa noastră de moderatori va fi disponibilă să vă răspundă la întrebări.
Pentru a vă extinde educația, recomandăm cu căldură explorarea Microsoft Learn pentru materiale de studiu suplimentare.
📋 Configurarea mediului de lucru
Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începi, poți alege să rulezi curriculum-ul într-un Codespace (un mediu bazat pe browser, fără instalări necesare), sau local pe calculatorul tău folosind un editor de text precum Visual Studio Code.
Creează-ți repository-ul
Pentru a-ți salva munca mai ușor, este recomandat să îți creezi propria copie a acestui repository. Poți face asta dând click pe butonul Use this template din partea de sus a paginii. Aceasta va crea un nou repository în contul tău GitHub cu o copie a curriculumului.
Urmărește acești pași:
- Fork Repository-ul: Click pe butonul "Fork" din colțul din dreapta sus al acestei pagini.
- Clonează Repository-ul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Rularea curriculum-ului într-un Codespace
În copia ta de repository pe care ai creat-o, dă click pe butonul Code și selectează Open with Codespaces. Aceasta va crea un nou Codespace pentru tine unde să lucrezi.
Rularea curriculum-ului local pe calculatorul tău
Pentru a rula acest curriculum local pe calculator, vei avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Prima lecție, Introducere în limbajele de programare și uneltele meseriei, te va ghida prin diverse opțiuni pentru fiecare dintre aceste unelte, pentru a putea selecta ce funcționează cel mai bine pentru tine.
Recomandarea noastră este să folosești Visual Studio Code ca editor, care de asemenea are un Terminal integrat. Poți descărca Visual Studio Code aici.
-
Clonează repository-ul pe calculatorul tău. Poți face asta dând click pe butonul Code și copiază URL-ul:
CodeSpace Apoi, deschide Terminal în cadrul Visual Studio Code și execută următoarea comandă, înlocuind
<your-repository-url>cu URL-ul pe care tocmai l-ai copiat:git clone <your-repository-url> -
Deschide folderul în Visual Studio Code. Poți face asta făcând clic pe File > Open Folder și selectând folderul pe care tocmai l-ai clonat.
Extensii Visual Studio Code recomandate:
- Live Server - pentru a previzualiza pagini HTML în Visual Studio Code
- Copilot - pentru a te ajuta să scrii cod mai rapid
📂 Fiecare lecție include:
- schiță opțională
- videoclip suplimentar opțional
- quiz de încălzire înainte de lecție
- lecție scrisă
- pentru lecțiile bazate pe proiect, ghiduri pas cu pas despre cum să construiești proiectul
- verificări ale cunoștințelor
- o provocare
- lectură suplimentară
- temă
- quiz după lecție
O notă despre quizuri: Toate quizurile sunt conținute în folderul Quiz-app, 48 de quizuri în total, fiecare cu câte trei întrebări. Sunt disponibile aici; aplicația de quiz poate fi rulată local sau implementată pe Azure; urmează instrucțiunile din folderul
quiz-app.
🗃️ Lecții
| Numele Proiectului | Concepte Învățate | Obiectivele de Învățare | Lecția Legată | Autor | |
|---|---|---|---|---|---|
| 01 | Început | Introducere în programare și uneltele meseriei | Învață bazele fundamentale din spatele celor mai multe limbaje de programare și despre software care ajută dezvoltatorii profesioniști să-și facă munca | Introducere în limbaje de programare și unelte ale meseriei | Jasmine |
| 02 | Început | Bazele GitHub, inclusiv lucrul în echipă | Cum să folosești GitHub în proiectul tău, cum să colaborezi cu alții pe o bază de cod | Introducere în GitHub | Floor |
| 03 | Început | Accesibilitate | Învață bazele accesibilității web | Fundamentele accesibilității | Christopher |
| 04 | Bazele JS | Tipuri de date în JavaScript | Bazele tipurilor de date în JavaScript | Tipuri de date | Jasmine |
| 05 | Bazele JS | Funcții și metode | Învață despre funcții și metode pentru a gestiona fluxul logicii unei aplicații | Funcții și Metode | Jasmine și Christopher |
| 06 | Bazele JS | Luarea deciziilor cu JS | Învață cum să creezi condiții în codul tău folosind metode de luare a deciziilor | Luarea deciziilor | Jasmine |
| 07 | Bazele JS | Arrays și Loops | Lucrează cu date folosind arrays și bucle în JavaScript | Arrays și Loops | Jasmine |
| 08 | Terrarium | HTML în practică | Construiește HTML-ul pentru a crea un terariu online, concentrându-se pe crearea unui layout | Introducere în HTML | Jen |
| 09 | Terrarium | CSS în practică | Construiește CSS-ul pentru a stiliza terariul online, concentrându-se pe bazele CSS, inclusiv realizarea unei pagini responsive | Introducere în CSS | Jen |
| 10 | Terrarium | Închideri JavaScript, manipularea DOM | Construiește JavaScript pentru a face terariul să funcționeze ca o interfață drag-and-drop, concentrându-se pe închideri și manipularea DOM | Închideri JS, manipularea DOM | Jen |
| 11 | Typing Game | Construirea unui joc de tastare | Învață cum să folosești evenimentele de tastatură pentru a conduce logica aplicației tale JavaScript | Programare bazată pe evenimente | Christopher |
| 12 | Green Browser Extension | Lucrul cu browserele | Învață cum funcționează browserele, istoria lor și cum să creezi elementele de început ale unei extensii pentru browser | Despre browsere | Jen |
| 13 | Green Browser Extension | Construirea unui formular, apelarea unui API și stocarea variabilelor în stocarea locală | Construiește elementele JavaScript ale extensiei tale pentru browser pentru a apela un API folosind variabile stocate local | API-uri, formulare și stocare locală | Jen |
| 14 | Green Browser Extension | Procese de fundal în browser, performanța web | Folosește procesele de fundal ale browserului pentru a gestiona iconița extensiei; învață despre performanța web și unele optimizări pentru a îmbunătăți performanța | Sarcini de fundal și performanță | Jen |
| 15 | Space Game | Dezvoltare avansată a jocurilor cu JavaScript | Învață despre moștenire folosind atât Clase cât și Compoziție și modelul Pub/Sub, ca pregătire pentru construirea unui joc | Introducere în dezvoltare avansată de jocuri | Chris |
| 16 | Space Game | Desen pe canvas | Învață despre API-ul Canvas, folosit pentru a desena elemente pe ecran | Desen pe Canvas | Chris |
| 17 | Space Game | Mutarea elementelor pe ecran | Descoperă cum pot elementele să capete mișcare folosind coordonatele carteziene și API-ul Canvas | Mutarea elementelor | Chris |
| 18 | Space Game | Detectarea coliziunilor | Fă elementele să se ciocnească și să reacționeze unele la altele folosind apăsări de taste și oferă o funcție de cooldown pentru a asigura performanța jocului | Detectarea coliziunilor | Chris |
| 19 | Space Game | Păstrarea scorului | Efectuează calcule matematice bazate pe starea și performanța jocului | Păstrarea scorului | Chris |
| 20 | Space Game | Terminarea și repornirea jocului | Învață despre terminarea și repornirea jocului, incluzând curățarea resurselor și resetarea valorilor variabile | Condiția de terminare | Chris |
| 21 | Banking App | Șabloane HTML și rute într-o aplicație web | Învață cum să creezi scheletul arhitecturii unui site multipagină folosind rutare și șabloane HTML | Șabloane HTML și rute | Yohan |
| 22 | Banking App | Construirea unui formular de autentificare și înregistrare | Învață despre construirea formularelor și gestionarea rutinei de validare | Formulare | Yohan |
| 23 | Banking App | Metode de preluare și utilizare a datelor | Cum circulă datele în și din aplicația ta, cum să le preiei, stochezi și elimini | Date | Yohan |
| 24 | Banking App | Concepte de gestionare a stării | Învață cum aplicația ta păstrează starea și cum să o gestionezi programatic | Gestionarea stării | Yohan |
| 25 | Browser/VScode Code | Lucru cu VScode | Învață cum să folosești un editor de cod | Folosește editorul de cod VScode | Chris |
| 26 | AI Assistants | Lucru cu AI | Învață cum să construiești propriul tău asistent AI | Proiect asistent AI | Chris |
🏫 Pedagogie
Curricula noastră este proiectată având în vedere două principii pedagogice-cheie:
- învățare bazată pe proiecte
- quizuri frecvente
Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai noi unelte și tehnici folosite de dezvoltatorii web din ziua de azi. Studenții vor avea ocazia să dobândească experiență practică construind un joc de tastare, un terariu virtual, o extensie pentru browser eco-friendly, un joc în stil Space Invaders și o aplicație bancară pentru afaceri. La finalul seriei, studenții vor avea o înțelegere solidă a dezvoltării web.
🎓 Poți urma primele câteva lecții din această curriculum ca un Learn Path pe Microsoft Learn!
Asigurând că conținutul se aliniază cu proiectele, procesul devine mai captivant pentru studenți și retenția conceptelor va fi augmentată. Am scris de asemenea mai multe lecții introductive în bazele JavaScript pentru a introduce conceptele, însoțite de un videoclip din colecția „Beginners Series to: JavaScript”, al cărui autori au contribuit și la această curriculă.
În plus, un quiz cu miză redusă înainte de clasă setează intenția studentului către învățarea subiectului, iar un al doilea quiz după clasă asigură o retenție mai bună. Această curriculă a fost concepută să fie flexibilă și distractivă și poate fi urmată integral sau parțial. Proiectele încep mici și devin din ce în ce mai complexe până la finalul ciclului de 12 săptămâni.
Deși am evitat intenționat introducerea framework-urilor JavaScript pentru a ne concentra pe abilitățile de bază necesare ca dezvoltator web înainte de a adopta un framework, un pas următor bun după această curriculă este să înveți despre Node.js printr-o altă colecție de videoclipuri: „Beginner Series to: Node.js”.
Vizitează ghidurile noastre Cod de conduită și Contribuire. Apreciem feedback-ul tău constructiv!
🧭 Acces offline
Poți rula această documentație offline folosind Docsify. Fă fork la acest repo, instalează Docsify pe mașina ta locală și apoi în folderul rădăcină al acestui repo tastează docsify serve. Site-ul va fi servit pe portul 3000 pe localhost-ul tău: localhost:3000.
Un PDF cu toate lecțiile poate fi găsit aici.
🎒 Alte cursuri
Echipa noastră produce și alte cursuri! Consultați:
LangChain
Azure / Edge / MCP / Agenți
Seria Inteligenței Generative
Învățare de bază
Seria Copilot
Obținerea ajutorului
Dacă întâmpinați dificultăți sau aveți întrebări despre construirea aplicațiilor AI. Alăturați-vă altor cursanți și dezvoltatori experimentați în discuții despre MCP. Este o comunitate de sprijin unde întrebările sunt binevenite și cunoștințele sunt împărtășite liber.
Dacă aveți feedback despre produs sau erori în timpul construcției, vizitați:
Licență
Acest depozit este licențiat sub licența MIT. Consultați fișierul LICENSE pentru mai multe informații.
Declinare de responsabilitate: Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim să oferim o traducere exactă, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original, în limba sa nativă, trebuie considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări eronate rezultate din utilizarea acestei traduceri.


