Това ехранилище за образователна учебна програма, предназначена за обучение на начинаещи в основите на уеб разработката. Учебната програма представлява цялостен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практически урока, обхващащи JavaScript, CSS и HTML.
Това еобразователно хранилище с учебна програма за преподаване на основите на уеб разработката за начинаещи. Учебната програма е всеобхватен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практични урока, обхващащи JavaScript, CSS и HTML.
### Основни компоненти
- **Образователно съдържание**: 24 структурирани урока, организирани в модули, базирани на проекти
- **Практически проекти**: Терариум, Игра за писане, Разширение за браузър, Космическа игра, Банково приложение, Редактор на код и AI чат асистент
- **Интерактивни тестове**: 48 теста с по 3 въпроса (оценки преди/след урока)
- **Поддръжка на много езици**: Автоматични преводи на над 50 езика чрез GitHub Actions
- **Образователно съдържание**: 24 структурирани урока, организирани в модулис проекти
- **Практически проекти**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor и AI Chat Assistant
- **Интерактивни викторини**: 48 викторини с по 3 въпроса всяка (оценки преди и след урока)
- **Поддръжка на множество езици**: Автоматични преводи на над 50 езика чрез GitHub Actions
- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI проекти)
### Архитектура
- Образователно хранилище със структура, базирана на уроци
- Всяка папка с урок съдържа README, примери за код и решения
- Всяка папка с урок съдържа README, примерен код и решения
- Самостоятелни проекти в отделни директории (quiz-app, различни проекти за уроци)
- Система за превод чрез GitHub Actions (co-op-translator)
- Документация, предоставена чрез Docsify и налична като PDF
- Документация, предоставяна чрез Docsify и достъпна като PDF
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоръчван за обучаващи се
- Допълнителни курсове: Generative AI, Data Science, ML, IoT учебни програми
### Работа с конкретни проекти
За подробни инструкции относно отделните проекти, вижте README файловете в:
- `quiz-app/README.md` - Vue 3 приложение за тестове
За подробни инструкции относно отделни проекти, вижте README файловете в:
- `quiz-app/README.md` - Vue 3 quiz приложение
- `7-bank-project/README.md` - Банково приложение с автентикация
- `5-browser-extension/README.md` - Разработка на разширение за браузър
- `6-space-game/README.md` - Разработка на игра, базирана на Canvas
- `5-browser-extension/README.md` - Разработка на браузърно разширение
- `6-space-game/README.md` - Игра базирана на Canvas
- `9-chat-project/README.md` - Проект за AI чат асистент
### Структура на монорепото
### Структура на монорепо
Въпреки че не е традиционно монорепо, това хранилище съдържа множество независими проекти:
- Всеки урок е самостоятелен
- Проектите не споделят зависимости
- Работете върху отделни проекти, без да засягате други
- Клонирайте цялото хранилище за пълно учебно преживяване
- Работете по отделни проекти без да засягате другите
- Клонирайте цялото хранилище за пълното преживяване с учебната програма
---
**Отказ от отговорност**:
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от отговорност**:
Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за никакви недоразумения или неправилни тълкувания, възникнали от използването на този превод.
Научете основите на уеб разработката с нашия 12-седмичен обстоен курс, създаден от Microsoft Cloud Advocates. Във всеки от 24-те урока се разглеждат JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузър и космически игри. Включете се в викторини, дискусии и практически задачи. Подобрете уменията си и оптимизирайте усвояването на знанията с нашата ефективна проектно-базирана методика. Започнете своето кодиране още днес!
Научете основите на уеб разработката с нашия 12-седмичен подробен курс, воден от Microsoft Cloud Advocates. Във всеки от 24-те урока се разглеждат JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузър и космически игри. Вземете участие в викторини, дискусии и практически задачи. Усъвършенствайте уменията си и оптимизирайте задържането на знания с нашата ефективна, проектно базирана педагогика. Започнете своето обучение по програмиране още днес!
Присъединете се към общността Azure AI Foundry в Discord
Присъединете се към Discord общността на Azure AI Foundry
> Това хранилище включва преводи на над 50 езика, което значително увеличава размера на изтегляне. За да клонирате без преводите, използвайте sparse checkout:
> Този репозитори включва над 50 езикови превода, което значително увеличава размера на изтеглянето. За да клонирате без преводи, използвайте sparse checkout:
> Това ви дава всичко необходимо за завършване на курса с много по-бързо изтегляне.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ако желаете да има поддръжка за допълнителни езици, теса изброени [тук](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ако желаете да бъдат добавени допълнителни преводи, поддържаните езициса изброени [тук](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Учите ли?_
#### 🧑🎓 _Студент ли сте?_
Посетете [**страницата за студенти**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която е добре да запазите сред отметките и да проверявате от време на време, тъй като обновяваме съдържанието всеки месец.
Посетете [**Студентския център**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), където ще намерите ресурси за начинаещи, студентски пакети и дори възможности да получите безплатен ваучер за сертификат. Това е страницата, която искате да добавите в отметките си и от време на време да проверявате, тъй като месечно сменяме съдържанието.
### 📣 Обява - Нови предизвикателства с режим GitHub Copilot Agent за завършване!
### 📣 Обявление - Нови предизвикателства в режим GitHub Copilot Agent за изпълнение!
Добавено е ново предизвикателство, потърсете "GitHub Copilot Agent Challenge 🚀" в повечето глави. Това е ново предизвикателство, което да завършите, използвайки GitHub Copilot и режима Agent. Ако не сте използвали режим Agent досега, той не само генерира текст, но и може да създава и редактира файлове, изпълнява команди и други.
Добавено е ново предизвикателство, потърсете "GitHub Copilot Agent Challenge 🚀" в повечето глави. Това е ново предизвикателство за вас да го изпълните с помощта на GitHub Copilot и режима Agent. Ако не сте ползвали режима Agent преди, той може не само да генерира текст, но и да създава и редактира файлове, изпълнява команди и други.
### 📣 Обява - _Нов проект, базиран на Генеративен AI_
### 📣 Обявление - _Нов проект за създаване с генериращ изкуствен интелект_
Току-що добавен нов проект с AI асистент, разгледайте [проекта](./9-chat-project/README.md)
Току-що добавен нов AI Assistant проект, разгледайте го [тук](./9-chat-project/README.md)
### 📣 Обява - _Нова учебна програма_ за Генеративен AI за JavaScript е вече налична
### 📣 Обявление - _Нова учебна програма_ за Генеративен изкуствен интелект за JavaScript току-що беше пусната
Не пропускайте нашия нов курс за Генеративен AI!
Не пропускайте нашата нова учебна програма за Генеративен ИИ!
Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!
Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, за да ви насочи при изучаването на теми като:
- Създаване на заявки и инженерство на заявки
- Генериране на текстови и визуални приложения
Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, които да ви насочват в изучаването на теми като:
- Задаване на заявки и инженеринг на заявки
- Генериране на приложения за текст и изображения
- Търсещи приложения
Посетете [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) за да започнете!
Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!
## 🌱 Първи стъпки
## 🌱 Започване
> **Учители**, ние сме [включили някои предложения](for-teachers.md) как да използвате тази учебна програма. Ще се радваме на вашата обратна връзка [в нашия дискусионен форум](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Учители**, включили сме [някои предложения](for-teachers.md) как да използвате тази учебна програма. Ще се радваме на вашите отзиви [в нашия дискусионен форум](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Учащи](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за всеки урок започнете стест преди лекцията и продължете с четене на учебния материал, изпълнение на различни дейности и проверете разбирането си с тест след лекцията.
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за всеки урок започнете спредварителна викторина и продължете с четене на учебния материал, изпълнение на различните дейности и проверка на разбирането си с постлекционната викторина.
За да подобрите учебния си опит, свържете сес връстници, за да работите заедно по проектите! Насърчават се дискусиите в нашия [дискусионен форум](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), където нашият модераторски екип ще бъде на разположение да отговаря на въпросите ви.
За да подобрите учебния си опит, свържете сес връстниците си, за да работите заедно по проектите! Насърчават се дискусии в нашия [дискусионен форум](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), където нашият екип от модератори ще бъде на разположение да отговаря на вашите въпроси.
За да надградите знанията си, препоръчваме ви да разгледате [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за допълнителни учебни материали.
За да развиете образованието си допълнително, силно препоръчваме да разгледате [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за допълнителни учебни материали.
### 📋 Настройване на средата ви
### 📋 Настройване на вашата среда
Тази учебна програма е готова със среда за разработка! Когато започнете, можете да изберете да стартирате учебната програма в [Codespace](https://github.com/features/codespaces/) (_среда в браузър, без необходимост от инсталации_), или локално на компютъра си, използвайки текстов редактор като [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Тази учебна програма разполага с готова за употреба среда за разработка! Когато започнете, можете да изберете да стартирате учебната програма в [Codespace](https://github.com/features/codespaces/) (_среда в браузъра, без нужда от инсталация_), или локално на вашия компютър, използвайки текстов редактор като [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Създайте своето хранилище
За да можете лесно да запазвате работата си, препоръчително е да създадете собствено копие на това хранилище. Можете да го направите, като натиснете бутона **Use this template** в горната част на страницата. Това ще създаде ново хранилище във вашия GitHub акаунт с копие на учебната програма.
#### Създайте своето репозитори
За да запазите лесно своята работа, препоръчваме да създадете собствено копие на това репозитори. Можете да го направите, като кликнете върху бутона **Use this template** в горната част на страницата. Това ще създаде ново репозитори във вашия GitHub акаунт с копие на учебната програма.
Следвайте тези стъпки:
1. **Форкване на хранилището**: Кликнете върху бутона "Fork" в горния десен ъгъл на тази страница.
2. **Клониране на хранилището**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Направете форк на репозиторията**: Кликнете на бутона "Fork" в горния десен ъгъл на тази страница.
В копието на това хранилище, което създадохте, кликнете на бутона **Code** и изберете **Open with Codespaces**. Това ще създаде нов Codespace за работа.
В копието на репозитория, което създадохте, кликнете върху бутона **Code** и изберете **Open with Codespaces**. Това ще създаде нов Codespace, в който да работите.
#### Стартиране на учебната програма локално на компютъра
За да стартирате учебната програма локално на компютъра си, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Нашият първи урок, [Въведение в програмните езици и инструменти](../../1-getting-started-lessons/1-intro-to-programming-languages), ще ви запознае с различните опции за всеки от тези инструменти, за да изберете най-подходящото за вас.
#### Стартиране на учебната програма локално на вашия компютър
Нашата препоръка е да използвате [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) като редактор, който има и вграден [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Можете да изтеглите Visual Studio Code от [тук](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
За да стартирате учебната програма локално на компютъра си, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Първият ни урок, [Въведение в програмните езици и инструментите](../../1-getting-started-lessons/1-intro-to-programming-languages), ще ви преведе през различни опции за всеки от тези инструменти, за да изберете най-подходящите за вас.
Препоръчваме да използвате [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) като ваш редактор, който също разполага с вграден [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Можете да изтеглите Visual Studio Code от [тук](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирайте своето хранилище на компютъра си. Можете да направите това като натиснете бутона **Code** и копирате URL адреса:
1. Клонирайте своето репозитори на компютъра си. Можете да го направите, като кликнете бутона **Code** и копирате URL адреса:
[CodeSpace](./images/createcodespace.png)
След това отворете [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и изпълнете следната команда, като замените `<your-repository-url>`с URL адреса, който току-що копирахте:
След това отворете [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и изпълнете следната команда, като замените `<your-repository-url>`с URL адреса, който току-що копирахте:
```bash
git clone <your-repository-url>
@ -126,145 +125,145 @@
2. Отворете папката във Visual Studio Code. Можете да направите това, като кликнете върху **File** > **Open Folder** и изберете току-що клонираната папка.
> Препоръчани разширения за Visual Studio Code:
> Препоръчителни разширения за Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за визуализиране на HTML страници във Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за да ви помогне да пишете код по-бързо
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за по-бързо писане на код
## 📂 Всеки урок включва:
## 📂 Всяка лекция включва:
- опционален скичен принос
- опционален скицник
- опционално допълнително видео
- предварителен топлищен тест преди урока
- подготовително викторина преди урока
- писмен урок
- при проектно-ориентирани уроци, стъпка по стъпка ръководства как да се изгради проектът
- проверки на знания
- за уроци базирани на проекти, стъпка по стъпка ръководства как да се изгради проекта
- тестове за проверка на знанията
- предизвикателство
- допълнително четене
- задание
- [тест след урок](https://ff-quizzes.netlify.app/web/)
- допълнително четиво
- задача
- [викторина след урока](https://ff-quizzes.netlify.app/web/)
> **Бележка за тестовете**: Всички тестове са съдържани в папката Quiz-app, общо 48 теста с по три въпроса във всеки. Теса налични [тук](https://ff-quizzes.netlify.app/web/), приложението за тестове може да се стартира локално или да се публикува в Azure; следвайте инструкциите в папката `quiz-app`.
> **Забележка относно викторините**: Всички викторини са в папката Quiz-app, общо 48 викторини с по три въпроса. Теса налични [тук](https://ff-quizzes.netlify.app/web/), приложението за викторини може да се стартира локално или да се разположи в Azure; следвайте инструкциите в папката `quiz-app`.
## 🗃️ Уроци
| | Име на проекта | Концепции, които са обучавани | Учебни цели | Свързан урок | Автор |
| 01 | Начало | Въведение в програмирането и инструментите на занаятчията | Научете основните основи зад повечето езици за програмиране и за софтуер, който помага на професионални разработчици да вършат работата си | [Въведение в езиците за програмиране и инструментите на занаятчията](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало | Основи на GitHub, включително работа в екип | Как да използвате GitHub в своя проект, как да си сътрудничите с други върху кодова база | [Въведение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало | Достъпност | Научете основите на уеб достъпността | [Основи на достъпността](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи наJS | Типове данни в JavaScript | Основите на типовете данни в JavaScript | [Типове данни](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи наJS | Функции и методи | Научете за функции и методи за управление на логиката на приложение | [Функции и методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основи наJS | Вземане на решения с JS | Научете как да създавате условия в кода си, използвайки методи за вземане на решения | [Вземане на решения](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи наJS | Масиви и цикли | Работас данни чрез масиви и цикли в JavaScript | [Масиви и цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Терариум](./3-terrarium/solution/README.md) | HTML на практика | Създайте HTML за онлайн терариум, фокусирайки се върху изграждането на оформление | [Въведение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Терариум](./3-terrarium/solution/README.md) | CSS на практика | Създайте CSS за стилизиране на онлайн терариума, като се фокусирате върху основите на CSS, включително правене на страницата адаптивна | [Въведение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Терариум](./3-terrarium/solution/README.md) | JavaScript Closures, манипулиране на DOM | Създайте JavaScript за да направите терариума да функционира като интерфейс за плъзгане/пускане, с фокус върху closures и манипулиране на DOM | [JavaScript Closures, манипулиране на DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра за писанес клавиатура](./4-typing-game/solution/README.md) | Създаване на игра за писане | Научете как да използвате събития от клавиатурата за да управлявате логиката на вашето JavaScript приложение | [Програмиране, базирано на събития](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Разширение за браузър Green](./5-browser-extension/solution/README.md) | Работа с браузъри | Научете как работят браузърите, тяхната история и как да създадете първите елементи на разширение за браузър | [За браузърите](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Разширение за браузър Green](./5-browser-extension/solution/README.md) | Изграждане на форма, извикване на API и съхранение на променливи в локално хранилище | Изградете JavaScript елементи на вашето разширение за браузър за извикване на API, използвайки променливи, съхранени в локалното хранилище | [API, форми и локално хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Разширение за браузър Green](./5-browser-extension/solution/README.md) | Фонови процеси в браузъра, уеб производителност | Използвайте фонови процеси на браузъра за управление на иконата на разширението; научете за уеб производителността и някои оптимизации за подобряване | [Фонови задачи и производителност](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космическа игра](./6-space-game/solution/README.md) | По-напреднало разработване на игри с JavaScript | Научете за наследяване чрез класове и композиция и за шаблона Pub/Sub, в подготовка за създаване на игра | [Въведение в напреднало разработване на игри](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космическа игра](./6-space-game/solution/README.md) | Рисуване в canvas | Разберете Canvas API, който се използва за рисуване на елементи на екрана | [Рисуване в Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космическа игра](./6-space-game/solution/README.md) | Преместване на елементи по екрана | Открийте как елементите могат да придобият движение, използвайки декартови координати и Canvas API | [Преместване на елементи](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космическа игра](./6-space-game/solution/README.md) | Откриване на сблъсъци | Направете елементите да се сблъскват и да реагират един на друг чрез натискане на клавиши и осигурете функция за изчакване, за да се гарантира производителността на играта | [Откриване на сблъсъци](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космическа игра](./6-space-game/solution/README.md) | Водене на резултат | Правете математически изчисления въз основа на състоянието и представянето на играта| [Водене на резултат](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космическа игра](./6-space-game/solution/README.md) | Край и рестартиране на играта | Научете за завършване и рестартиране на игра, включително изчистване на ресурси и нулиране на стойности на променливи | [Условия за край](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банкова апликация](./7-bank-project/solution/README.md) | HTML шаблони и маршрути в уеб приложение | Научете как да създадете основата на архитектурата на мултистраничен уебсайт, използвайки маршрутизиране и HTML шаблони | [HTML шаблони и маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банкова апликация](./7-bank-project/solution/README.md) | Създаване на форма за вход и регистрация | Научете за създаване на форми и обработка на валидационни рутинни | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банкова апликация](./7-bank-project/solution/README.md) | Методи за получаване и използване на данни | Как данните влизат и излизат от вашето приложение, как да ги извличате, съхранявате и изтривате | [Данни](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банкова апликация](./7-bank-project/solution/README.md) | Концепции на управление на състоянието | Научете как вашето приложение задържа състояние и как да го управлявате програмно | [Управление на състоянието](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Браузър/VScode Код](../../8-code-editor) | Работа с VScode | Научете как да използвате редактор на код | [Използване на VScode редактор](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Работа с AI | Научете как да изградите собствен AI асистент | [Проект AI Асистент](./9-chat-project/README.md) | Chris |
| | Име на проекта | Обучавани концепции | Учебни цели | Свързан урок | Автор |
| 01 | Започване | Въведение в програмирането и инструментите на професията | Научете основите зад повечето програмни езици и софтуерен инструментариум, който помага на професионалните разработчици | [Въведение в програмените езици и инструменти](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Започване | Основи на GitHub, включително работа в екип| Как да използвате GitHub в своя проект, как да си сътрудничите с други върху кодовата база | [Въведение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Започване | Достъпност | Научете основите на достъпността в уеб | [Основи на достъпността](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основи | Типове данни в JavaScript | Основите на типовете данни в JavaScript | [Типове данни](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основи | Функции и методи | Научете за функциите и методите за управление на логиката на приложение | [Функции и методи](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | JS Основи | Взимане на решения с JS | Научете как да създавате условия във вашия код чрез методи за вземане на решения | [Вземане на решения](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основи | Масиви и цикли | Работетес данни чрез масиви и цикли в JavaScript | [Масиви и цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Терариум](./3-terrarium/solution/README.md) | HTML на практика | Създайте HTML за онлайн терариум, сфокус върху изграждането на оформление | [Въведение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Терариум](./3-terrarium/solution/README.md) | CSS на практика | Създайте CSS за стилизиране на онлайн терариума, включително основите на CSS и направата на страница отзивчива | [Въведение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Терариум](./3-terrarium/solution/README.md) | Заключвания в JavaScript, манипулиране на DOM | Създайте JavaScript за работа на терариума като интерфейс за влачене и пускане, фокусирайки се върху заключвания и DOM | [Заключвания в JS, манипулация на DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра за писане](./4-typing-game/solution/README.md) | Създаване на игра за писане | Научете как да използвате клавишни събития за задвижване на логиката на приложението си на JavaScript | [Програмиране базирано на събития](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Зелен браузър екстензия](./5-browser-extension/solution/README.md) | Работа с браузъри| Научете как работят браузърите, тяхната история и как да изградите първите елементи на екстензия за браузър | [За браузърите](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Зелен браузър екстензия](./5-browser-extension/solution/README.md) | Създаване на формуляр, извикване на API и съхраняване на променливи локално | Създайте JavaScript елементите на браузър екстензията си за извикване на API чрез променливи, съхранявани локално | [API, формуляри и локално съхранение](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Зелен браузър екстензия](./5-browser-extension/solution/README.md) | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра за управление на иконата на екстензията; научете за уеб производителността и оптимизации | [Фонови задачи и производителност](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космическа игра](./6-space-game/solution/README.md) | По-напреднало разработване на игри с JavaScript | Научете за наследяването чрез класове и композиция, както и за патерна Pub/Sub, подготвяйки се за изграждане на игра | [Въведение в напреднало разработване на игри](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космическа игра](./6-space-game/solution/README.md) | Рисуване в canvas | Научете за Canvas API, използван за рисуване на елементи на екрана | [Рисуване в Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космическа игра](./6-space-game/solution/README.md) | Преместване на елементи по екрана | Открийте как елементите придобиват движение чрез декартови координати и Canvas API | [Преместване на елементи](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космическа игра](./6-space-game/solution/README.md) | Откриване на сблъсъци | Направете елементите да се сблъскват и реагират на натискане на клавиши и добавете функция за охлаждане, за да подобрите изпълнението | [Откриване на сблъсъци](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космическа игра](./6-space-game/solution/README.md) | Водене на резултата | Извършете математически изчисления въз основа на състоянието и представянето на играта | [Водене на резултата](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космическа игра](./6-space-game/solution/README.md) | Край и рестартиране на играта | Научете как да приключите и рестартирате играта, включително почистване на ресурси и нулиране на променливите | [Условия за край](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банкова Апликация](./7-bank-project/solution/README.md) | HTML шаблони и маршрути в уеб приложение | Научете как да създадете структурата на многостраничен уебсайт с използване на маршрутизация и HTML шаблони | [HTML шаблони и маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банкова Апликация](./7-bank-project/solution/README.md) | Създаване на формуляр за вход и регистрация | Научете как се изграждат формуляри и как да се обработва валидирането | [Формуляри](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банкова Апликация](./7-bank-project/solution/README.md) | Методи за извличане и използване на данни | Как данните влизат и излизат от вашето приложение, как да ги извличате, съхранявате и изхвърляте | [Данни](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банкова Апликация](./7-bank-project/solution/README.md) | Концепции за управление на състоянието | Научете как приложението ви запазва състояние и как да го управлявате програмно | [Управление на състоянието](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Работа с VScode | Научете как да използвате кодов редактор | [Използване на VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Работа с AI | Научете как да изградите свой собствен AI помощник | [Проект AI Assistant](./9-chat-project/README.md) | Chris |
## 🏫 Педагогика
Нашата учебна програма е създадена с два ключови педагогически принципа:
* учене чрез проекти
* чести тестове
Учебната ни програма е създадена въз основа на две ключови педагогически принципа:
* обучение чрез проекти
* честни викторини
Програмата преподава основите на JavaScript, HTML и CSS, както и последните инструменти и техники, използвани от днешните уеб разработчици. Студентите ще имат възможност да придобият практически опит, като създават игра за писане, виртуален терариум, екологично чисто разширение за браузър, игра в стил космически нашественик и банково приложение за бизнес. До края на серията студентите ще имат солидни познания поуеб разработка.
Програмата учи основите на JavaScript, HTML и CSS, както и най-новите инструменти и техники, използвани от съвременните уеб разработчици. Студентите ще имат възможност да придобият практически опит, като изградят игра за писане, виртуален терариум, екологично чисто разширение за браузър, игра в стил космически нашественик и банково приложение за бизнес. Към края на серията студентите ще имат солидно разбиране зауеб разработка.
> 🎓 Можете да вземете първите няколко урока в тази учебна програма като [Учебен Път](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) в Microsoft Learn!
> 🎓 Можете да преминете първите няколко урока от тази учебна програма като [Учебен път](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) в Microsoft Learn!
С осигуряването на съответствие на съдържанието с проекти, процесът става по-ангажиращ за студентите и задържането на концепциите ще се увеличи. Ние също написахме няколко начални урока по основите на JavaScript, за да въведем концепциите, съчетани с видео от колекцията на видео уроци "[Серия за начинаещи: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чиито някои автори допринесоха за тази учебна програма.
Чрез осигуряване на съответствие между съдържанието и проектите, процесът става по-ангажиращ за студентите и задържането на знания се увеличава. Ние също така написахме няколко начални урока за основи на JavaScript, за да въведем концепциите, съчетани с видео от колекцията видео уроци "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чиито някои автори са допринесли за тази учебна програма.
Освен това, ниско-рисков тест преди урока установява нагласата на студента към изучаване на тема, а втори тест след урока осигурява допълнително задържане. Тази учебна програма е проектирана да бъде гъвкава и забавна и може да се приема изцяло или частично. Проектите започват малки и стават все по-сложни към края на 12-седмичния цикъл.
Освен това, викторина с нисък залог преди клас поставя намерението на студента да научи темата, докато втора викторина след урока гарантира допълнително задържане. Тази учебна програма бе създадена да бъде гъвкава и забавна и може да бъде взета изцяло или частично. Проектите започват малки и стават все по-сложни до края на 12-седмичния цикъл.
Докато умишлено избягвахме въвеждането на JavaScript фреймворци, за да се концентрираме върху основните умения, необходими на уеб разработчик преди приемане на фреймворк, добра следваща стъпка за завършване на тази учебна програма е да научите за Node.js чрез друга колекция видеа: "[Серия за начинаещи: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Докато съзнателно избягвахме въвеждането на JavaScript рамки, за да се съсредоточим върху основните умения, необходими на уеб разработчик преди да усвои рамка, добър следващ ход след завършване на тази учебна програма би бил да научите Node.js чрез друга колекция видео уроци: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетете нашите насоки [Кодекс на поведение](CODE_OF_CONDUCT.md) и [Принос](CONTRIBUTING.md). Очакваме с нетърпение вашата конструктивна обратна връзка!
> Посетете нашите насоки [Правила за поведение](CODE_OF_CONDUCT.md) и [Принос](CONTRIBUTING.md). Очакваме с нетърпение вашата конструктивна обратна връзка!
## 🧭 Достъп офлайн
## 🧭 Работа офлайн
Можете да използвате тази документация офлайн с помощта на [Docsify](https://docsify.js.org/#/). Форкнете това хранилище, [инсталирайте Docsify](https://docsify.js.org/#/quickstart) на локалната си машина и след това в главната папка на това хранилище изпишете `docsify serve`. Уебсайтът ще бъде достъпен на порт 3000 на вашия localhost: `localhost:3000`.
Можете да използвате тази документация офлайн чрез [Docsify](https://docsify.js.org/#/). Клонирайте репото, [инсталирайте Docsify](https://docsify.js.org/#/quickstart) на своя локален компютър и след това в основната папка на това репо напишете `docsify serve`. Уебсайтът ще бъде достъпен на порт 3000 на вашия localhost: `localhost:3000`.
## 📘 PDF
PDF на всички уроци може да бъде намерен [тук](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF с всички уроци може да се намери [тук](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Други курсове
Нашият екип произвежда и други курсове! Разгледайте:
Нашият екип създава и други курсове! Разгледайте:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Агенти
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серия за Генеративен AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Серия за генеративен изкуствен интелект
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серия Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ако заседнете или имате въпроси относно разработването на AI приложения, присъединете се към други обучаващи се и опитни разработчици в дискусии за MCP. Това е подкрепяща общност, където въпросите са добре дошли и знанието се споделя свободно.
Ако се затрудните или имате въпроси относно създаването на AI приложения. Присъединете се към другите учащи и опитни разработчици в дискусиите за MCP. Това е подкрепяща общност, където въпросите са добре дошли и знанието се споделя свободно.
Този хранилище е лицензирано под лиценза MIT. Вижте файла [LICENSE](../../LICENSE) за повече информация.
Това хранилище е лицензирано под MIT лиценз. Вижте файла [LICENSE](../../LICENSE) за повече информация.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от отговорност**:
Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или неправилни тълкувания, произтичащи от използването на този превод.
**Отказ от отговорност**:
Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия първичен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за каквито и да било недоразумения или неправилни тълкувания, произтичащи от използването на този превод.
# Пътна карта за хранилището Web-Dev-For-Beginners на Microsoft
**Това хранилище предоставя пътна карта за изучаване на основите на уеб разработката с фокус върху JavaScript, HTML и CSS. Учебната програма е гъвкава и може да се вземе изцяло или частично, като включва 24 урока разпределени в рамките на 12 седмици.**
## Основни етапи
* **Седмици 1-3:**
* Въведение в програмните езици и инструментите на занаята
* Основи на GitHub
* Достъпност
* Основи на JS: типове данни, функции и методи
* Вземане на решения с JS
* **Седмици 4-6:**
* Масиви и цикли
* Терариум: HTML на практика
* CSS на практика
* Затваряния в JavaScript
* Манипулиране на DOM
* **Седмици 7-9:**
* Игра за писане: Програмиране, базирано на събития
* Зелен браузър разширение: Работа с браузъри
* Създаване на форма, извикване на API и съхранение на променливи в local storage
* Фонови процеси в браузъра
* Уеб производителност
* **Седмици 10-12:**
* Космическа игра: По-напреднало разработване на игри с JavaScript
* Рисуване върху canvas
* Преместване на елементи на екрана
* Откриване на сблъсъци
* Записване на резултата, приключване и рестартиране на играта
* Банково приложение: HTML шаблони и маршрути в уеб приложение
* Създаване на форма за вход и регистрация
* Методи за извличане и използване на данни
* Концепции за управление на състоянието
## Образователни резултати
**Чрез завършване на тази пътна карта, студентите ще придобият практически опит в изграждането на игра за писане, виртуален терариум, екологично разширение за браузър, игра в стил космически нашественици и банково приложение за бизнеси. Те също така ще развият солидно разбиране на основите на уеб разработката.**
## Допълнителни ресурси
* Това хранилище предоставя богат набор от ресурси за допълнително обучение, включително уроци, примери с код и предизвикателства.
* Платформата Microsoft Learn предлага различни курсове и пътеки за учене в областта на уеб разработката.
* Онлайн общности като Stack Overflow и MDN Web Docs предоставят ценна подкрепа и ресурси за уеб разработчици.
**Надявам се тази пътна карта да ви помогне по пътя ви в уеб разработката!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от отговорност**:
Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизирани преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни тълкувания, произтичащи от използването на този превод.
Acesta este un depozit de curriculum educațional destinat predării fundamentelor dezvoltării web pentru începători. Curriculumul este un curs cuprinzător de 12 săptămâni dezvoltat de Microsoft Cloud Advocates, care include 24 de lecții practice ce acoperă JavaScript, CSS și HTML.
Acesta este un depozit educațional pentru predarea fundamentelor dezvoltării web începătorilor. Curriculumul este un curs cuprinzător de 12 săptămâni dezvoltat de Microsoft Cloud Advocates, cuprinzând 24 de lecții practice despre JavaScript, CSS și HTML.
### Componente Cheie
### Componente cheie
- **Conținut Educațional**: 24 de lecții structurate organizate în module bazate pe proiecte
- **Proiecte Practice**: Terrarium, Joc de Tastare, Extensie de Browser, Joc Spațial, Aplicație Bancară, Editor de Cod și Asistent AI de Chat
- **Teste Interactive**: 48 de teste cu câte 3 întrebări fiecare (evaluări pre/post-lecție)
- **Suport Multilingv**: Traduceri automate pentru peste 50 de limbi prin GitHub Actions
- `6-space-game/README.md` - dezvoltare joc pe canvas
- `9-chat-project/README.md` - proiect asistent AI chat
### Structura Monorepo
### Structura monorepo
Deși nu este un monorepo tradițional, acest depozit conține mai multe proiecte independente:
- Fiecare lecție este autonomă
- Proiectele nu împărtășesc dependențe
- Lucrați la proiecte individuale fără a afecta altele
- Clonați întregul depozit pentru experiența completă a curriculumului
- Proiectele nu împart dependențe
- Lucrează pe proiecte individuale fără a afecta altele
- Clonează întregul depozit pentru experiența completă a curriculumului
---
**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ă fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă 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 greșite care pot apărea din utilizarea acestei traduceri.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Declinare de responsabilitate**:
Acest document a fost tradus folosind serviciul de traducere automată AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim să oferim o traducere corectă, vă rugăm să aveți în vedere 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 răspunderea pentru eventualele neînțelegeri sau interpretări greșite ce pot rezulta din utilizarea acestei traduceri.
# 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!
Î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ăturați-vă Comunității Discord Azure AI Foundry
Alătură-te Comunității Azure AI Foundry pe Discord
> 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:
> 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 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ă.
> Acesta îți oferă tot ce ai nevoie pentru a finaliza cursul cu o descărcare mult mai rapidă.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Dacă doriți să fie suportate și alte limbi de traducere, acestea sunt listate [aici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Dacă dorești să fie susținute limbi suplimentare de traducere, acestea sunt listate [aici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _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 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.
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 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 finalizat!
### 📣 Anunț - Noi provocări GitHub Copilot Agent mode de completat!
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.
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_
### 📣 Anunț - _Proiect nou de construit folosind Generative AI_
Proiect nou de asistent AI adăugat recent, verifică proiectul [proiect](./9-chat-project/README.md)
Proiect nou cu Asistent AI tocmai adăugat, vezi proiectul [aici](./9-chat-project/README.md)
### 📣 Anunț - _Curriculum nou_ despre Generative AI pentru JavaScript tocmai a fost lansat
### 📣 Anunț - _Curriculum nou_ despre Generative AI pentru JavaScript a fost lansat recent
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
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](../../[https:/aka.ms/genai-js-course) pentru a începe!
Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!
## 🌱 Începutul
> **Profesori**, am inclus [unele sugestii](for-teachers.md) despre cum să folosiți acest curriculum. Ne-ar plăcea feedback-ul vostru [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Profesori**, am inclus [câteva sugestii](for-teachers.md) despre cum să folosiți acest curriculum. Ne-ar plăcea feedback-ul vostru [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Elevi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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.
**[Elevi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), unde echipa noastră de moderatori va fi disponibilă să răspundă la întrebările voastre.
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](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) unde echipa noastră de moderatori va fi disponibilă să răspundă întrebărilor voastre.
Pentru a vă extinde educația, recomandăm insistent să explorați [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pentru materiale suplimentare de studiu.
Pentru a vă continua educația, vă recomandăm cu căldură să explorați [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pentru materiale suplimentare de studiu.
### 📋 Configurarea mediului vostru
### 📋 Configurarea mediului tău
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](https://github.com/features/codespaces/) (_un mediu bazat pe browser, fără instalări necesare_), sau local pe calculatorul vostru folosind un editor de text precum [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începi poți alege să rulezi curriculumul într-un [Codespace](https://github.com/features/codespaces/) (_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](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
#### 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.
Urmați acești pași:
1. **Fork-uiți Repositorul**: Faceți clic pe butonul "Fork" din colțul dreapta sus al acestei pagini.
Î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.
Î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 vostru
#### Rularea curriculumului local pe calculatorul tău
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](../../1-getting-started-lessons/1-intro-to-programming-languages), vă va ghida prin diverse opțiuni pentru fiecare dintre aceste instrumente, pentru a selecta ce vi se potrivește cel mai bine.
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ă](../../1-getting-started-lessons/1-intro-to-programming-languages), 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ă folosiț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).
Recomandarea noastră este să folosești [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) încorporat. Poți descărca Visual Studio Code de [aici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clonați depozitul vostru pe calculator. Puteți face asta făcând clic pe butonul **Code** și copiind URL-ul:
1. Clonează repository-ul pe calculatorul tău. Poți face asta apăsând butonul **Code** și copiind URL-ul:
[CodeSpace](./images/createcodespace.png)
Apoi, deschide [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 execută următoarea comandă, înlocuind `<your-repository-url>` cu URL-ul pe care tocmai l-ai copiat:
Apoi, deschide [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 execută comanda următoare, înlocuind `<your-repository-url>` cu URL-ul pe care tocmai l-ai copiat:
```bash
git clone <your-repository-url>
```
2. 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.
2. 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pentru a previzualiza pagini HTML în cadrul Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pentru a previzualiza paginile HTML în Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 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
- 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
> **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](https://ff-quizzes.netlify.app/web/), aplicația de chestionare poate fi rulată local sau poate fi implementată pe Azure; urmează instrucțiunile din folderul `quiz-app`.
> **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](https://ff-quizzes.netlify.app/web/), 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 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](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Începutul | Accesibilitate | Învață noțiunile de bază despre accesibilitatea web | [Fundamentele Accesibilității](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bazele JS | Tipurile de Date în JavaScript | Fundamentele 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 | Array-uri și Buclă | Lucrează cu datele folosind array-uri și bucle în JavaScript | [Array-uri și Buclă](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML în practică | Construiește HTML-ul pentru a crea un terrariu online, concentrându-te pe construirea unui layout | [Introducere în HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Î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](./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 de la tastatură pentru a ghida logica aplicației 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 câteva elemente de bază 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 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](./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 optimizări | [Task-uri 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ă 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](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Desenare pe canvas | Învață despre Canvas API, folosit pentru a desena elemente pe ecran | [Desenare pe Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Mutarea elementelor pe ecran | Descoperă cum elementele pot dobândi mișcare folosind coordonatele carteziene și API-ul Canvas | [Mutarea 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ă 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ținerea scorului | Efectuează calcule matematice bazate pe starea și performanța jocului | [Ținerea 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 variabile | [Condiția de încheiere](./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 unei arhitecturi de website multipage 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) | Construiește un 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 aplicația ta, cum să le preiei, stochezi și 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 |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lucrul cu VScode | Învață cum să folosești un editor de cod| [Folosește editorul VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lucrul cu AI | Învață cum să construiești propriul tău asistent AI | [Proiect Asistent AI](./9-chat-project/README.md) | Chris |
| | 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](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Începutul | Accesibilitate | Învață elementele de bază ale accesibilității web | [Fundamentele accesibilității](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bazele JS | Tipuri de date în JavaScript | Noțiunile de bază despre tipurile de date 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 cod folosind metode de luare a deciziilor | [Luarea deciziilor](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Bazele JS | Array-uri și Buclă | Lucrează cu date folosind array-uri și bucle în JavaScript | [Array-uri și bucle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML în practică | Construiește HTML-ul pentru a crea un terrarium online, concentrându-te pe realizarea unui layout | [Introducere în HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | 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](./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ă stabilești elementele de bază ale unei extensii pentru 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 stocarea locală | Construiește elementele JavaScript ale extensiei browserului pentru a apela un API folosind variabile stocate local | [API-uri, formulare și stocare locală](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 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ță](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 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](./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 obține 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ă 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](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ținerea scorului | Realizează calcule matematice în funcție de starea și performanța jocului | [Ținerea scorului](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Terminarea și repornirea jocului | Învață despre terminarea și repornirea jocului, inclusiv curățarea asset-urilor și resetarea valorilor variabile | [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 scheletul arhitecturii unui site multipagină 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 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](./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 |
| 25 | [Browser/VScode Code](../../8-code-editor) | Lucrul cu VScode | Învață cum să folosești un editor de cod| [Folosește editorul VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Lucrul cu AI | Învață cum să construiești propriul asistent AI | [Proiect Asistent AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogie
Curriculumul nostru este conceput cu două principii pedagogice cheie în minte:
* învățare bazată pe proiecte
* chestionare frecvente
Curriculumul nostru este proiectat având în minte două principii pedagogice esențiale:
* învățarea bazată pe proiecte
* quizuri 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.
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 un [Drum de Învățare](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) pe Microsoft Learn!
> 🎓 Poți parcurge primele lecții din acest curriculum ca [Cale de Învățare](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 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](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ale cărei autori au contribuit la acest curriculum.
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](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", al căror autori au contribuit și 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.
Î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 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Vizitează ghidurile noastre [Cod de Conduită](CODE_OF_CONDUCT.md) și [Contribuire](CONTRIBUTING.md). Apreciem feedback-ul tău constructiv!
> Vizitează [Codul nostru de conduită](CODE_OF_CONDUCT.md) și liniile directoare pentru [Contribuții](CONTRIBUTING.md). Așteptăm cu interes feedback-ul tău constructiv!
## 🧭 Acces offline
Poți rula această documentație offline folosind [Docsify](https://docsify.js.org/#/). Fork-uiește acest repo, [instalează Docsify](https://docsify.js.org/#/quickstart) 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`.
Poți rula această documentație offline folosind [Docsify](https://docsify.js.org/#/). Fă un fork acestui 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`. Site-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! Descoperă:
## 🎒 Alte cursuri
Echipa noastră produce și alte cursuri! Verifică:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agenți
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -224,7 +224,7 @@ Echipa noastră produce și alte cursuri! Descoperă:
---
### Seria Inteligență Artificială Generativă
### Seria AI Generativă
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -232,7 +232,7 @@ Echipa noastră produce și alte cursuri! Descoperă:
---
### Învățare Esențială
### Învățare de bază
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -249,9 +249,9 @@ Echipa noastră produce și alte cursuri! Descoperă:
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ă î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.
@ -266,6 +266,6 @@ Acest depozit este licențiat sub licența MIT. Vezi fișierul [LICENSE](../../L
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 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.
**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 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.
# Foia de parcurs pentru depozitul Web-Dev-For-Beginners al Microsoft
**Acest depozit oferă o foaie de parcurs pentru învățarea elementelor fundamentale ale dezvoltării web, cu accent pe JavaScript, HTML și CSS. Curriculumul este flexibil și poate fi urmat integral sau parțial, cu 24 de lecții distribuite pe 12 săptămâni.**
## Repere cheie
* **Săptămânile 1-3:**
* Introducere în limbaje de programare și instrumente de lucru
* Bazele GitHub
* Accesibilitate
* Noțiuni de bază JS: tipuri de date, funcții și metode
* Luarea deciziilor cu JS
* **Săptămânile 4-6:**
* Array-uri și bucle
* Terrarium: HTML în practică
* CSS în practică
* Închideri în JavaScript
* Manipularea DOM
* **Săptămânile 7-9:**
* Jocul de tastare: programare bazată pe evenimente
* Green Browser Extension: lucrul cu browserele
* Crearea unui formular, apelarea unui API și stocarea variabilelor în stocarea locală
* Procese de fundal în browser
* Performanța web
* **Săptămânile 10-12:**
* Jocul spațiului: dezvoltare avansată de jocuri cu JavaScript
* Desenarea pe canvas
* Mișcarea elementelor pe ecran
* Detectarea coliziunilor
* Ținerea scorului, terminarea și reluarea jocului
* Aplicație bancară: Șabloane HTML și Rute într-o aplicație web
* Crearea unui formular de autentificare și înregistrare
* Metode de preluare și utilizare a datelor
* Concepte de gestionare a stării
## Rezultate de învățare
**Parcurgând această foaie de parcurs, studenții vor dobândi experiență practică creând un joc de tastare, un terrarium virtual, o extensie eco-friendly pentru browser, un joc în stil Space Invaders și o aplicație bancară pentru afaceri. De asemenea, vor dezvolta o înțelegere solidă a elementelor fundamentale ale dezvoltării web.**
## Resurse suplimentare
* Acest depozit oferă o sumedenie de resurse pentru învățare suplimentară, inclusiv tutoriale, exemple de cod și provocări.
* Platforma Microsoft Learn oferă o varietate de cursuri și trasee de învățare pentru dezvoltarea web.
* Comunități online precum Stack Overflow și MDN Web Docs furnizează sprijin și resurse valoroase pentru dezvoltatorii web.
**Sper că această foaie de parcurs să vă ajute în călătoria dvs. în dezvoltarea web!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Declinare a responsabilității**:
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 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 răspunderea pentru orice neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.
Ово је репозиторијум образовног курикулума за учење основа веб развоја за почетнике. Курикулум је свеобухватан 12-недељни курс који су развили Microsoft Cloud Advocates, са 24 практичне лекције које покривају JavaScript, CSS и HTML.
Ово је репозиторијум за образовни програм за подучавање основа веб развоја почетницима. Програм је обухватан 12-недељни курс развијен од стране Microsoft Cloud Advocates, који садржи 24 практичне лекције које покривају JavaScript, CSS и HTML.
### Кључне компоненте
- **Образовни садржај**: 24 структурисане лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Тераријум, игра куцања, проширење за прегледач, свемирска игра, апликација за банкарство, едитор кода и AI асистент за ћаскање
- **Интерактивни квизови**: 48 квизова са по 3 питања (процене пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи на 50+ језика путем GitHub Actions
- **Образовни садржај**: 24 структуиране лекције организоване у модуле засноване на пројектима
- **Практични пројекти**: Терраријум, Игра куцања, Прегледачки додатак, Свемирска игра, Банкарска апликација, Едитор кода и AI асистент за чет
- **Интерактивни квизови**: 48 квизова са по 3 питања (процена пре/после лекције)
- **Подршка за више језика**: Аутоматизовани преводи за више од 50 језика преко GitHub Actions
- **Технологије**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI пројекте)
### Архитектура
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свака фасцикла лекције садржи README, примере кода и решења
- Самостални пројекти узасебним директоријумима (quiz-app, разни пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација доступна преко Docsify и као PDF
- Образовни репозиторијум са структуром заснованом на лекцијама
- Свако фасцикло лекције садржи README, примере кода и решења
- Самостални пројекти упосебним директоријумима (quiz-app, разни пројекти лекција)
- Систем превођења користећи GitHub Actions (co-op-translator)
- Документација послужена преко Docsify и доступна као PDF
## Команде за подешавање
## Команде за постављање
Овај репозиторијум је првенствено намењен за конзумирање образовног садржаја. За рад на специфичним пројектима:
Овај репозиторијум је првенствено намењен за конзумирање образовног садржаја. За рад са специфичним пројектима:
- `7-bank-project/README.md` - Апликација за банкарство са аутентификацијом
- `5-browser-extension/README.md` - Развој проширења за прегледач
- `6-space-game/README.md` - Развој игара заснованих на Canvas-у
- `9-chat-project/README.md` - Пројекат AI асистента за ћаскање
За детаљна упутства о појединачним пројектима погледајте README фајлове у:
- `quiz-app/README.md` - Vue 3 квиз апликација
- `7-bank-project/README.md` - Банкарска апликација са аутентификацијом
- `5-browser-extension/README.md` - Развој прегледачких додатака
- `6-space-game/README.md` - Развој Canvas игре
- `9-chat-project/README.md` - AI асистент за чет
### Структура монорепозиторијума
### Монорепозиторијум структура
Иако није традиционални монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свака лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за потпуно искуство курикулума
Иако није класичан монорепозиторијум, овај репозиторијум садржи више независних пројеката:
- Свака лекција је самостална
- Пројекти не деле зависности
- Радите на појединачним пројектима без утицаја на друге
- Клонирајте цео репозиторијум за пун утисак образовног програма
---
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање одговорности**:
Овај документ је преведен уз помоћ АИ сервиса за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом матичном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или погрешна тумачења која произилазе из коришћења овог превода.
Научите основе веб развоја уз наш 12-недељни свеобухватни курс који воде Microsoft Cloud Advocates. Свака од 24 лекције улази у свет JavaScript-а, CSS-а и HTML-а кроз практичне пројекте као што су тераријуми, екстензије прегледача и свемирске игре. Укључите сеу квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје путовање у програмирању данас!
Научите основе веб развоја уз наш свеобухватни 12-недељни курс који воде Microsoft Cloud Advocates. Сваких 24 лекције дубоко истражује JavaScript, CSS и HTML кроз практичне пројекте као што су тераријуми, прегледачки екстензије и свемирске игре. Укључите сеу квизове, дискусије и практичне задатке. Побољшајте своје вештине и оптимизујте задржавање знања уз нашу ефикасну педагогију засновану на пројектима. Започните своје кодирање данас!
Придружите сезаједници Azure AI Foundry на Discord-у
Придружите сеAzure AI Foundry Discord заједници
Следите ове кораке да бисте започели коришћење ових ресурса:
Пратите ове кораке да бисте почели да користите ове ресурсе:
> Овај репозиторијум садржи преко 50 превода, што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> Овај репозиторијум садржи преко 50 превода језика што значајно повећава величину преузимања. Да бисте клонирали без превода, користите sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ово вам даје све што вам је потребно да завршите курс са знатно бржим преузимањем.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ако желите да имате додатне језике превода, подржани су на овој страни [овде](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
> Ово вам је све што вам је потребно за завршетак курса са много бржим преузимањем.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Посети [**Студентску страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћеш пронаћи ресурсе за почетнике, студентске пакете, па чак и начине да добијеш бесплатан сертификат. Ово је страница коју треба да означиш као фаворита и повремено провераваш док месечно ажурирамо садржаје.
Посетите [**Student Hub страницу**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) где ћете наћи ресурсе за почетнике, студентске пакете, па чак и начине да добијете бесплатан сертификат ваучер. Ово је страница коју желите да означите као обележивач и повремено проверите јер садржај мењамо месечно.
### 📣 Обавештење - Нови изазови GitHub Copilot Agent мода за завршетак!
### 📣 Обзнање - Нови GitHub Copilot Agent изазови за завршетак!
Додат јенови изазов, потражи "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Тоје нови изазов који треба да завршиш користећи GitHub Copilot и Agent мод. Ако раније ниси користио Agent мод, он осим генерисања текста може да креира и уређује фајлове, покреће команде и још много тога.
Додат нови изазов, потражите "GitHub Copilot Agent Challenge 🚀" у већини поглавља. Ово је нови изазов који треба да завршите користећи GitHub Copilot и Agent режим. Ако раније нисте користили Agent режим, он може не само да генерише текст већ и да креира и уређује фајлове, извршава команде и још много тога.
### 📣 Обавештење - _Нови пројекат за прављење уз помоћ генеративне вештачке интелигенције_
### 📣 Обзнање - _Нови пројекат за израду помоћу генеративне АИ_
Додат је нови асистентски AI пројекат, провери га [пројекат](./9-chat-project/README.md)
Нови AI Assistant пројекат је управо додат, погледајте [проект](./9-chat-project/README.md)
### 📣 Обавештење - _Нови наставни план_о генеративној AI на JavaScript-у управо је објављен
### 📣 Обзнање - _Нови наставни план_о генеративној АИ за JavaScript је управо објављен
Не пропусти наш нови наставни план о генеративној AI!
Не пропустите наш нови генеративни AI наставни план!
Посети [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнеш!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!
Свака лекција укључује задатак за завршавање, проверу знања и изазов који ће ти помоћи да научиш теме као што су:
- Израђивање упита и инжењеринг упита
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас оспособљава за учење тема као што су:
- Израда упита и инжењеринг упита
- Генерисање апликација за текст и слике
- Апликације за претраживање
- Апликације за претрагу
Посети [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) да започнеш!
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете!
## 🌱 Започињање
## 🌱 Почетак рада
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) о томе како да користите овај наставни план. Волећемо ваше повратне информације [на нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Наставници**, укључили смо [неке предлоге](for-teachers.md) како користити овај наставни план. Волео бих да добијемо ваше повратне информације [у нашем форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију почнете са квизом пре предавања, а затим прочитајте материјал, завршите разне активности и проверите своје разумевање уз квиз након предавања.
**[Учећи](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за сваку лекцију, започните са квизом пре предавања и наставите читањем материјала предавања, завршите различите активности и проверите своје разумевање квизом након предавања.
Да бисте унапредили своје искуство учења, повежите сеса својим колегама и радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће тим модератора бити доступан да одговори на ваша питања.
Да бисте побољшали своје искуство учења, повежите сеса вршњацима да радите на пројектима заједно! Дискусије су охрабрене на нашем [форуму за дискусију](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) где ће наш тим модератора бити доступан да одговори на ваша питања.
За даље образовање, топло препоручујемо да истражите [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне материјале за учење.
За даље образовање, топло препоручујемо истраживање [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) за додатне материјале за учење.
### 📋 Постављање вашег окружења
### 📋 Постављање окружења
Овај наставни план већ има спремно развојно окружење! Када кренеш, можеш да одабереш да покренеш наставни план у [Codespace-у](https://github.com/features/codespaces/) (_окружење засновано на прегледачу, без потребе за инсталацијом_), или локално на свом рачунару користећи текстуални едитор као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Овај наставни план има спремно развојно окружење! Пошто почнете, можете изабрати да покренете наставни план у [Codespace-у](https://github.com/features/codespaces/) (_прегледачком окружењу без потребе за инсталацијама_), или локално на вашем рачунару користећи уређивач текста као што је [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Направи свој репозиторијум
Да бисте лако сачували свој рад, препоручујемо да направите своју копију овог репозиторијума. То можете учинити кликом на дугме **Use this template** на врху странице. Ово ће створити нови репозиторијум у вашем GitHub налогу са копијом овог наставног плана.
#### Креирање свог репозиторијума
Да бисте лако сачували свој рад, препоручујесе да направите своју копију овог репозиторијума. То можете урадити кликом на дугме **Use this template** на врху странице. Ово ће креирати нови репозиторијум у вашем GitHub налогу са копијом наставног плана.
Пратите ове кораке:
1. **Направи форк репозиторијума**: Кликните на дугме "Fork"у горњем десном углу ове странице.
Укопији репозиторијума коју сте направили, кликните дугме **Code** и одаберите **Open with Codespaces**. Ово ће направити нови Codespace у којем можете радити.
Усвојој копији овог репозиторијума коју сте креирали, кликните на дугме **Code** и одаберите **Open with Codespaces**. Ово ће креирати нови Codespace у коме ћете радити.
#### Покретање наставног плана локално на вашем рачунару
#### Покретање курса локално на вашем рачунару
Да бисте покренули овај наставни план локално на рачунару, потребан вам је текстуални едитор, прегледач и алат за линију команди. Наша прва лекција, [Увод у програмске језике и алате заната](../../1-getting-started-lessons/1-intro-to-programming-languages), водиће вас кроз различите опције за сваки од ових алата да изаберете шта вам највише одговара.
Да бисте покренули овај курс локално на рачунару, потребан вам је уређивач текста, прегледач и алат командне линије. Наша прва лекција, [Увод у програмске језике и алате струке](../../1-getting-started-lessons/1-intro-to-programming-languages), упознаће вас са различитим опцијама за сваки од ових алата да бисте одабрали шта вам највише одговара.
Препорука је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као едитор, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Препорука нам је да користите [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) као уређивач, који такође има уграђени [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code можете преузети [овде](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонирајте свој репозиторијум на рачунар. То можете урадити кликом на дугме **Code** и копирањем URL-а:
[CodeSpace](./images/createcodespace.png)
Затим, отворите [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у оквиру [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>`са УРЛ адресом коју сте управо копирали:
Онда отворите [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) унутар [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и покрените следећу команду, замењујући `<your-repository-url>`URL-ом који сте управо копирали:
```bash
git clone <your-repository-url>
```
2. Отворите фасциклу у Visual Studio Code-у. То можете урадити кликом на **File** > **Open Folder** и избором фасцикле коју сте управо клонирали.
2. Отворите фасциклу у Visual Studio Code-у. Ово можете урадити кликом на **File** > **Open Folder** и одабиром фасцикле коју сте управо клонирали.
> Препоручени Visual Studio Code додаци:
> Препоручене Visual Studio Code екстензије:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед HTML страница унутар Visual Studio Code-а
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - да вам помогне да пишете код брже
## 📂 Свака лекција укључује:
- опциону скицноту
- опционални додатни видео
- пред-лекцијски квиз за загревање
- опциони скичнот
- опциони додатни видео
- квиз за загревање пре лекције
- писану лекцију
- за пројектно засноване лекције, корак-по-корак упутства како да изградите пројекат
- за пројектно засноване лекције, корак по корак упутства како направити пројекат
- [квиз након лекције](https://ff-quizzes.netlify.app/web/)
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова са по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), апликација за квизове може се покренути локално или поставити на Azure; пратите упутства у фасцикли `quiz-app`.
> **Напомена о квизовима**: Сви квизови се налазе у фасцикли Quiz-app, укупно 48 квизова од по три питања. Доступни су [овде](https://ff-quizzes.netlify.app/web/), квиз апликација може да се покрене локално или објави на Azure; пратите упутства у фасцикли `quiz-app`.
## 🗃️ Лекције
| | Име пројекта | Концепти који се уче | Циљеви учења | Повезана лекција | Аутор |
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основе које стоје иза већине програмских језика и о софтверу који помаже професионалним програмерима у њиховом раду | [Увод у програмске језике и алате заната](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Џасмин |
| 02 | Почетак рада | Основе GitHub-а, укључује рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на кодној бази | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Флор |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Кристофер |
| 04 | Основе JS | Типови података у JavaScript-у | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Џасмин |
| 05 | Основе JS | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Џасмин и Кристофер |
| 06 | Основе JS | Доношење одлука са JS-ом | Научите како да креирате услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Џасмин |
| 07 | Основе JS | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у| [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Џасмин |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Изградите HTML за креирање онлајн тераријума, фокусирајући се на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Џен |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Изградите CSS за стилизовање онлајн тераријума, фокусирајући се на основе CSS укључујући прављење странице одзивном | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Џен |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript затварања, манипулација DOM-ом | Направите JavaScript који омогућава тераријуму да функционише као интерфејс за превлачење и испуштање, фокусирајући се на затварања и манипулацију DOM-ом | [JavaScript затварања, манипулација DOM-ом](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Џен |
| 11 | [Тастатурна игра](./4-typing-game/solution/README.md) | Изградња тастатурне игре | Научите како да користите тастатурне догађаје за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Кристофер |
| 12 | [Зелени проширење за прегледач](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи функционишу, њихову историју и како направити прве елементе проширења прегледача | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Џен |
| 13 | [Зелени проширење за прегледач](./5-browser-extension/solution/README.md) | Изградња форме, позивање API-ја и чување променљивих улокалној меморији | Направите JavaScript елементе свог проширења прегледача за позивање API-ја користећи променљиве смештене у локалној меморији | [API-ји, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Џен |
| 14 | [Зелени проширење за прегледач](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, веб перформансе | Користите позадинске процесе прегледача за управљање иконом проширења; упознајте сеса веб перформансама и неким оптимизацијама | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Џен |
| 15 | [Свемирска игра](./6-space-game/solution/README.md) | Напредније развијање игара са JavaScript-ом | Учите о Наслеђивању коришћењем и Класа и Композиције и Pub/Sub обрасцу, као припрему за израду игре | [Увод у напредни развој игара](./6-space-game/1-introduction/README.md) | Крис |
| 16 | [Свемирска игра](./6-space-game/solution/README.md) | Цртање на платну | Сазнајте о Canvas API-ју који се користи за цртање елемената на екрану | [Цртање на платну](./6-space-game/2-drawing-to-canvas/README.md) | Крис |
| 17 | [Свемирска игра](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи картезијанске координате и Canvas API | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Крис |
| 18 | [Свемирска игра](./6-space-game/solution/README.md) | Детекција судара | Направите да се елементи сударе и реагују једни на друге користећи притиске тастера и обезбедите cooldown функцију за осигурање перформанси игре | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Крис |
| 19 | [Свемирска игра](./6-space-game/solution/README.md) | Вођење резултата | Извршите математичке прорачунe на основу статуса и перформанси игре | [Вођење резултата](./6-space-game/5-keeping-score/README.md) | Крис |
| 20 | [Свемирска игра](./6-space-game/solution/README.md) | Завршавање и поновно покретање игре| Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов за завршетак](./6-space-game/6-end-condition/README.md) | Крис |
| 21 | [Банкарска апликација](./7-bank-project/solution/README.md) | HTML шаблони и рутеу веб апликацији | Научите како да направите основу архитектуре мултистраничног веб сајта користећи рутирање и HTML шаблоне | [HTML шаблони и руте](./7-bank-project/1-template-route/README.md) | Јохан |
| 22 | [Банкарска апликација](./7-bank-project/solution/README.md) | Изградња форме за пријаву и регистрацију | Научите о изградњи форми и руковању валидацијом | [Форме](./7-bank-project/2-forms/README.md) | Јохан |
| 23 | [Банкарска апликација](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података| Како подаци улазе и излазе из ваше апликације, како их преузимати, чувати и уклањати | [Подаци](./7-bank-project/3-data/README.md) | Јохан |
| 24 | [Банкарска апликација](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како управљати њиме програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Јохан |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са VScode | Научите како да користите уређивач кода| [Коришћење VScode уређивача кода](./8-code-editor/1-using-a-code-editor/README.md) | Крис |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како да направите свог сопственог AI помоћника | [Пројекат AI помоћник](./9-chat-project/README.md) | Крис |
| | Назив пројекта | Концепти који се уче | Образовни циљеви | Повезана лекција | Аутор |
| 01 | Почетак рада | Увод у програмирање и алате заната | Научите основне основе иза већине програмских језика и о софтверу који помаже професионалним програмерима да обаве свој посао | [Увод у програмске језике и алате заната](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Почетак рада | Основе GitHub-а, укључујући рад у тиму | Како користити GitHub у свом пројекту, како сарађивати са другима на коду | [Увод у GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Почетак рада | Приступачност | Научите основе веб приступачности | [Основе приступачности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Основе | JavaScript типови података | Основе типова података у JavaScript-у | [Типови података](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Основе | Функције и методе | Научите о функцијама и методама за управљање логиком апликације | [Функције и методе](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Основе | Одлучивање уз помоћ JS | Научите како правити услове у свом коду користећи методе доношења одлука | [Доношење одлука](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Основе | Низови и петље | Рад са подацима користећи низове и петље у JavaScript-у | [Низови и петље](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераријум](./3-terrarium/solution/README.md) | HTML у пракси | Направите HTML за креирање онлајн тераријума, са фокусом на изградњу распореда | [Увод у HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераријум](./3-terrarium/solution/README.md) | CSS у пракси | Направите CSS за стилизовање онлајн тераријума, са фокусом на основе CSS-а укључујући и респонсивност странице | [Увод у CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераријум](./3-terrarium/solution/README.md) | JavaScript closures, DOM манипулација | Направите JavaScript који чини тераријум интерактивним помоћу "drag/drop", са фокусом на closure и DOM манипулацију | [JavaScript closures, DOM манипулација](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Направите игру куцања | Научите како користити догађајеса тастатуре за управљање логиком ваше JavaScript апликације | [Програмирање вођено догађајима](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Рад са прегледачима | Научите како прегледачи раде, њихову историју и како започети развој додатка за прегледач | [О прегледачима](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Израда форме, позив API-ја и чување променљивих уlocal storage | Направите JavaScript елементе ваше додатке за прегледачем који позива API користећи променљиве сачуване у локалну меморију | [API, форме и локална меморија](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Позадински процеси у прегледачу, перформансе веба | Употребите позадинске процесе прегледача за управљање иконицом додатка; научите о перформансама и оптимизацијама за учинак | [Позадински задаци и перформансе](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Напреднија развој игара са JavaScript-ом | Научите о наслеђивању користећи класе и композицију и Pub/Sub шаблон, припрема за развој игре | [Увод у напредан развој игара](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Цртање на Canvas | Научите о Canvas API-ју који се користи за цртање елемената на екрану | [Цртање на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Померање елемената по екрану | Откријте како елементи могу добити кретање користећи координате и Canvas API | [Померање елемената](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Детекција судара | Учините елементе да се сударе и реагују један на другог користећи притиске тастера и обезбедите cooldown функцију за перформансе | [Детекција судара](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Вођење резултата | Извршите математичке калкулације на основу статуса и учинка игре | [Вођење резултата](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Завршавање и поновно покретање игре | Научите о завршетку и поновном покретању игре, укључујући чишћење ресурса и ресетовање вредности променљивих | [Услов завршетка](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и рутирање у веб апликацији | Научите како креирати основну архитектуру са више страница користећи руте и HTML шаблоне | [HTML шаблони и рутирање](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Направите форму за пријаву и регистрацију | Научите како градити форме и руковати валидирањем | [Форме](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методе преузимања и коришћења података | Како подаци улазе и излазе из апликације, како их преузимати, чувати и одлагати | [Подаци](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепти управљања стањем | Научите како ваша апликација задржава стање и како гауправљати програмски | [Управљање стањем](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Рад са VScode | Научите како користити едитор кода | [Користите VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Рад са вештачком интелигенцијом | Научите како направити свог АИ асистента | [Пројекат АИ асистента](./9-chat-project/README.md) | Chris |
## 🏫 Педагогија
Наш програм једизајниран са два кључна педагошка принципа на уму:
Наш наставни план и програм дизајнирани суса два кључна педагошка принципа на уму:
* учење засновано на пројектима
* чести квизови
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство израдом тастатурне игре, виртуелног тераријума, еколошки прихватљивог проширења за прегледач, игре у стилу свемирског инвадера и банкарске апликације за предузећа. До краја серије, студенти ће стећи чврсто разумевање веб развоја.
Програм учи основе JavaScript-а, HTML-а и CSS-а, као и најновије алате и технике које данашњи веб програмери користе. Студенти ће имати прилику да стекну практично искуство правећи игру куцања, виртуелни тераријум, еколошки додатак за прегледач, игру у стилу освајача свемира и банкарску апликацију за предузећа. На крају серије, студенти ће имати чврсто разумевање веб развоја.
> 🎓 Прве неколико лекција у овом курикулуму можете проћи као [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Можете узети првих неколико лекција у овом наставном програму као [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Осигуравањем да садржај одговара пројектима, процес је учињен занимљивијим за студенте и повећава задржавање концепата. Такође смо написали неколико почетних лекција о основама JavaScript-а да бисмо увели концепте, упарених са видеом из збирке видео туторијала "[Серија за почетнике: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", чијису неки аутори допринели овом курикулуму.
Обезбеђивањем да садржај буде повезан са пројектима, процес постаје занимљивији за студенте и повећава се задржавање концепата. Такође смо написали неколико уводних лекција о основу JavaScript-а за увођење концепата, у пару са видео-серијалом "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", којемсу неки аутори допринели овом курикулуму.
Поред тога, квиз самалим улогом пре часа поставља намераву студента према учењу теме, док други квиз после часа обезбеђује даље задржавање. Овај курикулум је осмишљен да буде флексибилан и забаван и може се похађати у целини или делимично. Пројекти почињу мали и постају све сложенији до краја циклуса од 12 недеља.
Поред тога, квиз саниским ризиком пре часа поставља намеру студента према учењу теме, док други квиз након часа осигурава даље задржавање знања. Овај програм је дизајниран да буде флексибилан и забаван и може се узимати у целости или делимично. Пројекти почињу мали и постепено постају сложенији до краја 12-недељног циклуса.
Док смо свесно избегавали увођење JavaScript фрејмворка како бисмо се концентрисали на основне вештине потребне као веб програмер пре усвајања фрејмворка, добар следећи корак након завршетка овог курикулума био би учење о Node.js-у кроз другу збирку видео снимака: "[Серија за почетнике: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Иако смо намјерно избегавали увод JavaScript фрејмворка како бисмо се концентрисали на основне вештине потребне веб програмеру пре усвајања фрејмвора, добар следећи корак након завршетка овог програма био би учење Node.js преко друге серије видео-снимака: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Посетите наше смернице [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добро дошли су ваши конструктивни предлози!
> Посетите наше смернице [Code of Conduct](CODE_OF_CONDUCT.md) и [Contributing](CONTRIBUTING.md). Добродошла је ваша конструктивна повратна информација!
## 🧭 Приступ ван мреже
## 🧭 Оффлајн приступ
Ову документацију можете покренути ван мреже користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репозиторијум, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на свом локалном уређају, а затим у коренској фасцикли овог репозиторијума откуцајте `docsify serve`. Веб сајт ће се послужити на порту 3000 на вашем локалном хосту: `localhost:3000`.
Ову документацију можете покренути оффлајн користећи [Docsify](https://docsify.js.org/#/). Форкујте овај репо, [инсталирајте Docsify](https://docsify.js.org/#/quickstart) на локалну машину и затим у коренској фасцикли овог репозиторијума укуцајте `docsify serve`. Вебсајт ће бити доступан на порту 3000 на вашем localhost-у: `localhost:3000`.
## 📘 PDF
PDF свих лекција можете пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF свих лекција можесе пронаћи [овде](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Остали курсеви
## 🎒 Остали курсеvi
Наш тим производи и друге курсеве! Погледајте:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / агенти
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серии генеративне вештачке интелигенције
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Серия генеративне AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основно учење
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серии Ко-пилота
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Ако запнете или имате било каквих питања о изградњи AI апликација, прикључите се другим ученицима и искусним програмерима у дискусијама о MCP. Тоје подржавајућа заједница у којојсу питања добродошла и знање се слободно дели.
Ако запнете или имате питања о креирању AI апликација. Придружите се другим учесницима и искусним програмерима у дискусијама о MCP. Ово је подржавајућа заједница гдесу питања добродошла и знање се слободно дели.
Овај репозиторијум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
Овај репозиторјум је лиценциран под MIT лиценцом. Погледајте датотеку [LICENSE](../../LICENSE) за више информација.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање одговорности**:
Овај документ је преведен коришћењем AI услуге за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да превод буде тачан, имајте у виду да аутоматски преводи могу садржавати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква неспоразума или погрешна тумачења настала коришћењем овог превода.
**Одрицање од одговорности**:
Овај документ је преведен коришћењем AI услуге за превођење [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо прецизности, молимо вас да имате у виду да аутоматски преводи могу да садрже грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати коначним и ауторитетним извором. За критичне информације препоручује се професионални људски превод. Ми нисмо одговорни за било каква неспоразуми или погрешна тумачења која могу настати употребом овог превода.
# План путање за Microsoft-ов репозиторијум Web-Dev-For-Beginners
**Овај репозиторијум пружа план путање за учење основа веб развоја са фокусом на JavaScript, HTML и CSS. Наставни план је флексибилан и може се похађати у целини или делимично, са 24 лекције распоређене кроз 12 недеља.**
## Кључне прекретнице
* **Недеље 1-3:**
* Увод у програмске језике и алате заната
* Основе GitHub-а
* Приступачност
* Основе JS: типови података, функције и методе
* Доношење одлука помоћу JS
* **Недеље 4-6:**
* Низови и петље
* Терраријум: HTML у пракси
* CSS у пракси
* JavaScript клоужери
* Манипулација DOM-ом
* **Недеље 7-9:**
* Игра куцања: Програмирање на основу догађаја
* Green Browser Extension: Рад са прегледачима
* Прављење форме, позивање API-ја и чување променљивих у локалној меморији
* Позадински процеси у прегледачу
* Веб перформансе
* **Недеље 10-12:**
* Space Game: Напреднији развој игара са JavaScript-ом
* Цртање на canvas-у
* Померање елемената по екрану
* Детекција судара
* Вођење резултата, завршетак и поновни почетак игре
* Banking App: HTML шаблони и рутирање у веб апликацији
* Прављење форме за пријављивање и регистрацију
* Методи дохваћања и коришћења података
* Концепти управљања стањем
## Резултати учења
**Завршетком ове план путање, студенти ће стећи практично искуство у изради игре куцања, виртуелног терраријума, еко-пријатељског проширења за прегледач, игре у стилу Space Invaders и банкарске апликације за пословање. Такође ће развити солидно разумевање основа веб развоја.**
## Додатни ресурси
* Овај репозиторијум нуди богатство ресурса за даље учење, укључујући туторијале, примере кода и изазове.
* Microsoft Learn платформа нуди разне курсеве и планове учења за веб развој.
* Онлајн заједнице као што су Stack Overflow и MDN Web Docs пружају вредну подршку и ресурсе за веб програмере.
**Надам се да ће вам овај план путање помоћи на вашем путу развоја веба!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Одрицање од одговорности**:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако тежимо тачности, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Изворни документ на његовом матичном језику треба сматрати ауторитетним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразума или погрешне интерпретације које произлазе из коришћења овог превода.
localizeflow[bot]
2 days ago