You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
26 KiB
210 lines
26 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "efa251c5fc089367f0a81c572874afca",
|
|
"translation_date": "2025-08-28T07:25:30+00:00",
|
|
"source_file": "README.md",
|
|
"language_code": "ro"
|
|
}
|
|
-->
|
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
[](http://makeapullrequest.com)
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
[](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
[](https://discord.com/invite/ByRwuEEgH4)
|
|
|
|
Urmați acești pași pentru a începe să utilizați aceste resurse:
|
|
1. **Forkați Repozitoriul**: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
|
|
2. **Clonați Repozitoriul**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
|
3. [**Alăturați-vă Discordului Azure AI Foundry și întâlniți experți și alți dezvoltatori**](https://discord.com/invite/ByRwuEEgH4)
|
|
|
|
# Dezvoltare Web pentru Începători - Un Curriculum
|
|
|
|
Învață fundamentele 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 de browser și jocuri spațiale. Participă la quiz-uri, discuții și teme practice. Îmbunătățește-ți abilitățile și optimizează-ți retenția cunoștințelor cu pedagogia noastră bazată pe proiecte. Începe călătoria ta în programare astăzi!
|
|
|
|
#### 🧑🎓 _Ești student?_
|
|
|
|
Vizitează [**pagina Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) unde vei găsi resurse pentru începători, pachete pentru studenți și chiar modalități de a obține un voucher gratuit pentru certificare. Aceasta este pagina pe care vrei să o salvezi și să o verifici periodic, deoarece conținutul este actualizat lunar.
|
|
|
|
### 📣 Anunț - _Curriculum Nou_ despre Generative AI pentru JavaScript tocmai a fost lansat
|
|
|
|
Nu rata noul nostru curriculum despre Generative AI!
|
|
|
|
Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!
|
|
|
|
|
|
|
|
- Lecții care acoperă totul, de la bazele AI 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 subiectelor precum:
|
|
- Prompting și ingineria prompturilor
|
|
- Generarea de aplicații text și imagine
|
|
- Aplicații de căutare
|
|
|
|
Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!
|
|
|
|
## 🌱 Începe
|
|
|
|
> **Profesori**, am [inclus câteva sugestii](for-teachers.md) despre cum să utilizați acest curriculum. Ne-ar plăcea să primim feedback-ul vostru [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
|
|
|
**[Cursanți](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pentru fiecare lecție, începeți cu un quiz de pre-lectură și continuați cu citirea materialului de lectură, completarea diverselor activități și verificați-vă înțelegerea cu quiz-ul de post-lectură.
|
|
|
|
Pentru a îmbunătăți experiența de învățare, conectați-vă cu colegii pentru a lucra împreună la proiecte! Discuțiile sunt încurajate în [forumurile noastre de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), unde echipa noastră de moderatori va fi disponibilă pentru a răspunde întrebărilor voastre.
|
|
|
|
Pentru a vă continua educația, recomandăm cu tărie explorarea [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pentru materiale de studiu suplimentare.
|
|
|
|
### 📋 Configurarea mediului
|
|
|
|
Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începeți, puteți alege să rulați curriculum-ul într-un [Codespace](https://github.com/features/codespaces/) (_un mediu bazat pe browser, fără instalări necesare_), sau local pe computerul vostru folosind un editor de text precum [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
|
|
|
#### Creați repo-ul vostru
|
|
Pentru a salva cu ușurință munca voastră, este recomandat să creați o copie proprie a acestui repo. Puteți face acest lucru făcând click pe butonul **Use this template** din partea de sus a paginii. Acest lucru va crea un nou repo în contul vostru GitHub cu o copie a curriculum-ului.
|
|
|
|
Urmați acești pași:
|
|
1. **Forkați Repozitoriul**: Click pe butonul "Fork" din colțul din dreapta sus al acestei pagini.
|
|
2. **Clonați Repozitoriul**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
|
|
|
#### Rularea curriculum-ului într-un Codespace
|
|
|
|
În copia voastră a acestui repo pe care ați creat-o, faceți click pe butonul **Code** și selectați **Open with Codespaces**. Acest lucru va crea un nou Codespace pentru voi în care să lucrați.
|
|
|
|
[!Codespace](../..)./images/createcodespace.png)
|
|
|
|
#### Rularea curriculum-ului local pe computerul vostru
|
|
|
|
Pentru a rula acest curriculum local pe computerul vostru, veți avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Prima noastră lecție, [Introducere în Limbaje de Programare și Instrumente de Lucru](../../1-getting-started-lessons/1-intro-to-programming-languages), vă va ghida prin diverse opțiuni pentru fiecare dintre aceste instrumente, astfel încât să selectați ceea ce funcționează cel mai bine pentru voi.
|
|
|
|
Recomandarea noastră este să utilizați [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ca editor, care are și un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrat. Puteți descărca Visual Studio Code [aici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
|
|
|
|
1. Clonați repo-ul vostru pe computer. Puteți face acest lucru făcând click pe butonul **Code** și copiind URL-ul:
|
|
|
|
[!CodeSpace](./images/createcodespace.png)
|
|
|
|
Apoi, deschideți [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) în cadrul [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) și rulați următoarea comandă, înlocuind `<your-repository-url>` cu URL-ul pe care tocmai l-ați copiat:
|
|
|
|
```bash
|
|
git clone <your-repository-url>
|
|
```
|
|
|
|
2. Deschideți folderul în Visual Studio Code. Puteți face acest lucru făcând click pe **File** > **Open Folder** și selectând folderul pe care tocmai l-ați clonat.
|
|
|
|
> Extensii recomandate pentru Visual Studio Code:
|
|
>
|
|
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pentru a previzualiza paginile HTML direct în Visual Studio Code
|
|
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pentru a vă ajuta să scrieți cod mai rapid
|
|
|
|
## 📂 Fiecare lecție include:
|
|
|
|
- schiță opțională
|
|
- video 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ă construiți proiectul
|
|
- verificări ale cunoștințelor
|
|
- o provocare
|
|
- lectură suplimentară
|
|
- temă
|
|
- [quiz de după lecție](https://ff-quizzes.netlify.app/web/)
|
|
|
|
> **O notă despre quiz-uri**: Toate quiz-urile sunt conținute în folderul Quiz-app, 48 de quiz-uri în total, fiecare cu trei întrebări. Acestea sunt disponibile [aici](https://ff-quizzes.netlify.app/web/) și aplicația de quiz poate fi rulată local sau implementată pe Azure; urmați instrucțiunile din folderul `quiz-app`.
|
|
|
|
## 🗃️ Lecții
|
|
|
|
| | Nume Proiect | Concepte Învățate | Obiective de Învățare | Lecție Legată | Autor |
|
|
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
|
| 01 | Începuturi | Introducere în Programare și Instrumente de Lucru | Învață bazele din spatele majorității limbajelor de programare și despre software-ul care ajută dezvoltatorii profesioniști să-și facă treaba | [Introducere în Limbaje de Programare și Instrumente de Lucru](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
|
| 02 | Începuturi | 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
|
| 03 | Începuturi | Accesibilitate | Învață bazele accesibilității web | [Fundamentele Accesibilității](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
|
| 04 | Bazele JS | Tipuri de Date în JavaScript | Bazele tipurilor de date în JavaScript | [Tipuri de Date](./2-js-basics/1-data-types/README.md) | 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](./2-js-basics/2-functions-methods/README.md) | 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](./2-js-basics/3-making-decisions/README.md) | Jasmine |
|
|
| 07 | Bazele JS | Arrays și Bucle | Lucrează cu date folosind arrays și bucle în JavaScript | [Arrays și Bucle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
|
| 08 | [Terariu](./3-terrarium/solution/README.md) | HTML în Practică | Construiește HTML-ul pentru a crea un terariu online, concentrându-te pe crearea unui layout | [Introducere în HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
|
|
| 09 | [Terariu](./3-terrarium/solution/README.md) | CSS în Practică | Construiește CSS-ul pentru a stiliza terariul online, concentrându-te pe bazele CSS, inclusiv pe crearea unei pagini responsive | [Introducere în CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
|
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Închideri JavaScript, manipularea DOM | Construiește JavaScript-ul pentru a face ca terariul să funcționeze ca o interfață drag/drop, concentrându-se pe închideri și manipularea DOM | [Închideri JavaScript, manipularea DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
|
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construiește un joc de tastare | Învață cum să folosești evenimentele tastaturii pentru a conduce logica aplicației tale JavaScript | [Programare bazată pe evenimente](./4-typing-game/typing-game/README.md) | Christopher |
|
|
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lucrul cu browsere | Învață cum funcționează browserele, istoria lor și cum să creezi primele elemente ale unei extensii de browser | [Despre browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
|
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Construirea unui formular, apelarea unui API și stocarea variabilelor în local storage | Construiește elementele JavaScript ale extensiei de browser pentru a apela un API folosind variabile stocate în local storage | [API-uri, Formulare și Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
|
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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 câteva optimizări pentru a îmbunătăți | [Sarcini de fundal și performanță](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
|
| 15 | [Space Game](./6-space-game/solution/README.md) | Dezvoltare avansată de jocuri cu JavaScript | Învață despre moștenire folosind atât clase, cât și compoziție, și despre modelul Pub/Sub, ca pregătire pentru construirea unui joc | [Introducere în dezvoltarea avansată de jocuri](./6-space-game/1-introduction/README.md) | Chris |
|
|
| 16 | [Space Game](./6-space-game/solution/README.md) | Desenarea pe canvas | Învață despre API-ul Canvas, folosit pentru a desena elemente pe ecran | [Desenarea pe canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
|
| 17 | [Space Game](./6-space-game/solution/README.md) | Mișcarea elementelor pe ecran | Descoperă cum elementele pot dobândi mișcare folosind coordonatele carteziene și API-ul Canvas | [Mișcarea elementelor](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
|
| 18 | [Space Game](./6-space-game/solution/README.md) | Detectarea coliziunilor | Fă ca 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](./6-space-game/4-collision-detection/README.md) | Chris |
|
|
| 19 | [Space Game](./6-space-game/solution/README.md) | Păstrarea scorului | Efectuează calcule matematice bazate pe starea și performanța jocului | [Păstrarea scorului](./6-space-game/5-keeping-score/README.md) | Chris |
|
|
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminarea și reluarea jocului | Învață despre terminarea și reluarea jocului, inclusiv curățarea resurselor și resetarea valorilor variabilelor | [Condiția de terminare](./6-space-game/6-end-condition/README.md) | Chris |
|
|
| 21 | [Banking App](./7-bank-project/solution/README.md) | Șabloane HTML și rute într-o aplicație web | Învață cum să creezi structura arhitecturii unui site web cu mai multe pagini folosind rutare și șabloane HTML | [Șabloane HTML și rute](./7-bank-project/1-template-route/README.md) | Yohan |
|
|
| 22 | [Banking App](./7-bank-project/solution/README.md) | Construirea unui formular de autentificare și înregistrare | Învață despre construirea formularelor și gestionarea rutinei de validare | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
|
|
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode de preluare și utilizare a datelor | Cum circulă datele în și din aplicația ta, cum să le preiei, să le stochezi și să le elimini | [Date](./7-bank-project/3-data/README.md) | Yohan |
|
|
| 24 | [Banking App](./7-bank-project/solution/README.md) | Concepte de gestionare a stării | Învață cum aplicația ta păstrează starea și cum să o gestionezi programatic | [Gestionarea stării](./7-bank-project/4-state-management/README.md) | Yohan |
|
|
|
|
|
|
## 🏫 Pedagogie
|
|
|
|
Curriculum-ul nostru este conceput având în vedere două principii pedagogice cheie:
|
|
* învățare bazată pe proiecte
|
|
* teste frecvente
|
|
|
|
Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai recente instrumente și tehnici utilizate de dezvoltatorii web de astăzi. Studenții vor avea oportunitatea de a dobândi experiență practică construind un joc de tastare, un terariu virtual, o extensie de browser eco-friendly, un joc în stil space-invader și o aplicație bancară pentru afaceri. Până la sfârșitul seriei, studenții vor avea o înțelegere solidă a dezvoltării web.
|
|
|
|
|
|
> 🎓 Poți parcurge primele câteva lecții din acest curriculum ca un [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) pe Microsoft Learn!
|
|
|
|
Prin asigurarea că conținutul se aliniază cu proiectele, procesul devine mai captivant pentru studenți, iar retenția conceptelor va fi îmbunătățită. De asemenea, am scris câteva lecții introductive în JavaScript pentru a introduce concepte, însoțite de un videoclip din colecția "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriale video, unii dintre autorii cărora au contribuit la acest curriculum.
|
|
|
|
În plus, un test cu miză redusă înainte de o clasă setează intenția studentului spre învățarea unui subiect, în timp ce un al doilea test după clasă asigură o retenție suplimentară. Acest curriculum a fost conceput să fie flexibil și distractiv și poate fi parcurs în întregime sau parțial. Proiectele încep mici și devin din ce în ce mai complexe până la sfârșitul ciclului de 12 săptămâni.
|
|
|
|
Deși am evitat în mod intenționat introducerea framework-urilor JavaScript pentru a ne concentra pe abilitățile de bază necesare unui dezvoltator web înainte de adoptarea unui framework, un pas bun după finalizarea acestui curriculum ar fi învățarea despre Node.js printr-o altă colecție de videoclipuri: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
|
|
|
> Vizitează [Codul nostru de conduită](CODE_OF_CONDUCT.md) și ghidurile de [Contribuire](CONTRIBUTING.md). Apreciem feedback-ul tău constructiv!
|
|
|
|
|
|
## 🧭 Acces offline
|
|
|
|
Poți rula această documentație offline folosind [Docsify](https://docsify.js.org/#/). Clonează acest repo, [instalează Docsify](https://docsify.js.org/#/quickstart) pe mașina ta 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`.
|
|
|
|
## 📘 PDF
|
|
|
|
Un PDF cu toate lecțiile poate fi găsit [aici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
|
|
|
|
|
## 🎒 Alte cursuri
|
|
|
|
Echipa noastră produce și alte cursuri! Verifică:
|
|
|
|
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
|
|
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
|
|
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
|
|
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
|
|
- [AI for Beginners](https://aka.ms/ai-beginners)
|
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
|
- [ML for Beginners](https://aka.ms/ml-beginners)
|
|
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
|
|
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
|
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
|
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
|
|
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
|
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
|
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
|
|
|
|
## Licență
|
|
|
|
Acest depozit este licențiat sub licența MIT. Vezi fișierul [LICENSE](../../LICENSE) pentru mai multe informații.
|
|
|
|
---
|
|
|
|
**Declinare de responsabilitate**:
|
|
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. 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 care pot apărea din utilizarea acestei traduceri. |