|
|
1 month ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 2 months ago | |
| docs | 3 months ago | |
| lesson-template | 3 months ago | |
| memory-game | 2 months ago | |
| quiz-app | 3 months ago | |
| AGENTS.md | 2 months ago | |
| CODE_OF_CONDUCT.md | 3 months ago | |
| CONTRIBUTING.md | 3 months ago | |
| README.md | 1 month ago | |
| SECURITY.md | 3 months ago | |
| SUPPORT.md | 3 months ago | |
| _404.md | 3 months ago | |
| for-teachers.md | 2 months ago | |
README.md
Уеб разработка за начинаещи - учебна програма
Научете основите на уеб разработката с нашия 12-седмичен подробен курс, създаден от Microsoft Cloud Advocates. Всяка от 24-те лекции разглежда JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузър и космически игри. Участвайте в тестове, дискусии и практически задачи. Подобрете уменията си и оптимизирайте запаметяването на знанията си с нашата ефективна проектно-ориентирана методология. Започнете своето пътешествие в програмирането още днес!
Присъединете се към общността Azure AI Foundry в Discord
Следвайте тези стъпки, за да започнете да използвате тези ресурси:
- Копирайте хранилището: Кликнете
- Клонирайте хранилището:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Присъединете се към Azure AI Foundry Discord и се запознайте с експерти и други разработчици
🌐 Поддръжка на много езици
Поддържани чрез GitHub Action (Автоматизирано и винаги актуално)
Арабски | Бенгалски | Български | Бирмански (Мианмар) | Китайски (опростен) | Китайски (традиционен, Хонг Конг) | Китайски (традиционен, Макао) | Китайски (традиционен, Тайван) | Хърватски | Чешки | Датски | Холандски | Естонски | Финландски | Френски | Немски | Гръцки | Иврит | Хинди | Унгарски | Индонезийски | Италиански | Японски | Корейски | Литовски | Малайски | Маратхи | Непалски | Норвежки | Персийски (фарси) | Полски | Португалски (Бразилия) | Португалски (Португалия) | Пенджабски (Гурмукхи) | Румънски | Руски | Сръбски (кирилица) | Словашки | Словенски | Испански | Суахили | Шведски | Тагалог (Филипински) | Тамилски | Тайландски | Турски | Украински | Урду | Виетнамски
Ако желаете да бъдат добавени допълнителни преводи, списъкът с поддържани езици е тук
🧑🎓 Студент ли сте?
Посетете страницата за студенти, където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която трябва да запазите и да проверявате редовно, тъй като съдържанието се обновява ежемесечно.
📣 Съобщение - Нови предизвикателства с режим Agent на GitHub Copilot!
Добавено е ново предизвикателство, потърсете "GitHub Copilot Agent Challenge 🚀" в повечето глави. Това е ново предизвикателство, което можете да завършите, използвайки GitHub Copilot и режим Agent. Ако не сте използвали режим Agent преди, той е способен не само да генерира текст, но и да създава и редактира файлове, да изпълнява команди и още.
📣 Съобщение - Нов проект за създаване с Генеративен AI
Току-що добавен нов проект за AI асистент, разгледайте го проект
📣 Съобщение - Нова учебна програма за Генеративен AI за JavaScript беше току-що пусната
Не пропускайте нашата нова учебна програма за Генеративен AI!
Посетете https://aka.ms/genai-js-course, за да започнете!
- Уроци, обхващащи всичко от основите до RAG.
- Взаимодействайте с исторически личности, използвайки GenAI и нашето придружаващо приложение.
- Забавен и увлекателен разказ, ще пътувате във времето!
Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, които ще ви помогнат да научите теми като:
- Създаване на запитвания и инженеринг на запитвания
- Генериране на текстови и визуални приложения
- Приложения за търсене
Посетете https://aka.ms/genai-js-course, за да започнете!
🌱 Започнете
Учители, ние включихме някои предложения за това как да използвате тази учебна програма. Ще се радваме на вашата обратна връзка в нашия форум за дискусии!
Ученици, за всеки урок започнете с предварителен тест и продължете с четене на учебния материал, изпълнение на различните дейности и проверете разбирането си с тест след лекцията.
За да подобрите учебния си опит, свържете се с вашите колеги, за да работите заедно по проектите! Дискусиите са насърчавани в нашия форум за дискусии, където нашият екип от модератори ще бъде на разположение да отговори на вашите въпроси.
За да продължите образованието си, силно препоръчваме да разгледате Microsoft Learn за допълнителни учебни материали.
📋 Настройка на вашата среда
Тази учебна програма има готова за използване среда за разработка! Когато започнете, можете да изберете да стартирате учебната програма в Codespace (среда, базирана на браузър, без нужда от инсталации), или локално на вашия компютър, използвайки текстов редактор като Visual Studio Code.
Създайте вашето хранилище
За да запазите лесно работата си, препоръчваме да създадете свое собствено копие на това хранилище. Можете да направите това, като кликнете върху бутона Use this template в горната част на страницата. Това ще създаде ново хранилище във вашия GitHub акаунт с копие на учебната програма.
Следвайте тези стъпки:
- Копирайте хранилището: Кликнете върху бутона "Fork" в горния десен ъгъл на тази страница.
- Клонирайте хранилището:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Стартиране на учебната програма в Codespace
В копието на това хранилище, което сте създали, кликнете върху бутона Code и изберете Open with Codespaces. Това ще създаде нов Codespace, в който да работите.
Стартиране на учебната програма локално на вашия компютър
За да стартирате тази учебна програма локално на вашия компютър, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Нашият първи урок, Въведение в програмните езици и инструментите за работа, ще ви преведе през различни опции за всеки от тези инструменти, за да изберете това, което работи най-добре за вас.
Нашата препоръка е да използвате Visual Studio Code като ваш редактор, който също има вграден Терминал. Можете да изтеглите Visual Studio Code тук.
-
Клонирайте вашето хранилище на вашия компютър. Можете да направите това, като кликнете върху бутона Code и копирате URL адреса:
След това отворете Terminal в Visual Studio Code и изпълнете следната команда, като замените
<your-repository-url>с URL адреса, който току-що сте копирали:git clone <your-repository-url> -
Отворете папката във Visual Studio Code. Можете да направите това, като кликнете върху File > Open Folder и изберете папката, която току-що сте клонирали.
Препоръчителни разширения за Visual Studio Code:
- Live Server - за преглед на HTML страници във Visual Studio Code
- Copilot - за по-бързо писане на код
📂 Всяка лекция включва:
- по избор скица
- по избор допълнително видео
- предварителен тест за загрявка
- писмена лекция
- за проектно-базирани лекции, ръководства стъпка по стъпка за изграждане на проекта
- проверки на знанията
- предизвикателство
- допълнително четиво
- задача
- тест след лекцията
Бележка относно тестовете: Всички тестове се намират в папката Quiz-app, общо 48 теста с по три въпроса всеки. Те са достъпни тук, приложението за тестове може да се стартира локално или да се разположи в Azure; следвайте инструкциите в папката
quiz-app.
🗃️ Лекции
| Име на проекта | Преподавани концепции | Цели на обучението | Линк към лекцията | Автор | |
|---|---|---|---|---|---|
| 01 | Първи стъпки | Въведение в програмирането и инструментите за работа | Научете основите на повечето програмни езици и за софтуера, който помага на професионалните разработчици да вършат работата си | Въведение в програмните езици и инструментите за работа | Jasmine |
| 02 | Първи стъпки | Основи на GitHub, включително работа в екип | Как да използвате GitHub във вашия проект, как да си сътрудничите с други хора върху кодова база | Въведение в GitHub | Floor |
| 03 | Първи стъпки | Достъпност | Научете основите на уеб достъпността | Основи на достъпността | Christopher |
| 04 | Основи на JS | Типове данни в JavaScript | Основите на типовете данни в JavaScript | Типове данни | Jasmine |
| 05 | Основи на JS | Функции и методи | Научете за функциите и методите за управление на логическия поток на приложението | Функции и методи | Jasmine и Christopher |
| 06 | Основи на JS | Вземане на решения с JS | Научете как да създавате условия в кода си, използвайки методи за вземане на решения | Вземане на решения | Jasmine |
| 07 | Основи на JS | Масиви и цикли | Работа с данни, използвайки масиви и цикли в JavaScript | Масиви и цикли | Jasmine |
| 08 | Терариум | HTML на практика | Създайте HTML за онлайн терариум, като се фокусирате върху изграждането на оформление | Въведение в HTML | Jen |
| 09 | Терариум | CSS на практика | Създайте CSS за стилизиране на онлайн терариум, като се фокусирате върху основите на CSS, включително правенето на страницата адаптивна | Въведение в CSS | Jen |
| 10 | Терариум | Затваряния в JavaScript, манипулация на DOM | Създайте JavaScript, за да направите терариума функционален като интерфейс за влачене/пускане, фокусирайки се върху затваряния и манипулация на DOM | Затваряния в JavaScript, манипулация на DOM | Jen |
| 11 | Игра за писане | Създаване на игра за писане | Научете как да използвате събития от клавиатурата, за да управлявате логиката на вашето JavaScript приложение | Програмиране, базирано на събития | Christopher |
| 12 | Еко браузър разширение | Работа с браузъри | Научете как работят браузърите, тяхната история и как да създадете първите елементи на браузърно разширение | За браузърите | Jen |
| 13 | Еко браузър разширение | Създаване на форма, извикване на API и съхраняване на променливи в локално хранилище | Създайте JavaScript елементи на вашето браузърно разширение, за да извикате API, използвайки променливи, съхранени в локално хранилище | API, форми и локално хранилище | Jen |
| 14 | Еко браузър разширение | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра, за да управлявате иконата на разширението; научете за уеб производителност и някои оптимизации | Фонови задачи и производителност | Jen |
| 15 | Космическа игра | По-напреднало разработване на игри с JavaScript | Научете за наследяване, използвайки както класове, така и композиция, и модела Pub/Sub, като подготовка за създаване на игра | Въведение в напреднало разработване на игри | Chris |
| 16 | Космическа игра | Рисуване върху платно | Научете за API на Canvas, използван за рисуване на елементи върху екран | Рисуване върху платно | Chris |
| 17 | Космическа игра | Движение на елементи по екрана | Открийте как елементите могат да се движат, използвайки декартови координати и API на Canvas | Движение на елементи | Chris |
| 18 | Космическа игра | Засичане на сблъсъци | Направете елементите да се сблъскват и да реагират един на друг, използвайки натискания на клавиши, и осигурете функция за охлаждане за производителност на играта | Засичане на сблъсъци | Chris |
| 19 | Космическа игра | Водене на резултат | Извършвайте математически изчисления, базирани на състоянието и производителността на играта | Водене на резултат | Chris |
| 20 | Космическа игра | Завършване и рестартиране на играта | Научете за завършване и рестартиране на играта, включително почистване на ресурси и нулиране на стойностите на променливите | Условие за завършване | Chris |
| 21 | Банкова апликация | HTML шаблони и маршрути в уеб апликация | Научете как да създадете структурата на архитектурата на уебсайт с много страници, използвайки маршрути и HTML шаблони | HTML шаблони и маршрути | Yohan |
| 22 | Банкова апликация | Създаване на форма за вход и регистрация | Научете за създаването на форми и обработката на рутинни проверки | Форми | Yohan |
| 23 | Банкова апликация | Методи за извличане и използване на данни | Как данните се движат в и извън вашата апликация, как да ги извличате, съхранявате и изтривате | Данни | Yohan |
| 24 | Банкова апликация | Концепции за управление на състоянието | Научете как вашата апликация запазва състояние и как да го управлявате програмно | Управление на състоянието | Yohan |
| 25 | Браузър/VSCode код | Работа с VSCode | Научете как да използвате редактор на код | Използване на VSCode редактор на код | Chris |
| 26 | AI Асистенти | Работа с AI | Научете как да създадете свой собствен AI асистент | Проект за AI асистент | Chris |
🏫 Педагогика
Нашата учебна програма е създадена с две ключови педагогически принципи:
- обучение, базирано на проекти
- чести тестове
Програмата преподава основите на JavaScript, HTML и CSS, както и най-новите инструменти и техники, използвани от съвременните уеб разработчици. Студентите ще имат възможност да придобият практически опит, като създадат игра за писане, виртуален терариум, екологично браузърно разширение, игра в стил "космически нашественици" и банкова апликация за бизнеси. До края на серията студентите ще са придобили солидно разбиране за уеб разработката.
🎓 Можете да вземете първите няколко лекции от тази учебна програма като Учебен път на Microsoft Learn!
Като гарантираме, че съдържанието е съобразено с проектите, процесът става по-ангажиращ за студентите и запазването на концепциите се увеличава. Освен това написахме няколко начални лекции за основите на JavaScript, за да въведем концепции, съчетани с видео от колекцията "Серия за начинаещи: JavaScript" от видео уроци, някои от чиито автори допринесоха за тази учебна програма.
Освен това, тест с нисък риск преди клас задава намерението на студента към изучаване на дадена тема, докато втори тест след клас осигурява допълнително запазване на знанията. Тази учебна програма е проектирана да бъде гъвкава и забавна и може да бъде взета изцяло или частично. Проектите започват малки и стават все по-сложни до края на 12-седмичния цикъл.
Докато умишлено избягвахме въвеждането на JavaScript рамки, за да се концентрираме върху основните умения, необходими като уеб разработчик преди приемането на рамка, добра следваща стъпка след завършване на тази учебна програма би било изучаването на Node.js чрез друга колекция от видеа: "Серия за начинаещи: Node.js".
Посетете нашите Правила за поведение и Насоки за принос. Очакваме вашата конструктивна обратна връзка!
🧭 Офлайн достъп
Можете да използвате тази документация офлайн, като използвате Docsify. Клонирайте това хранилище, инсталирайте Docsify на вашия локален компютър и след това в основната папка на това хранилище въведете docsify serve. Уебсайтът ще бъде достъпен на порт 3000 на вашия локален хост: localhost:3000.
PDF с всички лекции може да бъде намерен тук.
🎒 Други курсове
Нашият екип създава и други курсове! Вижте:
Azure / Edge / MCP / Agents
Серия за Генеративен AI
Основно обучение
Серия Copilot
Получаване на помощ
Ако се затруднявате или имате въпроси относно създаването на AI приложения, присъединете се:
Ако имате обратна връзка за продукт или срещнете грешки при разработката, посетете:
Лиценз
Този репозиторий е лицензиран под MIT лиценз. Вижте файла LICENSE за повече информация.
Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.


