Това еучебно хранилище с учебна програма за преподаване на основите на уеб разработката на начинаещи. Учебната програма е обширен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практически урока, обхващащи JavaScript, CSS и HTML.
Това еобразователно хранилище за учебна програма за обучение на начинаещи в основите на уеб разработката. Учебната програма е всеобхватен 12-седмичен курс, разработен от Microsoft Cloud Advocates, включващ 24 практически урока, обхващащи JavaScript, CSS и HTML.
### Основни компоненти
### Ключови компоненти
- **Образователно съдържание**: 24 структурирани урока, организирани в модули, базирани на проекти
- **Практически проекти**: Терариум, Игра за писане, Разширение за браузър, Космическа игра, Банково приложение, Редактор на код и AI чат асистент
- **Интерактивни тестове**: 48 теста с по 3 въпроса всеки (оценки преди/след урок)
- **Поддръжка на множество езици**: Автоматични преводи за над 50 езика чрез GitHub Actions
- **Практически проекти**: Террариум, Игра за писане, Разширение за браузър, Космическа игра, Банково приложение, Редактор на код и AI асистент за чат
- **Интерактивни тестове**: 48 теста с по 3 въпроса всеки (оценки преди и след урок)
- **Поддръжка на множество езици**: Автоматизирани преводи за 50+ езика чрез GitHub Actions
- **Технологии**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (за AI проекти)
### Архитектура
- Образователно хранилище с структура, базирана на уроци
- Всяка папка с урок съдържа README, кодови примери и решения
- Самостоятелни проекти в отделни директории (quiz-app, различни проекти за уроци)
- Система за превод, използваща GitHub Actions (co-op-translator)
- Документация, предоставена чрез Docsify и налична като PDF
- Образователно хранилище със структура, базирана на уроци
- Всяка папка с урок съдържа README, примерен код и решения
- Самостоятелни проекти в отделни директории (quiz-app, различни проекти от уроците)
- Система за преводс използване на GitHub Actions (co-op-translator)
- Документация, предоставена чрез Docsify и достъпна в PDF формат
## Команди за настройка
@ -36,12 +36,12 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # Стартиране на сървъра за разработка
npm run dev # Стартиране на сървър за разработка
npm run build # Създаване за продукция
npm run lint # Стартиране на ESLint
```
### API на Bank проекта (Node.js + Express)
### API на банковия проект (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,15 +51,15 @@ npm run lint # Стартиране на ESLint
npm run format # Форматиране с Prettier
```
### Проекти с разширения за браузър
### Проекти за разширения за браузър
```bash
cd 5-browser-extension/solution
npm install
# Следвайте инструкциите за зареждане на разширения, специфични за браузъра
# Следвайте указанията за зареждане на разширения специфични за браузъра
```
### Проекти за космическа игра
### Проекти за Космическата игра
```bash
cd 6-space-game/solution
@ -67,41 +67,41 @@ npm install
# Отворете index.html в браузър или използвайте Live Server
```
### Проект за чат (Python бекенд)
### Проект за чат (Python backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Задайте променлива на околната среда GITHUB_TOKEN
# Задаване на променливата на средата GITHUB_TOKEN
python api.py
```
## Работен процес за разработка
## Работен процес при разработка
### Задопринасящи съдържание
### Засътрудници по съдържанието
1. **Форкнете хранилището** в своя GitHub акаунт
2. **Клонирайте форка си** локално
2. **Клонирайте форка** локално
3. **Създайте нов клон** за вашите промени
4. Направете промени в съдържанието на урок или в кодовите примери
5. Тествайте всички кодови промени в съответните проектни директории
6. Подайте pull request според указанията за допринасяне
4. Направете промени в съдържанието на урока или примерите за код
5. Тествайте всякакви промени в кода в съответните проектни директории
6. Подайте pull request според указанията за принос
### За учащи
### За учащите
1. Форкнете или клонирайте хранилището
2. Навигирайте последователно през директориите с уроци
3. Прочетете README файловете за всеки урок
4. Завършете тестовете преди урока на https://ff-quizzes.netlify.app/web/
5. Работете по кодовите примери в папките с уроци
6. Изпълнете задачи и предизвикателства
7. Направете тестовете след урока
4. Попълнете тестовете преди урока на https://ff-quizzes.netlify.app/web/
5. Работете с примерите за код в папките на уроците
6. Завършете задачи и предизвикателства
7. Попълнете тестовете след урока
### Жива разработка
- **Документация**: Стартирайте `docsify serve` в корена (порт 3000)
- **Документация**: Стартирайте `docsify serve` в главната директория (порт 3000)
- **Quiz App**: Стартирайте `npm run dev` в директорията quiz-app
- **Проекти**: Използвайте разширението VS Code Live Server за HTML проекти
- **Проекти**: Използвайте разширението Live Server на VS Code за HTML проекти
- **API проекти**: Стартирайте `npm start` в съответните API директории
## Инструкции за тестване
@ -111,172 +111,172 @@ python api.py
```bash
cd quiz-app
npm run lint # Проверка за проблеми със стила на кода
npm run build # Потвърдете успешното изграждане
npm run build # Проверете дали сглобяването е успешно
```
### Тестване на Bank API
```bash
cd 7-bank-project/api
npm run lint # Проверете за проблеми със стила на кода
npm run lint # Проверка за проблеми със стил на кода
node server.js # Проверете дали сървърът стартира без грешки
```
### Общ подход за тестване
- Това е образователно хранилище без обстойни автоматизирани тестове
- Ръчното тестване сефокусира върху:
- Работоспособност на кодовите примери без грешки
- Работещи връзки в документацията
- Успешно изпълнение на билдове на проектите
- Примери, спазващи най-добри практики
- Това е образователно хранилище без пълни автоматизирани тестове
- Ръчното тестване секонцентрира върху:
- Изпълнение на примерите за код без грешки
- Проверка дали линковете в документацията работят правилно
- Успешно завършване на билдовете на проектите
- Примерите следват добри практики
### Проверки преди подаване
- Стартирайте `npm run lint` в директориитес package.json
- Проверете дали markdown връзките са валидни
- Тествайте кодовите примери в браузър или Node.js
- Уверете се, че преводите запазват правилната структура
- Стартирайте `npm run lint` в директории с package.json
- Проверете валидността на връзките в markdown
- Тествайте примерите за код в браузър или Node.js
- Проверете дали преводите поддържат правилната структура
## Насоки за стил на кода
### JavaScript
- Използвайте съвременен ES6+ синтаксис
- Следвайте стандартните ESLint конфигурации в проектите
- Използвайте смислени имена на променливи и функции за по-лесно разбиране
- Използвайте модерен ES6+ синтаксис
- Следвайте стандартните ESLint конфигурации, предоставени в проектите
- Използвайте смислени имена на променливи и функции за образователна яснота
- Добавяйте коментари, обясняващи концепциите за учащите
- Форматирайте с Prettier, където е конфигуриран
### HTML/CSS
- Семантични HTML5 елементи
- Принципи за адаптивен дизайн
- Принципи на отзивчив дизайн
- Ясни конвенции за именуване на класове
- Коментари, обясняващи CSS техники за учащите
### Python
- Следвайте PEP 8 стилови указания
- Ясни, образователни кодови примери
- Използвайте типови подсказки, където е полезно за учене
- Стилови насоки PEP 8
- Ясни, образователни примери за код
- Типови подсказки, където е полезно за обучението
### Markdown документация
- Ясна иерархия на заглавията
- Кодови блокове суказание на езика
- Ясна йерархия на заглавията
- Кодови блокове спосочен език
- Връзки към допълнителни ресурси
- Скрийншотове и изображения в папки`images/`
- Алтернативен текст на изображения за достъпност
- Скриншотове и изображения в директориите`images/`
- Alt текст за изображения за достъпност
### Организация на файловете
- Уроците саномерирани последователно (1-getting-started-lessons, 2-js-basics и др.)
- Всеки проект има папки `solution/` и често `start/` или `your-work/`
- Изображенията се съхраняват в папки `images/` за съответния урок
- Преводите са в структура `translations/{езиков-код}/`
- Уроците саподредени последователно (1-getting-started-lessons, 2-js-basics и др.)
- Всеки проект има директории `solution/` и често `start/` или `your-work/`
- Изображенията се съхраняват в папки `images/`, специфични за урока
- Преводите са в структура `translations/{language-code}/`
## Съставяне и разгръщане
## Създаване и внедряване
### Разгръщане на Quiz App (Azure Static Web Apps)
### Внедряване на Quiz App (Azure Static Web Apps)
quiz-app е конфигуриран за разгръщане в Azure Static Web Apps:
quiz-app е конфигуриран за внедряване в Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Създава папка dist/
# Разгръща чрез GitHub Actions workflow при натискане към main
# Разгръща чрез GitHub Actions workflow при push към main
За подробни инструкции по отделните проекти вижте README файловете в:
- `quiz-app/README.md` - Vue 3 квиз приложение
За подробни инструкции относно отделните проекти, вижте README файловете в:
- `quiz-app/README.md` - Vue 3 приложение за викторини
- `7-bank-project/README.md` - Банково приложение с удостоверяване
- `5-browser-extension/README.md` - Разработване на разширения за браузър
- `5-browser-extension/README.md` - Разработка на разширение за браузър
- `6-space-game/README.md` - Разработка на игра с Canvas
- `9-chat-project/README.md` - AI чат асистент проект
- `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). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или неправилни тълкувания, произтичащи от използването на този превод.
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.
Acesta este un depozit curricular educațional pentru predarea elementelor fundamentale ale 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 acoperind JavaScript, CSS și HTML.
### Componente Cheie
### Componente cheie
- **Conținut Educațional**: 24 de lecții structurate organizate în module bazate pe proiecte
- **Proiecte Practice**: Terrarium, Joc de tastare, Extensie de browser, Joc spațial, Aplicație bancară, Editor de cod și Asistent 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
- **Conținut educațional**: 24 de lecții structurate organizate în module bazate pe proiecte
- **Proiecte practice**: Terrarium, Joc de tastare, Extensie pentru browser, Joc spațial, Aplicație bancară, Editor de cod și Asistent chat AI
- **Chestionare interactive**: 48 de chestionare cu câte 3 întrebări fiecare (evaluări pre/post-lecție)
- **Suport multi-limbă**: Traduceri automate pentru peste 50 de limbi prin GitHub Actions
- `9-chat-project/README.md` - Proiect asistent chat AI
Pentru instrucțiuni detaliate despre proiectele individuale, consultați fișierele README din:
- `quiz-app/README.md` - aplicație quiz Vue 3
- `7-bank-project/README.md` - aplicație bancară cu autentificare
- `5-browser-extension/README.md` - dezvoltarea extensiilor pentru browser
- `6-space-game/README.md` - dezvoltarea jocurilor canvas
- `9-chat-project/README.md` - proiect asistent chat AI
### Structura Monorepo
### Structura monorepo
Deși nu este un monorepo tradițional, acest depozit conține mai multe proiecte independente:
- Fiecare lecție este auto-suficientă
- Fiecare lecție este autonomă
- Proiectele nu împart dependențe
- Se poate lucra pe proiecte individuale fără a afecta altele
- Clonați întregul depozit pentru experiența completă a curriculumului
- Lucrați pe proiectele individuale fără a afecta altele
- Clonați întregul repo pentru experiența completă a curriculumului
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Declinare a responsabilității**:
Acest document a fost tradus folosind serviciul de traducere AI [Co-op Translator](https://github.com/Azure/co-op-translator). Deși ne străduim 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.
**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 o persoană. Nu ne asumăm responsabilitatea pentru eventuale neînțelegeri sau interpretări greșite rezultate din utilizarea acestei traduceri.
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.
Toto je vzdelávací repozitár pre výučbu základov webového vývoja pre začiatočníkov. Kurz je komplexný 12-týždňový program vyvinutý Microsoft Cloud Advocates, obsahujúci 24 praktických lekcií pokrývajúcich JavaScript, CSS a HTML.
### Kľúčové komponenty
- **Vzdelávací obsah**: 24 štruktúrovaných lekcií organizovaných do modulov založených na projektoch
- **Praktické projekty**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor a AI Chat Assistant
- **Interaktívne kvízy**: 48 kvízov s 3 otázkami každý (pred a po lekcii)
- **Podpora viacerých jazykov**: Automatické preklady do 50+ jazykov cez GitHub Actions
- **Vzdelávací obsah**: 24 štruktúrovaných lekcií usporiadaných do modulov založených na projektoch
- **Praktické projekty**: Terrárium, Hra na písanie, Rozšírenie prehliadača, Vesmírna hra, Banková aplikácia, Code Editor a AI Chat Asistent
- **Interaktívne kvízy**: 48 kvízov s 3 otázkami v každom (pred/po lekcii)
- **Podpora viacerých jazykov**: Automatizované preklady do 50+ jazykov cez GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) odporúčaný pre študentov
- Ďalšie kurzy: Generatívna AI, Data Science, ML, IoT učebné plány dostupné
- Ďalšie kurzy: Generatívna AI, Data Science, ML, IoT dostupné
### Práca s konkrétnymi projektmi
Pre podrobné inštrukcie ku jednotlivým projektom nájdete README súbory v:
- `quiz-app/README.md` - Vue 3 kvízová aplikácia
Podrobné inštrukcie k jednotlivým projektom nájdete v README súboroch:
- `quiz-app/README.md` - Vue 3 quiz 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 s canvasom
- `9-chat-project/README.md` - AI chat asistent projekt
- `6-space-game/README.md` - Vývoj hry na canvas
- `9-chat-project/README.md` - Projekt AI chat asistenta
### Štruktúra monorepa
Aj keď nejde o tradičné monorepo, toto úložisko obsahuje viacero nezávislých projektov:
Aj keď nejde o tradičné monorepo, tento repozitár obsahuje viacero nezávislých projektov:
- Každá lekcia je samostatná
- Projekty nezdieľajú závislosti
- Projekty nesdielajú závislosti
- Pracujte na jednotlivých projektoch bez ovplyvnenia ostatných
- Naklonujte celé repozitórium pre kompletný zážitok kurzu
- Naklonujte celý repozitár pre kompletný kurzový zážitok
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, majte, prosím, na pamäti, ž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 kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nepochopenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.