|
|
1 week ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 week ago | |
| 2-js-basics | 1 week ago | |
| 3-terrarium | 1 week ago | |
| 4-typing-game | 1 week ago | |
| 5-browser-extension | 1 week ago | |
| 6-space-game | 1 week ago | |
| 7-bank-project | 1 week ago | |
| 8-code-editor/1-using-a-code-editor | 1 week ago | |
| 9-chat-project | 1 week ago | |
| 10-ai-framework-project | 1 week ago | |
| Git-Basics | 1 week ago | |
| docs | 1 week ago | |
| lesson-template | 1 week ago | |
| memory-game | 1 week ago | |
| quiz-app | 1 week ago | |
| .co-op-translator.json | 1 week ago | |
| AGENTS.md | 1 week ago | |
| CODE_OF_CONDUCT.md | 1 week ago | |
| CONTRIBUTING.md | 1 week ago | |
| README.md | 1 week ago | |
| SECURITY.md | 1 week ago | |
| SUPPORT.md | 1 week ago | |
| _404.md | 1 week ago | |
| for-teachers.md | 1 week ago | |
README.md
Dezvoltare Web pentru Începători - Un Curriculum
Învățați elementele de bază 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, cum ar fi terarii, extensii pentru navigatoare și jocuri spațiale. Implicați-vă cu chestionare, discuții și teme practice. Îmbunătățiți-vă abilitățile și optimizați reținerea cunoștințelor cu pedagogia noastră eficientă bazată pe proiecte. Începeți-vă călătoria în programare astăzi!
Alăturați-vă Comunității Discord Azure AI Foundry
Urmați acești pași pentru a începe să utilizați aceste resurse:
- Fork-uiți Repositorul: Faceți clic pe
- Clonați Repositorul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Alăturați-vă Azure AI Foundry Discord și întâlniți experți și alți dezvoltatori
🌐 Suport Multilingv
Suportat prin GitHub Action (Automatizat & Î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 depozit include peste 50 de traduceri în limbi care măresc semnificativ dimensiunea de descărcare. 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'Aceasta îți oferă tot ce ai nevoie pentru a finaliza cursul cu o descărcare mult mai rapidă.
Dacă doriți să fie suportate și alte limbi 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 modalități de a obține un voucher pentru certificare gratuită. Aceasta este pagina pe care vrei să o adaugi la favorite și s-o verifici din când în când deoarece conținutul se schimbă lunar.
📣 Anunț - Noi provocări GitHub Copilot Agent mode de finalizat!
Nouă provocare adăugată, caută "GitHub Copilot Agent Challenge 🚀" în majoritatea capitolelor. Este o provocare nouă pentru tine de finalizat folosind GitHub Copilot și modul Agent. Dacă nu ai folosit până acum modul Agent, acesta este capabil nu doar să genereze text, ci și să creeze și să editeze fișiere, să ruleze comenzi și multe altele.
📣 Anunț - Proiect nou de construit folosind Generative AI
Proiect nou de asistent AI adăugat recent, verifică proiectul proiect
📣 Anunț - Curriculum nou despre Generative AI pentru JavaScript tocmai a fost lansat
Nu rata noul nostru curriculum Generative AI!
Vizitează https://aka.ms/genai-js-course pentru a începe!
- Lecții acoperind totul de la elementele de bază la RAG.
- Interacționează cu personaje istorice folosind GenAI și aplicația noastră însoțitoare.
- 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:
- Promptinge și ingineria de prompturi
- Generare de aplicații text și imagine
- Aplicații de căutare
Vizitează https://aka.ms/genai-js-course pentru a începe!
🌱 Începutul
Profesori, am inclus unele 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 înainte de prelegere și continuați cu parcurgerea materialului cursului, completarea diverselor activități și verificați-vă înțelegerea cu un chestionar după prelegere.
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ă la întrebările voastre.
Pentru a vă extinde educația, recomandăm insistent să explorați Microsoft Learn pentru materiale suplimentare de studiu.
📋 Configurarea mediului vostru
Acest curriculum are un mediu de dezvoltare gata de utilizat! Pe măsură ce începeți, puteți alege să rulați curriculumul într-un Codespace (un mediu bazat pe browser, fără instalări necesare), sau local pe calculatorul vostru folosind un editor de text precum Visual Studio Code.
Creați-vă propriul depozit
Pentru a vă salva ușor munca, se recomandă să vă creați propria copie a acestui depozit. Puteți face asta făcând clic pe butonul Use this template din zona de sus a paginii. Aceasta va crea un depozit nou în contul vostru GitHub cu o copie a curriculumului.
Urmați acești pași:
- Fork-uiți Repositorul: Faceți clic pe butonul "Fork" din colțul dreapta sus al acestei pagini.
- Clonați Repositorul:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Rularea curriculumului în Codespace
În copia voastră de acest depozit pe care ați creat-o, dați clic pe butonul Code și selectați Open with Codespaces. Aceasta va crea un nou Codespace în care să lucrați.
Rularea curriculumului local pe calculatorul vostru
Pentru a rula acest curriculum local pe calculatorul vostru, veți avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Lecția noastră introductivă, Introducere în limbajele de programare și uneltele meseriei, vă va ghida prin diverse opțiuni pentru fiecare dintre aceste instrumente, pentru a selecta ce vi se potrivește cel mai bine.
Recomandarea noastră este să folosiți Visual Studio Code ca editor, care are și un Terminal integrat. Puteți descărca Visual Studio Code aici.
-
Clonați depozitul vostru pe calculator. Puteți face asta făcând clic pe butonul Code și copiind 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 acest lucru făcând clic pe File > Open Folder și selectând folderul pe care tocmai l-ai clonat.
Extensii recomandate pentru Visual Studio Code:
- Live Server - pentru a previzualiza pagini HTML în cadrul Visual Studio Code
- Copilot - pentru a te ajuta să scrii cod mai rapid
📂 Fiecare lecție include:
- schiță opțională
- videoclip suplimentar opțional
- chestionar 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
- lectură suplimentară
- temă
- chestionar post-lecție
O notă despre chestionare: Toate chestionarele sunt conținute în folderul Quiz-app, în total 48 de chestionare cu câte trei întrebări fiecare. Sunt disponibile aici, aplicația de chestionare poate fi rulată local sau poate fi 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 Unelte de Specialitate | Învață fundamentele de bază din majoritatea limbajelor de programare și despre software-ul care ajută dezvoltatorii profesioniști | Introducere în Limbaje de Programare și Unelte | Jasmine |
| 02 | Începutul | 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 | Începutul | Accesibilitate | Învață noțiunile de bază despre accesibilitatea web | Fundamentele Accesibilității | Christopher |
| 04 | Bazele JS | Tipurile de Date în JavaScript | Fundamentele 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 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 codul tău folosind metode de luare a deciziilor | Luarea Deciziilor | Jasmine |
| 07 | Bazele JS | Array-uri și Buclă | Lucrează cu datele folosind array-uri și bucle în JavaScript | Array-uri și Buclă | Jasmine |
| 08 | Terrarium | HTML în practică | Construiește HTML-ul pentru a crea un terrariu online, concentrându-te pe construirea unui layout | Introducere în HTML | Jen |
| 09 | Terrarium | CSS în practică | Construiește CSS-ul pentru stilizarea terrariului online, concentrându-te pe bazele CSS, inclusiv realizarea unei pagini responsive | Introducere în CSS | Jen |
| 10 | Terrarium | Închideri JavaScript, manipulare DOM | Construiește codul JavaScript pentru a face terrariul să funcționeze ca o interfață drag/drop, concentrându-te pe închideri și manipularea DOM | Închideri JavaScript, manipulare DOM | Jen |
| 11 | Typing Game | Construiește un joc de tastare | Învață cum să folosești evenimentele de la tastatură pentru a ghida logica aplicației JavaScript | Programare bazată pe evenimente | Christopher |
| 12 | Green Browser Extension | Lucrul cu Browsere | Învață cum funcționează browserele, istoria lor și cum să creezi câteva elemente de bază ale unei extensii de browser | Despre Browsere | Jen |
| 13 | Green Browser Extension | Construirea unui formular, apelarea unei API și stocarea în storage local | Construiește elementele JavaScript ale extensiei de browser pentru a apela o API folosind variabile stocate în storage local | API-uri, Formulare și Storage Local | Jen |
| 14 | Green Browser Extension | Procese de fundal în browser, performanța web | Folosește procesele de fundal ale browserului pentru a gestiona pictograma extensiei; învață despre performanța web și optimizări | Task-uri de fundal și performanță | Jen |
| 15 | Space Game | Dezvoltare avansată a jocurilor cu JavaScript | Învață despre Moștenire folosind Clase și Compoziție și modelul Pub/Sub, în pregătirea pentru construirea unui joc | Introducere în dezvoltarea avansată a jocurilor | Chris |
| 16 | Space Game | Desenare pe canvas | Învață despre Canvas API, folosit pentru a desena elemente pe ecran | Desenare pe Canvas | Chris |
| 17 | Space Game | Mutarea elementelor pe ecran | Descoperă cum elementele pot dobândi mișcare folosind coordonatele carteziene și API-ul Canvas | Mutarea elementelor | Chris |
| 18 | Space Game | Detectarea coliziunilor | Fă ca elementele să intre în coliziune și să reacționeze una la cealaltă folosind apăsări de taste și oferă o funcție de răcire pentru performanța jocului | Detectarea coliziunilor | Chris |
| 19 | Space Game | Ținerea scorului | Efectuează calcule matematice bazate pe starea și performanța jocului | Ținerea scorului | Chris |
| 20 | Space Game | Terminarea și reluarea jocului | Învață despre terminarea și reluarea jocului, inclusiv curățarea resurselor și resetarea valorilor variabile | Condiția de încheiere | Chris |
| 21 | Banking App | Șabloane HTML și Rute într-o aplicație Web | Învață cum să creezi structura unei arhitecturi de website multipage folosind rutare și șabloane HTML | Șabloane HTML și Rute | Yohan |
| 22 | Banking App | Construiește un 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 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 | 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 tău asistent AI | Proiect Asistent AI | Chris |
🏫 Pedagogie
Curriculumul nostru este conceput cu două principii pedagogice cheie în minte:
- învățare bazată pe proiecte
- chestionare frecvente
Programul predă elementele fundamentale ale JavaScript, HTML și CSS, precum și cele mai noi unelte și tehnici folosite de dezvoltatorii web de astăzi. Studenții vor avea ocazia să dezvolte experiență practică construind un joc de tastare, un terrariu virtual, o extensie de browser eco-friendly, un joc în stil invazie spațială și o aplicație bancară pentru afaceri. Până 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 un Drum de Învățare pe Microsoft Learn!
Prin asigurarea că conținutul este aliniat cu proiectele, procesul devine mai captivant pentru studenți și retenția conceptelor va fi sporită. Am scris, de asemenea, mai multe lecții introductive în bazele JavaScript pentru a introduce concepte, însoțite de un videoclip din colecția de tutoriale video "Seria pentru Începători la: JavaScript", ale cărei autori au contribuit la acest curriculum.
În plus, un chestionar cu miză redusă înaintea unei clase stabilește intenția studentului spre învățarea unui subiect, în timp ce un al doilea chestionar după clasă asigură o reținere suplimentară. Acest curriculum a fost conceput pentru a fi 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 introducerea framework-urilor 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 pentru finalizarea acestui curriculum ar fi să înveți despre Node.js printr-o altă colecție de videoclipuri: "Seria pentru Începători la: 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. Fork-uiește acest repo, instalează Docsify pe calculatorul tău local, apoi în folderul rădăcină al acestui repo, tastează docsify serve. Website-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! Descoperă:
LangChain
Azure / Edge / MCP / Agents
Seria Inteligență Artificială Generativă
Învățare Esențială
Seria Copilot
Obține ajutor
Dacă ești blocat sau ai întrebări despre construirea aplicațiilor AI. Alătură-te altor cursanți și dezvoltatori experimentați în discuții despre MCP. Este o comunitate suportivă unde întrebările sunt binevenite și 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 traducător uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea în urma utilizării acestei traduceri.


