|
|
4 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 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 | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 4 days ago | |
| AGENTS.md | 4 days ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 4 days ago | |
| Roadmap.md | 4 days ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks 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 realizat 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 competențele și optimizează retenția cunoștințelor cu pedagogia noastră eficientă bazată pe proiecte. Începe-ți călătoria în programare astăzi!
Alătură-te Comunității Azure AI Foundry pe Discord
Urmează acești pași pentru a începe să folosești aceste resurse:
- Fork-uiește Repositorul: Click pe
- Clonează Repositorul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Alătură-te Azure AI Foundry Discord și întâlnește experți și alți dezvoltatori
🌐 Suport Multi-Limbaj
Suportat prin GitHub Action (Automatizat ș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ă Clonezi Local?
Acest repository include traduceri în peste 50 de limbi, ceea ce crește 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'Acesta îți oferă tot ce ai nevoie pentru a finaliza cursul cu o descărcare mult mai rapidă.
Dacă dorești să fie susținute limbi suplimentare de traducere, acestea sunt listate aici
🧑🎓 Ești student?
Vizitează pagina Student Hub unde vei găsi resurse pentru începători, pachete pentru studenți și chiar metode de a obține un voucher gratuit pentru certificat. Aceasta este pagina pe care vrei să o adaugi la favorite și să o verifici din când în când deoarece conținutul este schimbat lunar.
📣 Anunț - Noi provocări GitHub Copilot Agent mode de completat!
Provocare nouă adăugată, caută "GitHub Copilot Agent Challenge 🚀" în majoritatea capitolelor. Aceasta este o nouă provocare pentru tine de completat folosind GitHub Copilot și modul Agent. Dacă nu ai folosit modul Agent înainte, acesta poate nu doar să genereze text, ci și să creeze și editeze fișiere, să ruleze comenzi și multe altele.
📣 Anunț - Proiect nou de construit folosind Generative AI
Proiect nou cu Asistent AI tocmai adăugat, vezi proiectul aici
📣 Anunț - Curriculum nou despre Generative AI pentru JavaScript a fost lansat recent
Nu rata noul nostru curriculum Generative AI!
Vizitează https://aka.ms/genai-js-course pentru a începe!
- Lecții care acoperă 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, un test de cunoștințe și o provocare care te ghidează în învățarea subiectelor precum:
- Promptarea și ingineria de prompturi
- Generarea de aplicații text și imagini
- Aplicații de căutare
Vizitează https://aka.ms/genai-js-course pentru a începe!
🌱 Începutul
Profesori, am inclus câteva sugestii despre cum să folosiți acest curriculum. Ne-ar plăcea feedback-ul vostru în forumul nostru de discuții!
Elevi, pentru fiecare lecție, începeți cu un chestionar pre-lectură, continuați cu citirea materialului de curs, efectuarea diverselor activități și verificați-vă înțelegerea cu chestionarul post-lectură.
Pentru a vă îmbunătăți experiența de învățare, conectați-vă cu colegii pentru a lucra împreună la proiecte! Sunt încurajate discuțiile în forumul nostru de discuții unde echipa noastră de moderatori va fi disponibilă să răspundă întrebărilor voastre.
Pentru a vă continua educația, vă recomandăm cu căldură să explorați Microsoft Learn pentru materiale suplimentare de studiu.
📋 Configurarea mediului tău
Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începi poți alege să rulezi curriculumul într-un Codespace (un mediu bazat pe browser, fără necesitatea instalării), sau local pe calculatorul tău folosind un editor de text precum Visual Studio Code.
Creează-ți propriul repository
Pentru a-ți salva ușor munca, se recomandă să îți creezi o copie a acestui repository. Poți face asta apăsând butonul Use this template din partea de sus a paginii. Aceasta va crea un repository nou în contul tău GitHub cu o copie a curriculumului.
Urmează acești pași:
- Fork-uiește Repositorul: Apasă butonul "Fork" din colțul dreapta sus al acestei pagini.
- Clonează Repositorul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Rularea curriculumului într-un Codespace
În copia ta de repository pe care ai creat-o, apasă butonul Code și selectează Open with Codespaces. Aceasta va crea un nou Codespace în care să lucrezi.
Rularea curriculumului local pe calculatorul tău
Pentru a rula acest curriculum local pe calculatorul tău, vei avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Prima noastră lecție, Introducere în Limbajele de Programare și Unelte de Bază, te va ghida prin diverse opțiuni pentru fiecare dintre aceste instrumente, pentru a-ți putea alege ce funcționează cel mai bine pentru tine.
Recomandarea noastră este să folosești Visual Studio Code ca editor, care are și un Terminal încorporat. Poți descărca Visual Studio Code de aici.
-
Clonează repository-ul pe calculatorul tău. Poți face asta apăsând butonul Code și copiind URL-ul:
CodeSpace Apoi, deschide Terminal în cadrul Visual Studio Code și execută comanda următoare, î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 acest lucru făcând clic pe Fișier > Deschide folder și selectând folderul pe care tocmai l-ai clonat.
Extensii recomandate pentru Visual Studio Code:
- Live Server - pentru a previzualiza paginile 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 proiecte, ghiduri pas cu pas despre cum să construiești proiectul
- verificări de cunoștințe
- o provocare
- lecturi suplimentare
- temă
- quiz post-lecție
O notă despre quiz-uri: Toate quiz-urile sunt conținute în folderul Quiz-app, un total de 48 de quiz-uri cu câte trei întrebări fiecare. Sunt disponibile aici, aplicația pentru quiz poate fi rulată local sau implementată pe Azure; urmează instrucțiunile din folderul
quiz-app.
🗃️ Lecții
| Numele Proiectului | Concepte Predate | Obiective de Învățare | Lecția Legată | Autor | |
|---|---|---|---|---|---|
| 01 | Începutul | Introducere în programare și uneltele meseriei | Învață fundamentele de bază din spatele majorității limbajelor de programare și despre software-ul care ajută dezvoltatorii profesioniști | Introducere în limbajele de programare și uneltele meseriei | Jasmine |
| 02 | Începutul | Noțiuni de bază GitHub, inclusiv lucru în echipă | Cum să folosești GitHub în proiectul tău, cum să colaborezi cu alții pe un cod sursă | Introducere în GitHub | Floor |
| 03 | Începutul | Accesibilitate | Învață elementele de bază ale accesibilității web | Fundamentele accesibilității | Christopher |
| 04 | Bazele JS | Tipuri de date în JavaScript | Noțiunile de bază despre tipurile de date JavaScript | Tipuri de date | Jasmine |
| 05 | Bazele JS | Funcții și Metode | Învață despre funcții și metode pentru a gestiona fluxul logic al unei aplicații | Funcții și Metode | Jasmine și Christopher |
| 06 | Bazele JS | Luarea Deciziilor cu JS | Învață cum să creezi condiții în cod folosind metode de luare a deciziilor | Luarea deciziilor | Jasmine |
| 07 | Bazele JS | Array-uri și Buclă | Lucrează cu date folosind array-uri și bucle în JavaScript | Array-uri și bucle | Jasmine |
| 08 | Terrarium | HTML în practică | Construiește HTML-ul pentru a crea un terrarium online, concentrându-te pe realizarea unui layout | Introducere în HTML | Jen |
| 09 | Terrarium | CSS în practică | Construiește CSS-ul pentru a stiliza terrariul online, concentrându-te pe elementele de bază CSS, inclusiv cum să faci pagina responsive | Introducere în CSS | Jen |
| 10 | Terrarium | Closures în JavaScript, manipularea DOM | Construiește JavaScript-ul pentru a face terrariul să funcționeze ca o interfață drag/drop, concentrându-te pe closures și manipularea DOM-ului | Closures JavaScript, manipularea DOM | Jen |
| 11 | Typing Game | Construirea unui joc de tastare | Învață cum să folosești evenimentele de tastatură pentru a condimenta logica aplicației tale JavaScript | Programare bazată pe evenimente | Christopher |
| 12 | Green Browser Extension | Lucrul cu browsere | Învață cum funcționează browserele, istoria lor și cum să stabilești elementele de bază 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 browserului pentru a apela un API folosind variabile stocate local | API-uri, formulare și stocare locală | Jen |
| 14 | Green Browser Extension | Procesarea în fundal în browser, performanța web | Folosește procesele în fundal ale browserului pentru a gestiona pictograma extensiei; învață despre performanța web și optimizări pentru a face | Task-uri 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, în pregătirea pentru construire unui joc | Introducere în dezvoltarea avansată a jocurilor | Chris |
| 16 | Space Game | Desenarea pe canvas | Învață despre API-ul Canvas, folosit pentru a desena elemente pe ecran | Desenarea pe canvas | Chris |
| 17 | Space Game | Mișcarea elementelor pe ecran | Descoperă cum elementele pot obține mișcare folosind coordonatele carteziene și API-ul Canvas | Mișcarea elementelor | Chris |
| 18 | Space Game | Detectarea coliziunilor | Fă elementele să se ciocnească și să reacționeze unul la altul 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 | Ținerea scorului | Realizează calcule matematice în funcție de starea și performanța jocului | Ținerea scorului | Chris |
| 20 | Space Game | Terminarea și repornirea jocului | Învață despre terminarea și repornirea jocului, inclusiv curățarea asset-urilor ș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 obținere și utilizare a datelor | Cum circulă datele în și din aplicația ta, cum să le obții, să le stochezi și să le 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 | Lucrul cu VScode | Învață cum să folosești un editor de cod | Folosește editorul VScode | Chris |
| 26 | AI Assistants | Lucrul cu AI | Învață cum să construiești propriul asistent AI | Proiect Asistent AI | Chris |
🏫 Pedagogie
Curriculumul nostru este proiectat având în minte două principii pedagogice esențiale:
- învățarea bazată pe proiecte
- quizuri frecvente
Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai recente unelte și tehnici folosite de dezvoltatorii web de astăzi. Studenții vor avea oportunitatea de a dezvolta experiență practică construind un joc de tastare, un terrarium virtual, o extensie de browser eco-friendly, un joc tip space invader și o aplicație bancară pentru afaceri. La finalul seriei, studenții vor avea o înțelegere solidă a dezvoltării web.
🎓 Poți parcurge primele lecții din acest curriculum ca Cale de Învățare pe Microsoft Learn!
Asigurându-ne că conținutul se aliniază cu proiectele, procesul devine mai captivant pentru studenți și reținerea conceptelor este amplificată. De asemenea, am scris mai multe lecții introductive despre bazele JavaScript pentru a introduce conceptele, însoțite de un videoclip din colecția de tutoriale video "Seria pentru începători la: JavaScript", al căror autori au contribuit și la acest curriculum.
În plus, un quiz cu miză scăzută înainte de clasă setează intenția studentului spre învățarea unui subiect, în timp ce un al doilea quiz după clasă asigură o reținere suplimentară. Acest curriculum a fost proiectat să fie flexibil și distractiv și poate fi parcurs 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 să introducem cadrele JavaScript pentru a ne concentra pe abilitățile de bază necesare ca dezvoltator web înainte de a adopta un framework, un bun pas următor după finalizarea acestui curriculum ar fi învățarea despre Node.js printr-o altă colecție de videoclipuri: "Seria pentru începători la: Node.js".
Vizitează Codul nostru de conduită și liniile directoare pentru Contribuții. Așteptăm cu interes feedback-ul tău constructiv!
🧭 Acces offline
Poți rula această documentație offline folosind Docsify. Fă un fork acestui repo, instalează Docsify pe mașina ta locală, 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! Verifică:
LangChain
Azure / Edge / MCP / Agenți
Seria AI Generativă
Învățare de bază
Seria Copilot
Obținerea ajutorului
Dacă întâmpini dificultăți sau ai întrebări despre construirea aplicațiilor AI, alătură-te colegilor cursanți și dezvoltatorilor experimentați în discuții despre MCP. Este o comunitate de susținere unde întrebările sunt binevenite iar cunoștințele sunt împărtășite liber.
Dacă ai feedback despre produs sau întâmpini erori în timp ce construiești, vizitează:
Licență
Acest depozit este licențiat sub licența MIT. Vezi 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 pentru acuratețe, 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 autorizată. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite rezultate din utilizarea acestei traduceri.


