Това ерепозиториум сучебна учебна програма за преподаване на основите на уеб разработката за начинаещи. Учебната програма е изчерпателен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практически урока, обхващащи JavaScript, CSS и HTML.
Това е учебнохранилище с учебна програма за преподаване на основите на уеб разработката на начинаещи. Учебната програма еобширен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практически урока, обхващащи JavaScript, CSS и HTML.
### Ключови компоненти
### Основни компоненти
- **Образователно съдържание**: 24 структурирани урока, организирани в модули, базирани на проекти
- **Практически проекти**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
- **Практически проекти**: Терариум, Игра за писане, Разширение за браузър, Космическа игра, Банково приложение, Редактор на код и AI чат асистент
- **Интерактивни тестове**: 48 теста с по 3 въпроса всеки (оценки преди/след урок)
- **Многоезична поддръжка**: Автоматични преводи за 50+ езика чрез GitHub Actions
- **Поддръжка на множество езици**: Автоматични преводи за над 50 езика чрез GitHub Actions
- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI проекти)
### Архитектура
- Образователен репозиториум със структура, базирана на уроци
- Всяка папка на урока съдържа README, примери с код и решения
- Самостоятелни проекти в отделни директории (quiz-app, различни проекти от уроците)
- Образователно хранилище с структура, базирана на уроци
- Всяка папка с урок съдържа README, кодови примери и решения
- Самостоятелни проекти в отделни директории (quiz-app, различни проекти за уроци)
- Система за превод, използваща GitHub Actions (co-op-translator)
- Документация, обслужвана чрез Docsify и налична като PDF
- Документация, предоставена чрез Docsify и налична като PDF
## Команди за настройка
Този репозиториуме основно за консумация на образователно съдържание. За работа с конкретни проекти:
Това хранилищее основно за консумация на образователно съдържание. За работа с конкретни проекти:
- GitHub токените трябва да имат минимално необходими разрешения
### Достъп до GitHub Models
@ -355,52 +357,52 @@ CO_OP_TRANSLATOR_METADATA:
### Целева аудитория
- Напълно начинаещи в уеб разработката
- Студенти и самообучаващи се
- Учители, използващи учебната програма в класни стаи
- Съдържанието е проектирано за достъпност и постепенно изграждане на умения
- Студенти и самонайствнюющи се
- Учители, използващи учебната програма в класната стая
- Съдържанието е проектирано за достъпност и постепенно придобиване на умения
### Образователна философия
- Подход, базиран на проекти
- Проектно-базирано обучение
- Чести проверки на знанията (тестове)
- Практически упражнения с код
- Практически упражнения по кодиране
- Примери с реални приложения
- Фокус върху основите преди фреймуърковете
### Поддръжка на репозитория
### Поддръжка на хранилището
- Активна общност от учащи и допринасящи
- Редовни актуализации на зависимости и съдържание
- Проблемите и дискусиите се следят от поддържащите
- Актуализациите на преводите автоматизирани чрез GitHub Actions
- Мониторинг на проблеми и дискусии от поддържащите
- Автоматизирани актуализации на преводите чрез GitHub Actions
### Свързани ресурси
- [Модули на Microsoft Learn](https://docs.microsoft.com/learn/)
- [Ресурси на Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоръчвасе за учащите
- Допълнителни курсове: Generative AI, Data Science, ML, IoT учебни програми налични
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) препоръчван за учащите
- Допълнителни курсове: генеративно AI, Data Science, ML, IoT учебни програми
### Работа с конкретни проекти
За подробни инструкции за отделните проекти, вижте README файловете в:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking application with authentication
- `5-browser-extension/README.md` - Browser extension development
- `6-space-game/README.md` - Canvas-based game development
- `9-chat-project/README.md` - AI chat assistant project
За подробни инструкции по отделните проекти вижте 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 DISCLAIMER START -->
**Отказ от отговорност**:
Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на оригиналния език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за каквито и да е недоразумения или погрешни тълкувания, възникнали в резултат на използването на този превод.
Този документ е преведен с помощта на 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
Присъединете се към Azure AI Foundry Discord Общността
Следвайте тези стъпки, за да започнете да използвате тези ресурси:
3. [**Присъединете се към Azure AI Foundry Discord и сесрещнетес експерти и други разработчици**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Поддръжка на множество езици
#### Поддържа се чрез GitHub Action (автоматизирано и винаги актуално)
#### Поддържа се чрез GitHub Action (Автоматично и винаги актуално)
> **Предпочитате да клонирате локално?**
>
> Това хранилище включва над 50 езикови превода, което значително увеличава размера на изтегляне. За да клонирате без преводите, използвайте sparse checkout:
> Този репозитори включва над 50 превода на езици, което значително увеличава размера на изтегляне. За да клонирате без преводи, използвайте sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -31,225 +31,221 @@
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Това ви осигурява всичко необходимо за завършване на курса с много по-бързо изтегляне.
> Това ви дава всичко необходимо за завършване на курса с много по-бързо изтегляне.
**Ако желаете поддръжка на допълнителни езици за превод, те са посочени [тук](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://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_
### 📣 Обявление - _Нов проект за изграждане с Generative AI_
Току-що добавен нов проект AI Асистент, разгледайте го [тук](./9-chat-project/README.md)
Току-що добавен нов проект AI Асистент, разгледайте [проекта](./9-chat-project/README.md)
### 📣 Обява - _Нова учебна програма_ за генеративен AI за JavaScript току-що излезе
### 📣 Обявление - _Нова учебна програма_ за Generative AI за JavaScript току-що излезе
Не пропускайте новия ни курс за генеративен AI!
Не пропускайте нашата нова учебна програма за Generative AI!
Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!
- Уроци, обхващащи всичко от основите до RAG.
- Взаимодействайте с исторически персонажи чрез GenAI и нашето спомагателно приложение.
- Забавен и ангажиращ разказ, пътуване във времето!
- Уроци, покриващи всичко от основи до RAG.
- Взаимодействайте с исторически личности чрез GenAI и нашето приложение спътник.
- Забавен и увлекателен разказ, ще пътувате във времето!
Във всеки урок има задача за изпълнение, проверка на знанията и предизвикателство, които ви насочват към изучаване на теми като:
- Създаване на команди и инженерство на подкани
- Генериране на текст и изображения за приложения
Всеки урок включва задача за изпълнение, проверка на знания и предизвикателство, които да ви помогнат при изучаването на теми като:
- Подсказване и инженеринг на подсказки
- Генериране на приложения за текст и изображения
- Приложения за търсене
Посетете [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).
1. Клонирайте хранилището си на компютъра. Можете да го направите като кликнете върху бутона **Code** и копирате URL адреса:
Препоръчваме ви да използвате [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>`стоку-що копирания 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>
```
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) - за бързо писане на код
> * [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`.
## 🗃️ Занятия
| | Име на проекта | Преподавани концепции | Учебни цели | Свързан урок | Автор |
| 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 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 | [Разширение за браузър](./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 с променливи, съхранени локално | [APIs, Форми и Локално съхранение](./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 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) | Откриване на сблъсъци | Направете елементите да се сблъскват и реагират един на друг чрез натискане на клавиши и предоставете cooldown функция | [Откриване на сблъсъци](./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 |
- задание
- [тест след урока](https://ff-quizzes.netlify.app/web/)
> **Бележка за тестовете**: Всички тестове се намират в папката Quiz-app, общо 48 теста с по три въпроса във всеки. Теса достъпни [тук](https://ff-quizzes.netlify.app/web/), приложението за тестове може да се изпълнява локално или да се публикува в Azure; следвайте инструкциите в папката `quiz-app`.
## 🗃️ Уроци
| | Име на проекта | Теми, които се преподават | Учебни цели | Свързан урок | Автор |
| 01 | Getting Started | Въведение в програмирането и инструментите на занаята | Научете основите зад повечето програмни езици и софтуера, който помага на професионалните разработчици да вършат работата си | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Основи на GitHub, включва работа в екип | Как да използвате GitHub в проекта си, как да си сътрудничите с други върху кодовата база | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Достъпност | Научете основите на уеб достъпността | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Типове данни в JavaScript | Основите на типовете данни в JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Функции и методи | Научете за функциите и методите за управление на логиката на приложението | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | JS Basics | Вземане на решения с JS | Научете как да създавате условия в кодаси чрез методи за вземане на решения | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Масиви и цикли | Работа с данни чрез масиви и цикли в JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML на практика | Създайте HTML за онлайн терариум, с фокус върху създаването на оформление | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS на практика | Създайте CSS, за да стилизирате онлайн терариума с акцент върху основите на CSS, включително адаптивност на страницата | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript затваряния, манипулация на DOM | Създайте JavaScript, за да направите терариума функционален с drag/drop интерфейс, с акцент върху затваряния и манипулация на DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Създаване на игра за писане | Научете как да използвате клавишни събития, за да управлявате логиката на вашето JavaScript приложение | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Работа с браузъри | Научете как работят браузърите, тяхната история и как да изградите първите елементи на браузър разширение | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Създаване на форма, повикване на API и съхраняване на променливи в локално хранилище | Изградете JavaScript елементи на браузър разширението си за извикване на API с използване на променливи, съхранявани в локално хранилище | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра за управление на иконата на разширението; научете за уеб производителността и оптимизации за повишаване | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | По-напреднало разработване на игри с JavaScript | Научете за наследяването чрез класове и композиция и патърна Pub/Sub, като подготовка за създаване на игра | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Рисуване върху платно | Научете за Canvas API, използван за рисуване на елементи на екран | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Преместване на елементи по екрана | Открийте как елементите могат да придобият движение чрез декартови координати и Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Откриване на сблъсък | Накарайте елементите да се сблъскват и реагират един на друг чрез натискане на клавиши и добавете функция за забавяне, за да осигурите производителност на играта | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Водене на резултати | Извършвайте математически изчисления въз основа на състоянието и представянето на играта | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Край и рестартиране на играта | Научете за край и рестартиране на играта, включително почистване на ресурси и нулиране на стойности на променливи | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML шаблони и маршрути в уеб приложение | Научете как да създадете скелет на архитектурата на многостраничен уебсайт чрез маршрутизиране и HTML шаблони | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Създаване на формуляр за вход и регистрация | Научете за създаването на формуляри и обработката на валидационни процедури | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Методи за извличане и използване на данни| Как данните постъпват и излизат от приложението ви, как да ги изтегляте, съхранявате и изтривате | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Концепции за управление на състояние | Научете как вашето приложение запазва състояние и как да го управлявате програмно | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Работа с VScode | Научете как да използвате редактор на код| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Работа с изкуствен интелект | Научете как да създадете собствен AI асистент | [AI Assistant project](./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: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://github.com/microsoft/langchain-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)
### Генеративен 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)
---
### Серия 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). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или неправилни тълкувания, произтичащи от използването на този превод.
Aceasta este o arhivă curriculară educațională pentru predarea elementelor fundamentale de dezvoltare web pentru începători. Curriculumul este un curs cuprinzător de 12 săptămâni dezvoltate de Microsoft Cloud Advocates, care include 24 de lecții practice acoperind JavaScript, CSS și HTML.
Acesta este un depozit de curriculum 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, care include 24 de lecții practice ce acoperă 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, Typing Game, Browser Extension, Space Game, Banking App, Code Editor și AI Chat Assistant
- **Chestionare interactive**: 48 de chestionare cu câte 3 întrebări fiecare (evaluări pre/post-lecție)
- **Suport multi-limbă**: Traduceri automate pentru 50+ de limbi prin GitHub Actions
- **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 de chat AI
- **Chestionare Interactive**: 48 chestionare cu câte 3 întrebări fiecare (evaluări înainte/după lecție)
- **Suport Multilingv**: Traduceri automate pentru peste 50 de limbi prin GitHub Actions
- `9-chat-project/README.md` - Proiect asistent chat AI
### Structura monorepo-ului
### Structura Monorepo
Deși nu este un monorepo tradițional, acest repository conține multiple proiecte independente:
- Fiecare lecție este autonomă
Deși nu este un monorepo tradițional, acest depozit conține mai multe proiecte independente:
- Fiecare lecție este auto-suficientă
- Proiectele nu împart dependențe
- Lucrează la proiecte individuale fără a afecta altele
- Clonează întregul repo pentru experiența completă a curriculumului
- Se poate lucra pe proiecte individuale fără a afecta altele
- Clonați întregul depozit pentru experiența completă a curriculumului
---
<!-- 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ă o traducere profesională realizată de un traducător uman. Nu ne asumăm nicio răspundere pentru orice neînțelegeri sau interpretări greșite care rezultă din utilizarea acestei traduceri.
**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 să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională efectuată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite rezultate din utilizarea acestei traduceri.
# Dezvoltare Web pentru Începători - Un Curriculum
Învață elementele fundamentale ale dezvoltării web cu cursul nostru cuprinzător de 12 săptămâni oferit de Microsoft Cloud Advocates. Fiecare din cele 24 de lecții explorează JavaScript, CSS și HTML prin proiecte practice precum terarii, extensii pentru browser și jocuri spațiale. Implică-te în quizuri, discuții și teme practice. Îmbunătățește-ți abilitățile și optimizează reținerea cunoștințelor cu pedagogia noastră eficientă bazată pe proiecte. Începe-ți călătoria în programare chiar azi!
Învață noțiunile fundamentale ale dezvoltării web cu cursul nostru cuprinzător de 12 săptămâni creat de Microsoft Cloud Advocates. Fiecare dintre cele 24 de lecții explorează JavaScript, CSS și HTML prin proiecte practice precum terarii, extensii pentru browser și jocuri spațiale. Participă la chestionare, discuții și teme practice. Îmbunătățește-ți abilitățile și optimizează-ți retenția cunoștințelor cu pedagogia noastră eficientă bazată pe proiecte. Începe-ți călătoria în programare astăzi!
Alătură-te Comunității Azure AI Foundry pe Discord
Alătură-te comunității Azure AI Foundry pe Discord
> Acest repo include traduceri în peste 50 de limbi ceea ce mărește semnificativ dimensiunea descărcării. Pentru a clona fără traduceri, folosește sparse checkout:
> Acest depozit include peste 50 de traduceri care cresc semnificativ dimensiunea descărcării. Pentru a clona fără traduceri, folosește sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,40 +51,40 @@ Urmează acești pași pentru a începe să folosești aceste resurse:
> Acest lucru îți oferă tot ce ai nevoie pentru a finaliza cursul cu o descărcare mult mai rapidă.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Dacă dorești să ai suport pentru limbi suplimentare 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 suportate alte limbi pentru traduceri, 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)
[](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 metode de a obține un voucher gratuit pentru certificare. Aceasta este pagina pe care dorești să o adaugi la favorite și să o verifici din când în când deoarece 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 modalități de a obține un voucher gratuit pentru certificat. Aceasta este pagina pe care vrei să o salvezi la favorite și să o verifici din când în când deoarece conținutul este actualizat lunar.
### 📣 Anunț - Provocări noi de tip GitHub Copilot Agent de completat!
### 📣 Anunț - Noi provocări GitHub Copilot Agent de completat!
Provocare nouă adăugată, caută "GitHub Copilot Agent Challenge 🚀" în majoritatea capitolelor. Aceasta este o provocare nouă pentru tine de completat folosind GitHub Copilot și modul Agent. Dacă nu ai folosit înainte modul Agent, acesta poate nu doar să genereze text, dar și să creeze și să editeze fișiere, să ruleze comenzi și altele.
Provocare nouă adăugată, caută "GitHub Copilot Agent Challenge 🚀" în cele mai multe capitole. Este o provocare nouă pentru tine de finalizat folosind GitHub Copilot și modul Agent. Dacă nu ai folosit modul Agent înainte, acesta nu doar generează text, ci poate crea și edita fișiere, rula comenzi și multe altele.
### 📣 Anunț - _Proiect Nou de construit folosind AI Generativ_
### 📣 Anunț - _Proiect nou de construit folosind Generative AI_
Un nou proiect AI Assistant tocmai a fost adăugat, verifică-l [proiect](./9-chat-project/README.md)
Proiect nou pentru Asistent AI tocmai adăugat, verifică [proiectul](./9-chat-project/README.md)
### 📣 Anunț - _Curriculum Nou_ despre AI Generativ pentru JavaScript a fost lansat
### 📣 Anunț - _Curriculum nou_ despre Generative AI pentru JavaScript a fost lansat recent
Nu rata noul nostru curriculum de AI Generativ!
Nu rata noul nostru curriculum Generative AI!
Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe!
> **Profesori**, am inclus [câteva sugestii](for-teachers.md) despre cum să folosiți acest curriculum. Ne-ar plăcea să primim feedback [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Profesori**, am inclus [unele sugestii](for-teachers.md) despre cum să folosiți acest curriculum. Ne-ar plăcea să primim feedback-ul vostru [în forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Elevi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pentru fiecare lecție, începeți cu un quiz înainte de lecție și continuați citind materialul lecției, completând diversele activități și verificați-vă înțelegerea cu un quiz după lecție.
**[Elevi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pentru fiecare lecție, începeți cu un chestionar pre-lectură și continuați cu lectura materialului, realizarea activităților și verificarea înțelegerii cu chestionarul post-lectură.
Pentru a î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ă pentru a răspunde întrebărilor voastre.
Pentru a vă îmbunătăți experiența de învățare, conectați-vă cu colegii pentru a lucra împreună la proiecte! Discuțiile sunt încurajate în [forumul nostru de discuții](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), unde echipa noastră de moderatori vă va răspunde la întrebări.
Pentru a vă continua educația, 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.
Pentru a vă extinde educația, recomandăm cu tărie explorarea [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pentru materiale suplimentare de studiu.
### 📋 Configurarea mediului tău
Acest curriculum are un mediu de dezvoltare gata de utilizare! Pe măsură ce începi, poți alege să rulezi curriculum-ul într-un [Codespace](https://github.com/features/codespaces/) (_un mediu bazat pe browser, fără instalări necesare_), sau local pe calculatorul tău folosind un editor de text precum [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Acest curriculum vine cu un mediu de dezvoltare gata de folosit! Pe măsură ce începi, poți alege să rulezi curriculum-ul într-un [Codespace](https://github.com/features/codespaces/) (_un mediu bazat pe browser, fără necesitatea instalărilor_), 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).
#### Creează-ți propriul repo
Pentru a-ți salva ușor lucrările, este recomandat să-ți creezi o copie proprie a acestui repo. Poți face asta apăsând butonul **Use this template** din partea de sus a paginii. Acest lucru va crea un nou repo în contul tău de GitHub cu o copie a curriculum-ului.
#### Creează-ți repository-ul
Pentru a-ți salva ușor munca, se recomandă să-ți creezi propria copie a acestui depozit. Poți face acest lucru făcând click pe butonul **Use this template** din partea de sus a paginii. Aceasta va crea un repository nou în contul tău de GitHub cu o copie a curriculum-ului.
Urmează acești pași:
1. **Fă Fork la Repozitoriu**: Apasă butonul "Fork" din colțul dreapta sus al acestei pagini.
În copia ta a acestui repo pe care ai creat-o, apasă butonul **Code** și selectează **Open with Codespaces**. Acest lucru va crea un nou Codespace pentru tine în care să lucrezi.
În copia ta a acestui repository pe care ai creat-o, apasă pe butonul **Code** și selectează **Open with Codespaces**. Aceasta va crea un nou Codespace unde să lucrezi.
#### Rularea curriculum-ului local pe calculatorul tău
Pentru a rula acest curriculum local pe calculatorul tău, vei avea nevoie de un editor de text, un browser și un instrument de linie de comandă. Prima noastră lecție, [Introducere în limbajele de programare și uneltele uzuale](../../1-getting-started-lessons/1-intro-to-programming-languages), te va ghida prin diverse opțiuni pentru fiecare din aceste instrumente pentru a alege ce funcționează cel mai bine pentru tine.
Pentru a rula acest curriculum local, ai 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 uneltele din domeniu](../../1-getting-started-lessons/1-intro-to-programming-languages), îți va prezenta diverse opțiuni pentru fiecare dintre aceste unelte astfel încât să le poți alege pe cele care ți se potrivesc cel mai bine.
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) integrat. Poți descărca Visual Studio Code [aici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clonează-ți depozitul pe calculatorul tău. Poți face acest lucru dând click pe butonul **Code** și copiind URL-ul:
1. Clonează-ți depozitul pe calculatorul tău. Poți face acest lucru făcând clic pe butonul **Code** și copiind URL-ul:
[CodeSpace](./images/createcodespace.png)
Apoi, deschide [Terminalul](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 rulează 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 rulează următoarea comandă, î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 dând click 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 **File** > **Open 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 Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pentru previzualizarea paginilor HTML direct î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ă
- video suplimentar opțional
- notițe grafice opționale
- videoclip suplimentar opțional
- quiz de încălzire înainte de lecție
- lecție scrisă
- pentru lecțiile bazate pe proiecte, ghiduri pas cu pas pentru construirea proiectului
- pentru lecțiile bazate pe proiecte, ghiduri pas cu pas pentru a construi proiectul
> **O notă despre quiz-uri**: Toate quiz-urile sunt conținute în folderul Quiz-app, 48 de quiz-uri în total, fiecare cu câte trei întrebări. Sunt disponibile [aici](https://ff-quizzes.netlify.app/web/) aplicația de quiz poate fi rulată local sau implementată pe Azure; urmează instrucțiunile din folderul `quiz-app`.
> **O notă despre quiz-uri**: Toate quiz-urile se află în folderul Quiz-app, 48 de quiz-uri în total, fiecare cu câte trei întrebări. Sunt disponibile [aici](https://ff-quizzes.netlify.app/web/). Aplicația 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 | Getting Started | Introducere în Programare și Unelte Utilizate | Învață bazele comune celor mai multe limbaje de programare și despre software-ul ce ajută dezvoltatorii profesioniști să lucreze | [Intro la Limbaje de Programare și Unelte Utilizate](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Bazele GitHub, inclusiv lucrul în echipă | Cum să folosești GitHub în proiectul tău, cum să colaborezi cu alții pe un cod sursă | [Intro la GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accesibilitate | Învață bazele accesibilității web | [Fundamentele Accesibilității](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Tipuri de Date în JavaScript | Bazele tipurilor de date în JavaScript | [Tipuri de Date](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funcții și Metode | Învață despre funcții și metode pentru gestionarea fluxului logic al aplicației | [Funcții și Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine și Christopher |
| 06 | JS Basics | 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 | JS Basics | Arrays și Buclă | Lucrează cu date folosind array-uri și bucle în JavaScript | [Arrays ș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 terariu online, concentrându-te pe crearea unei structuri | [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 pentru a stiliza terariul online, concentrându-te pe bazele CSS și pe 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, manipularea DOM | Construiește JavaScript pentru a face ca terariul să funcționeze cu interfață drag/drop, concentrându-te pe închideri și manipularea DOM | [Închideri JavaScript, manipularea DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construiește un joc de tastare | Învață cum să folosești evenimentele de la tastatură pentru a conduce logica aplicației tale JavaScript | [Programare condusă de evenimente](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Lucrează cu browsere | Învață cum funcționează browserele, istoria lor și cum să scaffoldezi primele elemente ale unei extensii de browser | [Despre browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Construirea unui formular, apelarea unui API și stocarea variabilelor | Construiește elementele JavaScript ale extensiei tale 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) | Procesele de fundal ale browserului, performanța web | Folosește procesele de fundal ale browserului pentru a gestiona iconița extensiei; învață despre performanța web și optimizări | [Sarcini de fundal și performanță](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Dezvoltare mai avansată de jocuri cu JavaScript | Învață despre Moștenire folosind atât Clase cât și Compoziție și tiparul Pub/Sub, pregătindu-te 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) | 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) | Mutarea elementelor pe ecran | Descoperă cum elementele pot căpăta 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ă elementele să se ciocnească și să reacționeze folosind apăsări de tastă și adaugă o funcție de cooldown 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 final](./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 website multipaginar 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 | Învață cum să construiești formulare și să gestionezi rutinele de validare | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode de preluare și utilizare a datelor | Cum circulă datele în și din aplicația ta, cum să le 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 reține 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ă îți construiești propriul asistent AI | [Proiect asistent AI](./9-chat-project/README.md) | Chris |
| | Numele Proiectului | Concepte Predate | Obiective de Învățare | Lecția Asociată | Autor |
| 01 | Începutul | Introducere în Programare și Unelte de Lucru | Învață bazele fundamentale ale majorității limbajelor de programare și despre software-ul care ajută dezvoltatorii profesioniști să-și facă treaba | [Intro în limbaje de programare și unelte](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Începutul | Bazele GitHub, inclusiv colaborarea într-o echipă | Cum să folosești GitHub în proiectul tău, cum să colaborezi cu alții pe un cod | [Intro în GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Începutul | Accesibilitate | Învață elementele de bază ale accesibilității web | [Fundamente ale accesibilității](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bazele JS | Tipuri de date în JavaScript | Bazele tipurilor de date în JavaScript | [Tipuri de date](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Bazele JS | Funcții și metode | Învață despre funcții și metode pentru a gestiona fluxul logic al unei aplicații | [Funcții și metode](./2-js-basics/2-functions-methods/README.md) | Jasmine și Christopher |
| 06 | Bazele JS | Luarea deciziilor în JavaScript | 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 bucle | 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 crearea unui 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 a stiliza terrariul 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 JavaScript-ul pentru a face terrariul să funcționeze ca o interfață drag/drop, concentrându-te pe închideri și manipulare 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) | Construirea unui joc de tastare | Învață cum să folosești evenimente de tastatură pentru a conduce 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ă schițezi primele elemente ale unei extensii de browser | [Despre browsere](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Construirea unui formular, apelarea unui API și stocarea variabilelor în stocarea locală | Construiește elementele JavaScript ale extensiei de browser 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) | Procese de fundal în browser, performanța web | Folosește procesele din background ale browserului pentru a gestiona iconița 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 mai avansată de jocuri cu JavaScript | Învață despre moștenire folosind atât clase cât și compoziție și modelul Pub/Sub, pregătindu-te pentru construirea unui joc | [Introducere în dezvoltarea avansată de jocuri](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Desenarea pe canvas | Învață despre API-ul Canvas, folosit pentru a desena elemente pe ecran | [Desenarea pe Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Mutarea elementelor pe ecran | Descoperă cum elementele pot căpăta mișcare folosind coordonate 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ă elementele să se ciocnească și să reacționeze între ele folosind apăsări de taste și oferă o funcție cooldown 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 statusul ș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 resurselor ș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 arhitectura unei pagini web cu mai multe pagini folosind rutare și șabloane HTML | [Șabloane HTML și rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Construirea unui formular de autentificare | Învață despre construire de formulare și gestionarea validărilor | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode de preluare și utilizare a datelor | Cum circulă datele în și din aplicația ta, cum să le preiei, 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 reține aplicația ta starea și cum să o gestionezi programatic | [Managementul 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 | [Folosirea editorului 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ă-ți construiești propriul asistent AI | [Proiect asistent AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogie
Curriculumul nostru este conceput având în vedere două principii pedagogice cheie:
* învățarea bazată pe proiecte
Curriculumul nostru este conceput cu două principii pedagogice cheie în minte:
* învățare bazată pe proiecte
* quiz-uri frecvente
Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai noi unelte și tehnici folosite de dezvoltatorii web de astăzi. Studenții vor avea oportunitatea să acumuleze experiență practică construind un joc de tastare, un terariu virtual, o extensie de browser ecologică, un joc stil Space Invaders și o aplicație bancară pentru afaceri. La finalul seriei, studenții vor avea o înțelegere solidă a dezvoltării web.
Programul predă fundamentele JavaScript, HTML și CSS, precum și cele mai noi unelte și tehnici folosite de dezvoltatorii web din prezent. Studenții vor avea oportunitatea să dezvolte experiență practică construind un joc de tastare, un terrariu virtual, o extensie de browser eco-friendly, un joc în stil space-invader și o aplicație bancară pentru afaceri. La finalul seriei, studenții vor fi dobândit o înțelegere solidă a dezvoltării web.
> 🎓 Poți parcurge primele lecții din acest curriculum ca un [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) pe Microsoft Learn!
Asigurând că conținutul este aliniat cu proiectele, procesul devine mai captivant pentru studenți și retenția conceptelor este crescută. Am scris, de asemenea, câteva lecții introductive în bazele JavaScript, însoțite de un video din colecția de tutoriale video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ale cărei autorii au contribuit la acest curriculum.
Prin asigurarea alinierii conținutului cu proiectele, procesul devine mai captivant pentru studenți și retenția conceptelor va fi îmbunătățită. De asemenea, am scris mai multe lecții introductive în bazele JavaScript pentru a introduce conceptele, împreună cu un videoclip din colecția de tutoriale video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", a căror autori au contribuit la acest curriculum.
În plus, un quiz cu miză redusă înainte de o clasă setează intenția studentului spre învățare a unui subiect, în timp ce un al doilea quiz după clasă asigură o retenție suplimentară. Acest curriculum a fost conceput 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 sfârșitul ciclului de 12 săptămâni.
În plus, un quiz cu miză redusă înaintea unei clase stabilește intenția studentului pentru învățarea unui subiect, în timp ce un al doilea quiz după clasă asigură o retenție suplimentară. Acest curriculum a fost conceput să fie flexibil și distractiv, putând 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 în mod intenționat introducerea framework-urilor JavaScript pentru a ne concentra pe abilitățile de bază necesare ca dezvoltator web înainte de a adopta un framework, un pas bun următor după finalizarea acestui curriculum ar fi să înveți despre Node.js printr-o altă colecție de videoclipuri: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Deși am evitat intenționat introducerea framework-urilor JavaScript pentru a ne concentra pe abilitățile de bază necesare ca dezvoltator web înainte de a adopta un framework, un pas bun următor după finalizarea acestui curriculum ar fi să înveți despre Node.js printr-o altă colecție de videoclipuri: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Vizitează regulile noastre din [Codul de conduită](CODE_OF_CONDUCT.md) și [Contribuții](CONTRIBUTING.md). Așteptăm cu interes feedback-ul tău constructiv!
> Vizitează [Codul nostru de Conduită](CODE_OF_CONDUCT.md) și ghidul [Contribuie](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/#/). Fă fork la acest repo, [instalează Docsify](https://docsify.js.org/#/quickstart) pe mașina ta locală și apoi în folderul rădăcină al repo-ului tastează `docsify serve`. Site-ul va fi servit la portul 3000 pe localhost-ul tău: `localhost:3000`.
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 mașina ta locală, apoi în folderul rădăcină al acestui repo, tastează `docsify serve`. Site-ul va fi servit pe portul 3000 la 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
## 🎒 Alte Cursuri
Echipa noastră produce și alte cursuri! Verifică:
@ -225,7 +225,7 @@ Echipa noastră produce și alte cursuri! Verifică:
[](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)
@ -233,7 +233,7 @@ Echipa noastră produce și alte cursuri! Verifică:
---
### Seria Generative AI
### Seria Inteligență Artificială 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)
@ -241,7 +241,7 @@ Echipa noastră produce și alte cursuri! Verifică:
---
### Învățare de bază
### Î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)
@ -258,23 +258,23 @@ Echipa noastră produce și alte cursuri! Verifică:
Dacă întâmpini dificultăți 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 de suport unde întrebările sunt binevenite și cunoștințele sunt împărtășite liber.
Dacă te blochezi 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.
Acest depozit este licențiat sub licența MIT. Consultă fișierul [LICENSE](../../LICENSE) pentru mai multe informații.
Acest depozit este licențiat sub licența MIT. Vezi fișierul [LICENSE](../../LICENSE) pentru mai multe informații.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Declinare de responsabilitate**:
Acest document a fost tradus utilizând serviciul de traducere automată 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ă o traducere profesională realizată de un traducător uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot rezulta din utilizarea acestei traduceri.
**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 autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru orice neînțelegeri sau interpretări greșite rezultând din utilizarea acestei traduceri.
Toto je repozitár vzdelávacieho učebného plánu na výučbu základov webového vývoja pre začiatočníkov. Učebný plán je komplexný 12-týždňový kurz vyvinutý Microsoft Cloud Advocates, ktorý obsahuje 24 praktických lekcií pokrývajúcich JavaScript, CSS a HTML.
Toto je vzdelávacie úložisko učebného plánu na výučbu základov webového vývoja pre začiatočníkov. Učebný plán je komplexný 12-týždňový kurz vyvinutý Microsoft Cloud Advocates, obsahujúci 24 praktických lekcií pokrývajúcich JavaScript, CSS a HTML.
### Kľúčové súčasti
### Kľúčové komponenty
- **Educational Content**: 24 štruktúrovaných lekcií organizovaných do modulov založených na projektoch
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
- **Interactive Quizzes**: 48 kvízov po 3 otázky (hodnotenia pred/po lekcii)
- **Multi-language Support**: Automatické preklady do 50+ jazykov cez GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) odporúčaný pre študentov
- Ďalšie kurzy: Generative AI, Data Science, ML, IoT učebné osnovy sú dostupné
- Ďalšie kurzy: Generatívna AI, Data Science, ML, IoT učebné plány dostupné
### Práca s konkrétnymi projektmi
Pre podrobné inštrukcie k jednotlivým projektom sa odkazujte na README súbory v:
Pre podrobné inštrukcie ku jednotlivým projektom nájdete README súbory v:
- `quiz-app/README.md` - Vue 3 kvízová aplikácia
- `7-bank-project/README.md` - Banková aplikácia s autentifikáciou
- `5-browser-extension/README.md` - Vývoj rozšírenia prehliadača
- `6-space-game/README.md` - Vývoj hry založenej na Canvas
- `9-chat-project/README.md` - Projekt AI chat asistenta
- `6-space-game/README.md` - Vývoj hry s canvasom
- `9-chat-project/README.md` - AI chat asistent projekt
### Štruktúra monorepa
Aj keď nejde o tradičné monorepo, tento repozitár obsahuje viacero nezávislých projektov:
Aj keď nejde o tradičné monorepo, toto úložisko obsahuje viacero nezávislých projektov:
- Každá lekcia je samostatná
- Projekty nezdieľajú závislosti
- Pracujte na jednotlivých projektoch bez ovplyvnenia ostatných
- Naklonujte celý repozitár pre kompletnú skúsenosť s učebným plánom
- Naklonujte celé repozitórium pre kompletný zážitok kurzu
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vylúčenie zodpovednosti**:
Tento dokument bol preložený pomocou služby prekladu založenej na umelej inteligencii [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by sa mal považovať za záväzný zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.
**Zrieknutie sa zodpovednosti**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, prosím majte na pamäti, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho natívnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
Naučte sa základy vývoja webu s naším 12-týždňovým komplexným kurzom od Microsoft Cloud Advocates. Každá z 24 lekcií sa zameriava na JavaScript, CSS a HTML prostredníctvom praktických projektov ako teráriá, rozšírenia pre prehliadače a vesmírne hry. Zapojte sa do kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte uchovávanie vedomostí pomocou našej efektívnej projektovo orientovanej pedagogiky. Začnite svoju cestu programovania ešte dnes!
Naučte sa základy webového vývoja v rámci nášho 12-týždňového komplexného kurzu od Microsoft Cloud Advocates. Každá z 24 lekcií skúma JavaScript, CSS a HTML prostredníctvom praktických projektov ako teráriá, rozšírenia pre prehliadače a vesmírne hry. Zúčastnite sa kvízov, diskusií a praktických úloh. Zlepšite svoje zručnosti a optimalizujte si udržanie vedomostí s našou efektívnou projektovo orientovanou pedagogikou. Začnite svoju programátorskú cestu ešte dnes!
Pripojte sa ku komunite Azure AI Foundry na Discorde
Pridajte sa do komunity Azure AI Foundry Discord
Nasledujte tieto kroky, aby ste začali používať tieto zdroje:
1. **Forknite si repozitár**: Kliknite na [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
3. [**Pridajte sa do Azure AI Foundry Discord a spoznajte odborníkov a ostatných vývojárov**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Podpora viacerých jazykov
#### Podporované cez GitHub Action (automatizované a vždy aktuálne)
> **Preferujete klonovanie lokálne?**
> **Radšej klonovať lokálne?**
>
> Tento repozitár obsahuje viac ako 50 jazykových prekladov, čo výrazne zväčšuje veľkosť sťahovania. Ak chcete klonovať bez prekladov, použite sparse checkout:
> Toto úložisko obsahuje viac ako 50 jazykových prekladov, ktoré výrazne zväčšujú veľkosť sťahovania. Pre klonovanie bez prekladov použite sparse checkout:
>
> **Bash / macOS / Linux:**
> > ```bash
@ -31,158 +31,162 @@ Nasledujte tieto kroky, aby ste začali používať tieto zdroje:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
>
> Toto vám poskytne všetko potrebné na dokončenie kurzu s oveľa rýchlejším sťahovaním.
> Táto možnosť vám umožní získať všetko potrebné na dokončenie kurzu s oveľa rýchlejším sťahovaním.
**Ak chcete podporu ďalších jazykov prekladov, nájdete ich zoznam [tu](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ak chcete pridať ďalšie prekladové jazyky, podporované jazyky nájdete [tu](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _Ste študent?_
Navštívte [**študentskú stránku Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde nájdete zdroje pre začiatočníkov, študentské balíčky a dokonca spôsoby, ako získať bezplatný certifikátový poukaz. Toto je stránka, ktorú si chcete uložiť medzi záložky a čas od času ju skontrolovať, pretože obsah sa mení každý mesiac.
Navštívte [**Student Hub stránku**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), kde nájdete zdroje pre začiatočníkov, balíčky pre študentov a dokonca možnosti získať bezplatný certifikát. Túto stránku si uložíte do záložiek a občas skontrolujte, pretože každý mesiac meníme obsah.
### 📣 Oznámenie - Nové výzvy režimu GitHub Copilot Agent na dokončenie!
### 📣 Oznámenie - Nové výzvy GitHub Copilot Agent módu na dokončenie!
Pridaná nová výzva, nájdite "GitHub Copilot Agent Challenge 🚀" v väčšine kapitol. Je to nová výzva pre vás na dokončenie pomocou GitHub Copilot a režimu Agent. Ak ste režim Agent ešte nepoužili, dokáže nielen generovať text, ale aj tvoriť a upravovať súbory, spúšťať príkazy a ďalšie.
Pridaná nová výzva, nájdete ju pod názvom "GitHub Copilot Agent Challenge 🚀" v niektorých kapitolách. Ide o novú výzvu, ktorú môžete splniť použitím GitHub Copilot a Agent módu. Ak ste Agent mód ešte nepoužili, vie nielen generovať text, ale aj vytvárať a upravovať súbory, spúšťať príkazy a ďalšie.
### 📣 Oznámenie - _Nový projekt postavený pomocou generatívnej AI_
### 📣 Oznámenie - _Nový projekt na vývoj pomocou generatívnej AI_
Pridaný nový projekt AI asistenta, pozrite si ho [projekt](./9-chat-project/README.md)
Práve bol pridaný nový projekt AI asistenta, pozrite si ho [projekt](./9-chat-project/README.md)
### 📣 Oznámenie - _Nový učebný plán_ na Generatívnu AI pre JavaScript práve vydaný
### 📣 Oznámenie - _Nový kurz_ o generatívnej AI pre JavaScript práve vydaný
Nezmeškajte náš nový učebný plán Generatívnej AI!
Nezmeškajte náš nový kurz o generatívnej AI!
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
- Lekcie pokrývajú všetko od základov po RAG.
- Interagujte s historickými postavami pomocou GenAI a našej sprievodnej aplikácie.
Každá lekcia obsahuje úlohu na dokončenie, test vedomostí a výzvu, ktorá vás prevedie témami ako:
- Vytváranie promptov a prompt engineering
- Generovanie textových a obrazových aplikácií
- Vyhľadávacie aplikácie
Navštívte [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) a začnite!
## 🌱 Začíname
> **Učitelia**, pridali sme [niekoľko návrhov](for-teachers.md), ako používať tento učebný plán. Budeme radi za vašu spätnú väzbu [v našom diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Učitelia**, pripravili sme [niekoľko návrhov](for-teachers.md) na používanie tohto kurikula. Budeme radi za vaše pripomienky [v našom diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Študenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ku každej lekcii začnite kvízom pred prednáškou, prečítajte si prednáškový materiál, dokončite rôzne aktivity a overte si porozumenie pomocou kvízu po prednáške.
**[Študenti](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ku každej lekcii začnite prednáškovým kvízom a pokračujte čítaním prednáškového materiálu, dokončovaním rôznych aktivít a overte si pochopenie pomocou povykaného kvízu.
Pre lepší zážitok z učenia sa spojte so svojimi rovesníkmi a pracujte na projektoch spoločne! Diskusie sú vítané v našom [diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde sú dostupní naši moderátori, ktorí vám radi zodpovedia otázky.
Pre lepší zážitok z učenia sa spojte so svojimi spolužiakmi, aby ste mohli spoločne pracovať na projektoch! Diskusie sú vítané v našom [diskusnom fóre](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), kde bude tím moderátorov pripravený odpovedať na vaše otázky.
Pre ďalšie štúdium vám vrelo odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre doplnkové študijné materiály.
Pre ďalšie vzdelávanie dôrazne odporúčame preskúmať [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pre ďalšie študijné materiály.
### 📋 Nastavenie prostredia
### 📋 Nastavenie vášho prostredia
Tento kurz má pripravené vývojové prostredie! Na začiatku si môžete vybrať spustenie kurzu v prostredí [Codespace](https://github.com/features/codespaces/) (_prostredie v prehliadači bez potreby inštalácie_), alebo lokálne na vašom počítači pomocou textového editora ako je [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tento učebný plán má pripravené vývojové prostredie! Na začiatku môžete vybrať spustenie učebného plánu v [Codespace](https://github.com/features/codespaces/) (_prostredie v prehliadači, nie je potrebná inštalácia_) alebo lokálne vo vašom počítači pomocou textového editora ako [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Vytvorte si vlastné úložisko
#### Vytvorte si vlastný repozitár
Pre jednoduché ukladanie svojej práce odporúčame vytvoriť si vlastnú kópiu tohto repozitára. Môžete to urobiť kliknutím na tlačidlo **Použiť túto šablónu** v hornej časti stránky. Toto vytvorí nový repozitár vo vašom účte GitHub s kópiou učebného plánu.
Pre jednoduché ukladanie vašej práce sa odporúča vytvoriť si vlastnú kópiu tohto úložiska. Môžete to spraviť kliknutím na tlačidlo **Použiť túto šablónu** v hornej časti stránky. Takto sa vytvorí nové úložisko vo vašom GitHub konte s kópiou kurikula.
Postupujte podľa týchto krokov:
1. **Forknite si repozitár**: Kliknite na tlačidlo „Fork“ v pravom hornom rohu tejto stránky.
Vo vašej kópii úložiska kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Týmto vytvoríte nový Codespace, v ktorom môžete pracovať.
Vo vašej vlastnej kópii repozitára, ktorú ste vytvorili, kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Tým sa pre vás vytvorí nový Codespace na prácu.
#### Spustenie učebného plánu lokálne na vašom počítači
#### Spustenie kurzu lokálne na počítači
Ak chcete spustiť učebný plán lokálne, budete potrebovať textový editor, prehliadač a nástroj príkazového riadku. Naša prvá lekcia, [Úvod do programovacích jazykov a nástrojov remesla](../../1-getting-started-lessons/1-intro-to-programming-languages), vás prevedie rôznymi možnosťami pre každý z týchto nástrojov, aby ste si vybrali, čo vám najviac vyhovuje.
Na spustenie kurzu lokálne budete potrebovať textový editor, prehliadač a nástroj príkazového riadku. Naša prvá lekcia, [Úvod do programovacích jazykov a nástrojov](../../1-getting-started-lessons/1-intro-to-programming-languages), vás prevedie rôznymi možnosťami pre tieto nástroje, aby ste si mohli vybrať, čo vám najviac vyhovuje.
Našou odporúčanou voľbou je použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý má tiež zabudovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si môžete stiahnuť [tu](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonujte si svoj repozitár do svojho počítača. Môžete to urobiť kliknutím na tlačidlo **Code** a skopírovaním URL:
Odporúčame použiť [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ako editor, ktorý obsahuje aj zabudovaný [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Visual Studio Code si môžete stiahnuť [tu](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Naklonujte si svoj repozitár do počítača. Môžete to urobiť kliknutím na tlačidlo **Code** a skopírovaním URL:
[CodeSpace](./images/createcodespace.png)
Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spustite nasledujúci príkaz, pričom `<your-repository-url>` nahraďte URL, ktorú ste práve skopírovali:
Potom otvorte [Terminál](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) v rámci [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) a spustite nasledujúci príkaz, pričom `<your-repository-url>` nahraďte URL, ktorú ste práve skopírovali:
```bash
git clone <your-repository-url>
```
2. Otvorte priečinok vo Visual Studio Code. Môžete to urobiť kliknutím na **File** > **Open Folder** a výberom práve sklonovaného priečinka.
2. Otvorte priečinok vo Visual Studio Code. Môžete to urobiť kliknutím na **File** > **Open Folder** a výberom práve naklonovaného priečinka.
> Odporúčané rozšírenia Visual Studio Code:
> Odporúčané rozšírenia pre Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - na náhľad HTML stránok priamo vo Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - na rýchlejšie písanie kódu
## 📂 Každá lekcia obsahuje:
- voliteľnú náčrtovú poznámku (sketchnote)
- voliteľnú skicovaciu poznámku
- voliteľné doplnkové video
- rozcvičujúci kvíz pred lekciou
- rozcvičku pred lekciou formou kvízu
- písanú lekciu
- pre lekcie založené na projekte, podrobné návody krok za krokom ako projekt zostrojiť
- overenia vedomostí
- pre lekcie založené na projektoch, krok za krokom návody, ako projekt vybudovať
- kontroly vedomostí
- výzvu
- doplnkové čítanie
- zadanie
- [kvíz po lekcii](https://ff-quizzes.netlify.app/web/)
> **Poznámka o kvízoch**: Všetky kvízy sú obsiahnuté v priečinku Quiz-app, celkovo 48 kvízov so zloženými z troch otázok. Sú dostupné [tu](https://ff-quizzes.netlify.app/web/) a aplikáciu kvízov môžeš spustiť lokálne alebo nasadiť do Azure; postupuj podľa pokynov v priečinku `quiz-app`.
> **Poznámka o kvízoch**: Všetky kvízy sú uložené v priečinku Quiz-app, celkovo 48 kvízov so štyrmi otázkami každý. Sú dostupné [tu](https://ff-quizzes.netlify.app/web/), kvízová aplikácia môže byť spustená lokálne alebo nasadená na Azure; postupujte podľa inštrukcií v priečinku `quiz-app`.
## 🗃️ Lekcie
| | Názov projektu | Naučené koncepty | Učebné ciele | Prepojená lekcia | Autor |
| 01 | Začíname | Úvod do programovania a nástrojov remesla | Naučiť sa základné princípy väčšiny programovacích jazykov a softvér, ktorý pomáha profesionálnym vývojárom | [Úvod do programovacích jazykov a nástrojov](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začíname | Základy GitHubu, vrátane práce v tíme | Ako používať GitHub v projekte, ako spolupracovať s ostatnými na zdrojovom kóde | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začíname | Prístupnosť | Naučiť sa základy webovej prístupnosti | [Základy prístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Dátové typy v JavaScripte | Základy dátových typov v JavaScripte | [Dátové typy](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkcie a metódy | Naučiť sa o funkciách a metódach na riadenie logiky aplikácie | [Funkcie a metódy](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Rozhodovanie s JS | Naučiť sa vytvárať podmienky v kóde pomocou rozhodovacích metód | [Rozhodovanie](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Pole a cykly | Práca s dátami pomocou polí a cyklov v JavaScripte | [Pole a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvoriť HTML pre online terrárium so zameraním na rozloženie | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvoriť CSS pre štýlovanie online terrária, so zameraním na základy CSS vrátane responzívneho dizajnu | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulácia s DOM | Vytvoriť JavaScript pre funkčný drag/drop rozhranie terrária, so zameraním na closures a manipuláciu s DOM | [JavaScript Closures, manipulácia s DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra na písanie](./4-typing-game/solution/README.md) | Vytvorenie hry na písanie | Naučiť sa používať klávesnicové udalosti pre ovládanie logiky JavaScript aplikácie | [Programovanie na základe udalostí](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Práca s prehliadačmi | Naučiť sa ako fungujú prehliadače, ich históriu a ako vytvoriť základné prvky prehliadačového rozšírenia | [O prehliadačoch](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Vytváranie formulára, volanie API a ukladanie premenných do lokálneho ukladiska | Vytvoriť JavaScript prvky rozšírenia prehliadača na volanie API pomocou premenných uložených v lokálnom ukladisku | [API, formuláre a lokálne ukladisko](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Zelené rozšírenie prehliadača](./5-browser-extension/solution/README.md) | Procesy na pozadí v prehliadači, výkon webu | Použiť procesy na pozadí pre správu ikony rozšírenia, naučiť sa o výkone webu a optimalizáciách | [Procesy na pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra v priestore](./6-space-game/solution/README.md) | Pokročilejšie vývoj hier v JavaScripte | Naučiť sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, ako prípravu na tvorbu hry | [Úvod do pokročilého vývoja hier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Hra v priestore](./6-space-game/solution/README.md) | Kreslenie na plátno | Naučiť sa o Canvas API, používanom na kreslenie prvkov na obrazovke | [Kreslenie na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra v priestore](./6-space-game/solution/README.md) | Pohybovanie prvkov po obrazovke | Zistiť, ako prvky získavajú pohyb pomocou karteziánskych súradníc a Canvas API | [Pohybovanie prvkov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra v priestore](./6-space-game/solution/README.md) | Detekcia kolízie | Vytvoriť kolízie medzi prvkami a reakcie na seba prostredníctvom stlačení klávesov a poskytnúť cooldown funkciu pre výkon hry | [Detekcia kolízie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra v priestore](./6-space-game/solution/README.md) | Sledovanie skóre | Vykonávať matematické výpočty podľa stavu a výkonu hry | [Sledovanie skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra v priestore](./6-space-game/solution/README.md) | Končenie a reštart hry | Naučiť sa o ukončení a reštartovaní hry, vrátane čistenia zdrojov a resetovania premenných | [Podmienka ukončenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banková aplikácia](./7-bank-project/solution/README.md) | Šablóny HTML a routovanie v webovej aplikácii | Naučiť sa vytvoriť rozvrhnutie viacstránkového webu pomocou routovania a HTML šablón | [HTML Šablóny a routovanie](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banková aplikácia](./7-bank-project/solution/README.md) | Vytvorenie prihlasovacieho a registračného formulára | Naučiť sa o tvorbe formulárov a spracovaní validácie | [Formuláre](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banková aplikácia](./7-bank-project/solution/README.md) | Spôsoby získavania a používania dát | Ako do aplikácie prenikajú dáta, ako ich načítať, uložiť a odstrániť | [Dáta](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banková aplikácia](./7-bank-project/solution/README.md) | Koncepty riadenia stavu | Naučiť sa, ako aplikácia uchováva stav a ako ho programovo riadiť | [Riadenie stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kód editor/Brower/VScode](../../8-code-editor) | Práca s VScode | Naučiť sa používať editor kódu | [Použitie editora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práca s AI | Naučiť sa vytvoriť vlastného AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
| | Názov projektu | Konzepte vyučované | Ciele učenia | Prepojená lekcia | Autor |
| 01 | Začínáme | Úvod do programovania a nástroje remesla | Naučte sa základné princípy väčšiny programovacích jazykov a o softvéri, ktorý pomáha profesionálnym vývojárom pri práci | [Úvod do programovacích jazykov a nástrojov](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Začínáme | Základy GitHubu, vrátane práce v tíme | Ako používať GitHub vo svojom projekte, ako spolupracovať s inými na kóde | [Úvod do GitHubu](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Začínáme | Prístupnosť | Naučte sa základy prístupnosti webu | [Základy prístupnosti](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Základy JS | Typy dát v JavaScript | Základy typov dát v JavaScript | [Typy dát](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Základy JS | Funkcie a metódy | Naučte sa o funkciách a metódach na riadenie logiky aplikácie | [Funkcie a metódy](./2-js-basics/2-functions-methods/README.md) | Jasmine a Christopher |
| 06 | Základy JS | Tvorba rozhodnutí v JS | Naučte sa vytvárať podmienky vo svojom kóde pomocou rozhodovacích metód | [Tvorba rozhodnutí](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Základy JS | Polia a cykly | Práca s dátami pomocou polí a cyklov v JavaScript | [Polia a cykly](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrárium](./3-terrarium/solution/README.md) | HTML v praxi | Vytvorte HTML pre online terrárium, zamerajte sa na tvorbu rozloženia | [Úvod do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrárium](./3-terrarium/solution/README.md) | CSS v praxi | Vytvorte CSS pre štýlovanie online terrária, naučte sa základy CSS vrátane responzívneho návrhu stránky | [Úvod do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrárium](./3-terrarium/solution/README.md) | Uzávierky JavaScriptu, manipulácia s DOMom | Vytvorte JavaScript, ktorý umožní terráriu fungovať ako drag/drop rozhranie, zamerajte sa na uzávierky a manipuláciu s DOMom | [Uzávierky JavaScriptu, manipulácia s DOMom](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Hra na písanie](./4-typing-game/solution/README.md) | Vytvorte hru na písanie | Naučte sa používať udalosti klávesnice na riadenie logiky vašej JavaScriptovej aplikácie | [Programovanie založené na udalostiach](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Rozšírenie pre prehliadač Green](./5-browser-extension/solution/README.md) | Práca s prehliadačmi | Naučte sa, ako fungujú prehliadače, ich históriu a ako vytvoriť základné prvky rozšírenia prehliadača | [O prehliadačoch](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Rozšírenie pre prehliadač Green](./5-browser-extension/solution/README.md) | Vytvorenie formulára, volanie API a uchovávanie premenných v lokálnom úložisku | Vytvorte JavaScriptové prvky rozšírenia prehliadača na volanie API pomocou premenných uložených v lokálnom úložisku | [API, formuláre a lokálne úložisko](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Rozšírenie pre prehliadač Green](./5-browser-extension/solution/README.md) | Systémové procesy na pozadí v prehliadači, výkon webu | Použite systémové procesy prehliadača na správu ikony rozšírenia; učte sa o výkone webu a niektorých optimalizáciách | [Úlohy na pozadí a výkon](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Hra v priestore](./6-space-game/solution/README.md) | Pokročilý vývoj hier v JavaScripte | Naučte sa o dedičnosti pomocou tried a kompozície a o vzore Pub/Sub, ako prípravu na tvorbu hry | [Úvod k pokročilému vývoju hier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Hra v priestore](./6-space-game/solution/README.md) | Kreslenie na plátno | Naučte sa o Canvas API používanom na kreslenie prvkov na obrazovku | [Kreslenie na plátno](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Hra v priestore](./6-space-game/solution/README.md) | Pohyb prvkov po obrazovke | Objavte, ako môžu prvky získať pohyb pomocou kartézskych súradníc a Canvas API | [Pohyb prvkov](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Hra v priestore](./6-space-game/solution/README.md) | Detekcia kolízií | Urobte, aby sa prvky zrážali a reagovali na seba pomocou stlačenia kláves a zabezpečte funkciu cooldown pre výkon hry | [Detekcia kolízií](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Hra v priestore](./6-space-game/solution/README.md) | Uchovávanie skóre | Vykonávajte matematické výpočty na základe stavu a výkonu hry | [Uchovávanie skóre](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Hra v priestore](./6-space-game/solution/README.md) | Ukončenie a reštart hry | Naučte sa o ukončení a reštarte hry vrátane čistenia zdrojov a resetovania premenných | [Podmienka ukončenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banková aplikácia](./7-bank-project/solution/README.md) | HTML šablóny a routovanie vo webovej aplikácii | Naučte sa vytvoriť kostru viacstránkovej webovej architektúry pomocou routovania a HTML šablón | [HTML šablóny a routovanie](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banková aplikácia](./7-bank-project/solution/README.md) | Vytvorenie prihlasovacieho a registračného formulára | Naučte sa vytvárať formuláre a spracovávať validačné rutiny | [Formuláre](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banková aplikácia](./7-bank-project/solution/README.md) | Spôsoby získavania a používania dát | Ako dáta prúdia dovnútra a von z vašej aplikácie, ako ich získavať, ukladať a likvidovať | [Dáta](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banková aplikácia](./7-bank-project/solution/README.md) | Koncepty správy stavu | Naučte sa, ako si vaša aplikácia udržiava stav a ako ho programovo spravovať | [Správa stavu](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Prehliadač/VScode Kód](../../8-code-editor) | Práca s VScode | Naučte sa používať kódový editor| [Použitie VScode kódového editora](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI asistenti](./9-chat-project/README.md) | Práca s AI | Naučte sa vytvoriť vlastného AI asistenta | [Projekt AI asistenta](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Naše učebné osnovy sú navrhnuté s dvoma kľúčovými pedagogickými princípmi na pamäti:
Naše učebné osnovy sú navrhnuté so dvoma kľúčovými pedagogickými princípmi:
* učenie založené na projektoch
* časté kvízy
Program vyučuje základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky používané dnešnými webovými vývojármi. Študenti budú mať príležitosť získať praktické skúsenosti vytvorením hry na písanie, virtuálneho terária, ekologicky šetrného rozšírenia prehliadača, hry v štýle Space Invader a bankovej aplikácie pre firmy. Na konci série študenti získajú pevné základy webového vývoja.
Program učí základy JavaScriptu, HTML a CSS, ako aj najnovšie nástroje a techniky, ktoré používajú dnešní weboví vývojári. Študenti budú mať príležitosť získať praktické skúsenosti tým, že vyvinú hru na písanie, virtuálne terárium, ekologické rozšírenie prehliadača, hru v štýle vesmírneho dobyvateľa a bankovú aplikáciu pre podniky. Na konci série budú mať pevné pochopenie webového vývoja.
> 🎓 Môžete absolvovať prvých niekoľko lekcií z tohto učebného plánu ako [Cestu učenia](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Prvé lekcie tohto kurzu môžete absolvovať ako [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Zabezpečením souladu obsahu s projektmi je proces pre študentov atraktívnejší a dochádza k lepšiemu zapamätaniu si konceptov. Napísali sme takisto niekoľko úvodných lekcií k základom JavaScriptu na predstavenie konceptov, sprevádzané videom zo série "[Séria pre začiatočníkov: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ktorej niektorí autori prispeli aj k týmto osnovám.
Zabezpečením zladenia obsahu s projektmi je proces pre študentov pútavejší a uchovávanie konceptov sa zlepší. Tiež sme napísali niekoľko úvodných lekcií v základoch JavaScriptu, ktoré predstavujú koncepty, sprevádzané videom zo série "[Začiatočnícka séria: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ktorého niektorí autori prispeli do týchto osnov.
Okrem toho nízko náročný kvíz pred hodinou nastaví študentovi cieľ učiť sa danú tému, zatiaľ čo druhý kvíz po hodine zabezpečí ďalšie upevnenie vedomostí. Tento učebný plán je navrhnutý tak, aby bol flexibilný a zábavný a dá sa absolvovať celý alebo jeho časť. Projekty začínajú jednoducho a postupne sa počas 12-týždňového cyklu komplikujú.
Okrem toho nízko náročný kvíz pred triedou nastavuje študentovi zámer učiť sa danú tému, zatiaľ čo druhý kvíz po hodine zabezpečuje ďalšie uchovanie vedomostí. Tento kurz bol navrhnutý tak, aby bol flexibilný a zábavný a môže byť absolvovaný celý alebo čiastočne. Projekty začínajú jednoducho a do 12-týždňového cyklu sú čoraz zložitejšie.
Hoci sme zámerne vynechali zavedenie JavaScript frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred osvojením si frameworku, ďalším dobrým krokom po dokončení týchto osnov je naučiť sa Node.js prostredníctvom inej video série: "[Séria pre začiatočníkov: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Zatiaľ čo sme zámerne vynechali zavedenie JavaScriptových frameworkov, aby sme sa sústredili na základné zručnosti potrebné ako webový vývojár pred prijatím frameworku, dobrým ďalším krokom po dokončení tohto kurzu by bolo naučiť sa Node.js prostredníctvom inej kolekcie videí: "[Začiatočnícka séria: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Navštívte naše pravidlá [Code of Conduct](CODE_OF_CONDUCT.md) a [Contributing](CONTRIBUTING.md). Radi privítame vaše konštruktívne pripomienky!
> Navštívte naše pravidlá správania [Code of Conduct](CODE_OF_CONDUCT.md) a zásady prispievania [Contributing](CONTRIBUTING.md). Vitajte vašu konštruktívnu spätnú väzbu!
## 🧭 Offline prístup
## 🧭 Prístup offline
Túto dokumentáciu môžete spustiť offline pomocou [Docsify](https://docsify.js.org/#/). Zforknite si tento repozitár, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na svojom miestnom počítači a potom v koreňovom priečinku tohto repozitára zadajte príkaz `docsify serve`. Web stránka bude dostupná na porte 3000 na vašom localhost: `localhost:3000`.
Môžete spustiť túto dokumentáciu offline pomocou [Docsify](https://docsify.js.org/#/). Forknite tento repozitár, [nainštalujte Docsify](https://docsify.js.org/#/quickstart) na svojom lokálnom počítači a potom v koreňovom priečinku tohto repozitára zadajte `docsify serve`. Webová stránka bude dostupná na porte 3000 na vašom localhoste: `localhost:3000`.
## 📘 PDF
PDF so všetkými lekciami nájdete [tu](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -190,65 +194,65 @@ PDF so všetkými lekciami nájdete [tu](https://microsoft.github.io/Web-Dev-For
## 🎒 Iné kurzy
Náš tím vytvára aj ďalšie kurzy! Pozrite sa:
Náš tím produkuje aj iné kurzy! Pozrite si:
<!-- 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)
[](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 / Agenti
[](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)
---
### Séria Generatívnej 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)
### Generatívna AI séria
[](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)
---
### Základné vzdelávanie
[](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)
### Základné učenie
[](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)
---
### Séria 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)
Ak máte problém alebo otázky týkajúce sa tvorby AI aplikácií, pripojte sa k ostatným študentom a skúseným vývojárom v diskusiách o MCP. Je to podporná komunita, kde sú otázky vítané a zdieľanie znalostí je bezplatné.
Ak sa zaseknete alebo máte otázky ohľadom budovania AI aplikácií. Pridajte sa k ostatným študentom a skúseným vývojárom v diskusiách o MCP. Je to podporná komunita, kde sú otázky vítané a vedomosti sa slobodne zdieľajú.
Tento repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore [LICENSE](../../LICENSE).
Táto repozitár je licencovaný pod licenciou MIT. Viac informácií nájdete v súbore [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Upozornenie**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, uvedomte si, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.
**Zrieknutie sa zodpovednosti**:
Tento dokument bol preložený pomocou AI prekladateľskej služby [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, berte prosím na vedomie, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.
localizeflow[bot]
6 days ago