[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [](http://makeapullrequest.com) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott) [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [](https://discord.com/invite/ByRwuEEgH4) Следвайте тези стъпки, за да започнете да използвате ресурсите: 1. **Копирайте хранилището**: Кликнете [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Клонирайте хранилището**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Присъединете се към Azure AI Foundry Discord и се срещнете с експерти и други разработчици**](https://discord.com/invite/ByRwuEEgH4) # Уеб разработка за начинаещи - учебна програма Научете основите на уеб разработката с нашия 12-седмичен курс, създаден от Microsoft Cloud Advocates. Всяка от 24-те лекции обхваща JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузъри и космически игри. Участвайте в тестове, дискусии и практически задачи. Подобрете уменията си и оптимизирайте запаметяването на знания с нашата ефективна проектно-базирана методология. Започнете своето кодиращо пътешествие още днес! ### 🌐 Поддръжка на много езици #### Поддържано чрез GitHub Action (Автоматизирано и винаги актуално) [French](../fr/README.md) | [Spanish](../es/README.md) | [German](../de/README.md) | [Russian](../ru/README.md) | [Arabic](../ar/README.md) | [Persian (Farsi)](../fa/README.md) | [Urdu](../ur/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Hindi](../hi/README.md) | [Bengali](../bn/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Portuguese (Brazil)](../br/README.md) | [Italian](../it/README.md) | [Polish](../pl/README.md) | [Turkish](../tr/README.md) | [Greek](../el/README.md) | [Thai](../th/README.md) | [Swedish](../sv/README.md) | [Danish](../da/README.md) | [Norwegian](../no/README.md) | [Finnish](../fi/README.md) | [Dutch](../nl/README.md) | [Hebrew](../he/README.md) | [Vietnamese](../vi/README.md) | [Indonesian](../id/README.md) | [Malay](../ms/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Swahili](../sw/README.md) | [Hungarian](../hu/README.md) | [Czech](../cs/README.md) | [Slovak](../sk/README.md) | [Romanian](../ro/README.md) | [Bulgarian](./README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Croatian](../hr/README.md) | [Slovenian](../sl/README.md) | [Ukrainian](../uk/README.md) | [Burmese (Myanmar)](../my/README.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), където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която трябва да запазите и проверявате от време на време, тъй като съдържанието се обновява ежемесечно. ### 📣 Съобщение - _Нов проект за изграждане с Генеративен AI_ Току-що добавен нов проект за AI асистент, разгледайте го [тук](./09-chat-project/README.md) ### 📣 Съобщение - _Нова учебна програма_ за Генеративен AI за JavaScript Не пропускайте нашата нова учебна програма за Генеративен AI! Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете!  - Уроци, обхващащи всичко от основите до RAG. - Взаимодействайте с исторически личности чрез GenAI и нашето придружаващо приложение. - Забавен и ангажиращ разказ, ще пътувате във времето!  Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, които ще ви насочат към изучаване на теми като: - Създаване на заявки и инженеринг на заявки - Генериране на текстови и визуални приложения - Приложения за търсене Посетете [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)! **[Ученици](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, за всеки урок започнете с предварителен тест и продължете с четене на учебния материал, изпълнение на различните дейности и проверете разбирането си с тест след лекцията. За да подобрите учебния си опит, свържете се с вашите връстници, за да работите заедно по проектите! Дискусиите са насърчавани в нашия [форум за дискусии](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) за допълнителни учебни материали. ### 📋 Настройка на вашата среда Тази учебна програма има готова за използване среда за разработка! Когато започнете, можете да изберете да стартирате учебната програма в [Codespace](https://github.com/features/codespaces/) (_среда, базирана на браузър, без нужда от инсталации_), или локално на вашия компютър, използвайки текстов редактор като [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Създайте вашето хранилище За да запазите лесно работата си, препоръчваме да създадете свое собствено копие на това хранилище. Можете да направите това, като кликнете върху бутона **Use this template** в горната част на страницата. Това ще създаде ново хранилище във вашия GitHub акаунт с копие на учебната програма. Следвайте тези стъпки: 1. **Копирайте хранилището**: Кликнете върху бутона "Fork" в горния десен ъгъл на тази страница. 2. **Клонирайте хранилището**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Стартиране на учебната програма в Codespace В копието на хранилището, което сте създали, кликнете върху бутона **Code** и изберете **Open with Codespaces**. Това ще създаде нов Codespace, в който да работите.  #### Стартиране на учебната програма локално на вашия компютър За да стартирате учебната програма локално на вашия компютър, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Нашият първи урок, [Въведение в програмните езици и инструменти](../../1-getting-started-lessons/1-intro-to-programming-languages), ще ви преведе през различни опции за всеки от тези инструменти, за да изберете това, което работи най-добре за вас. Нашата препоръка е да използвате [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) като ваш редактор, който също има вграден [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Можете да изтеглите Visual Studio Code [тук](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Клонирайте вашето хранилище на вашия компютър. Можете да направите това, като кликнете върху бутона **Code** и копирате URL адреса: [CodeSpace](./images/createcodespace.png) След това отворете [Терминал](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) и изпълнете следната команда, като замените `` с URL адреса, който току-що сте копирали: ```bash git clone ``` 2. Отворете папката във Visual Studio Code. Можете да направите това, като кликнете **File** > **Open Folder** и изберете папката, която току-що сте клонирали. > Препоръчани разширения за Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - за преглед на HTML страници във Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - за помощ при писане на код ## 📂 Всеки урок включва: - опционална скица - опционално допълнително видео - предварителен тест - писмен урок - за проектно-базирани уроци, ръководства стъпка по стъпка за изграждане на проекта - проверки на знанията - предизвикателство - допълнително четене - задача - [тест след урока](https://ff-quizzes.netlify.app/web/) > **Бележка относно тестовете**: Всички тестове се намират в папката Quiz-app, общо 48 теста, всеки с три въпроса. Те са достъпни [тук](https://ff-quizzes.netlify.app/web/). Приложението за тестове може да се стартира локално или да се разположи в Azure; следвайте инструкциите в папката `quiz-app`. ## 🗃️ Уроци | | Име на проекта | Преподавани концепции | Цели на обучението | Свързан урок | Автор | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | | 01 | Първи стъпки | Въведение в програмирането и инструментите на професията | Научете основите на повечето програмни езици и за софтуера, който помага на професионалните разработчици да вършат работата си | [Въведение в програмните езици и инструментите на професията](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | Първи стъпки | Основи на GitHub, включително работа в екип | Как да използвате GitHub във вашия проект, как да си сътрудничите с други върху кодова база | [Въведение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Първи стъпки | Достъпност | Научете основите на уеб достъпността | [Основи на достъпността](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | Основи на JS | Типове данни в JavaScript | Основите на типовете данни в JavaScript | [Типове данни](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | Основи на JS | Функции и методи | Научете за функциите и методите за управление на логическия поток на приложението | [Функции и методи](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher | | 06 | Основи на JS | Вземане на решения с JS | Научете как да създавате условия в кода си, използвайки методи за вземане на решения | [Вземане на решения](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | Основи на JS | Масиви и цикли | Работа с данни, използвайки масиви и цикли в JavaScript | [Масиви и цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [Терариум](./3-terrarium/solution/README.md) | HTML на практика | Създайте HTML за онлайн терариум, съсредоточавайки се върху изграждането на оформление | [Въведение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [Терариум](./3-terrarium/solution/README.md) | CSS на практика | Създайте CSS за стилизиране на онлайн терариум, съсредоточавайки се върху основите на CSS, включително правенето на страницата отзивчива | [Въведение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [Терариум](./3-terrarium/solution/README.md) | Затваряния в JavaScript, манипулация на DOM | Създайте JavaScript, за да направите терариума функционален като интерфейс за влачене/пускане, съсредоточавайки се върху затваряния и манипулация на DOM | [Затваряния в JavaScript, манипулация на DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [Игра за писане](./4-typing-game/solution/README.md) | Създаване на игра за писане | Научете как да използвате събития от клавиатурата, за да управлявате логиката на вашето JavaScript приложение | [Програмиране, базирано на събития](./4-typing-game/typing-game/README.md) | Christopher | | 12 | [Зелено разширение за браузър](./5-browser-extension/solution/README.md) | Работа с браузъри | Научете как работят браузърите, тяхната история и как да създадете първите елементи на разширение за браузър | [За браузърите](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [Зелено разширение за браузър](./5-browser-extension/solution/README.md) | Създаване на форма, извикване на API и съхраняване на променливи в локално хранилище | Създайте JavaScript елементи на вашето разширение за браузър, за да извикате API, използвайки променливи, съхранени в локално хранилище | [API, форми и локално хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [Зелено разширение за браузър](./5-browser-extension/solution/README.md) | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра, за да управлявате иконата на разширението; научете за уеб производителността и някои оптимизации | [Фонови задачи и производителност](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [Космическа игра](./6-space-game/solution/README.md) | По-напреднало разработване на игри с JavaScript | Научете за наследяване, използвайки както класове, така и композиция, и модела Pub/Sub, като подготовка за създаване на игра | [Въведение в напреднало разработване на игри](./6-space-game/1-introduction/README.md) | Chris | | 16 | [Космическа игра](./6-space-game/solution/README.md) | Рисуване върху платно | Научете за API на Canvas, използван за рисуване на елементи върху екран | [Рисуване върху платно](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [Космическа игра](./6-space-game/solution/README.md) | Преместване на елементи по екрана | Открийте как елементите могат да придобият движение, използвайки картезиански координати и API на Canvas | [Преместване на елементи](./6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [Космическа игра](./6-space-game/solution/README.md) | Откриване на сблъсъци | Направете елементите да се сблъскват и реагират един на друг, използвайки натискания на клавиши, и осигурете функция за охлаждане, за да гарантирате производителността на играта | [Откриване на сблъсъци](./6-space-game/4-collision-detection/README.md) | Chris | | 19 | [Космическа игра](./6-space-game/solution/README.md) | Водене на резултат | Извършвайте математически изчисления въз основа на състоянието и производителността на играта | [Водене на резултат](./6-space-game/5-keeping-score/README.md) | Chris | | 20 | [Космическа игра](./6-space-game/solution/README.md) | Завършване и рестартиране на играта | Научете за завършване и рестартиране на играта, включително почистване на активи и нулиране на стойности на променливи | [Условие за завършване](./6-space-game/6-end-condition/README.md) | Chris | | 21 | [Банково приложение](./7-bank-project/solution/README.md) | HTML шаблони и маршрути в уеб приложение | Научете как да създадете скелета на архитектурата на многостраничен уебсайт, използвайки маршрути и HTML шаблони | [HTML шаблони и маршрути](./7-bank-project/1-template-route/README.md) | Yohan | | 22 | [Банково приложение](./7-bank-project/solution/README.md) | Създаване на форма за вход и регистрация | Научете за създаване на форми и обработка на процедури за валидиране | [Форми](./7-bank-project/2-forms/README.md) | Yohan | | 23 | [Банково приложение](./7-bank-project/solution/README.md) | Методи за извличане и използване на данни | Как данните се движат в и извън вашето приложение, как да ги извличате, съхранявате и изтривате | [Данни](./7-bank-project/3-data/README.md) | Yohan | | 24 | [Банково приложение](./7-bank-project/solution/README.md) | Концепции за управление на състояние | Научете как вашето приложение запазва състояние и как да го управлявате програмно | [Управление на състояние](./7-bank-project/4-state-management/README.md) | Yohan | | 25 | [Код на браузър/VScode](../../8-code-editor) | Работа с VScode | Научете как да използвате редактор на код | [Използване на редактор на код VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI Асистенти](./9-chat-project/README.md) | Работа с AI | Научете как да създадете свой собствен AI асистент | [Проект за AI асистент](./9-chat-project/README.md) | Chris | ## 🏫 Педагогика Нашата учебна програма е проектирана с две ключови педагогически принципа: * обучение, базирано на проекти * чести тестове Програмата преподава основите на JavaScript, HTML и CSS, както и най-новите инструменти и техники, използвани от съвременните уеб разработчици. Студентите ще имат възможност да придобият практически опит, като създадат игра за писане, виртуален терариум, екологично разширение за браузър, игра в стил "космически нашественици" и банково приложение за бизнеси. До края на серията студентите ще са придобили солидно разбиране за уеб разработката. > 🎓 Можете да вземете първите няколко урока от тази учебна програма като [Път за учене](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)" от видео уроци, някои от чиито автори допринесоха за тази учебна програма. Освен това, тест с нисък риск преди час задава намерението на студента към изучаване на тема, докато втори тест след час осигурява допълнително запазване. Тази учебна програма е проектирана да бъде гъвкава и забавна и може да се вземе изцяло или частично. Проектите започват малки и стават все по-сложни до края на 12-седмичния цикъл. Докато умишлено избягвахме въвеждането на JavaScript рамки, за да се концентрираме върху основните умения, необходими като уеб разработчик преди приемането на рамка, добра следваща стъпка след завършване на тази учебна програма би било изучаването на Node.js чрез друга колекция от видеа: "[Серия за начинаещи: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". > Посетете нашите [Правила за поведение](CODE_OF_CONDUCT.md) и [Насоки за принос](CONTRIBUTING.md). Очакваме вашата конструктивна обратна връзка! ## 🧭 Офлайн достъп Можете да стартирате тази документация офлайн, използвайки [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). ## 🎒 Други курсове Нашият екип създава и други курсове! Вижте: - [Генеративен AI за начинаещи](https://aka.ms/genai-beginners) - [Генеративен AI за начинаещи .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet) - [Генеративен AI с JavaScript](https://github.com/microsoft/generative-ai-with-javascript) - [Генеративен AI с Java](https://github.com/microsoft/Generative-AI-for-beginners-java) - [AI за начинаещи](https://aka.ms/ai-beginners) - [Наука за данни за начинаещи](https://aka.ms/datascience-beginners) - [Машинно обучение за начинаещи](https://aka.ms/ml-beginners) - [Киберсигурност за начинаещи](https://github.com/microsoft/Security-101) - [Уеб разработка за начинаещи](https://aka.ms/webdev-beginners) - [IoT за начинаещи](https://aka.ms/iot-beginners) - [XR разработка за начинаещи](https://github.com/microsoft/xr-development-for-beginners) - [Овладяване на GitHub Copilot за агентно използване](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming) - [Овладяване на GitHub Copilot за разработчици на C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers) - [Изберете своето собствено приключение с Copilot](https://github.com/microsoft/CopilotAdventures) ## Получаване на помощ Ако се затрудните или имате въпроси относно създаването на AI приложения, присъединете се към: [](https://aka.ms/foundry/discord) Ако имате обратна връзка за продукта или срещнете грешки по време на разработката, посетете: [](https://aka.ms/foundry/forum) ## Лиценз Този репозиторий е лицензиран под MIT лиценз. Вижте файла [LICENSE](../../LICENSE) за повече информация. --- **Отказ от отговорност**: Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.