Научете основите на уеб разработката с нашия 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 и се срещнете с експерти и други разработчици
Предпочитате да клонирате локално?
Този репозитори включва над 50 превода на езици, което значително увеличава размера на изтегляне. За да клонирате без преводи, използвайте sparse checkout:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Това ви дава всичко необходимо за завършване на курса с много по-бързо изтегляне.
Ако желаете да имате допълнителни поддържани езици за превод, те са изброени тук
Посетете Страница за студенти, където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която трябва да запазите и да проверявате от време на време, тъй като месечно сменяме съдържанието.
Добавено е ново предизвикателство, търсете "GitHub Copilot Agent Challenge 🚀" в повечето глави. Това е ново предизвикателство, което трябва да завършите, използвайки GitHub Copilot и режим Agent. Ако не сте използвали режим Agent преди, той може не само да генерира текст, но и да създава и редактира файлове, да изпълнява команди и още.
Току-що добавен нов проект AI Асистент, разгледайте проекта
Не пропускайте нашата нова учебна програма за Generative 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
В копието на това репозитори, което създадохте, натиснете бутона 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 | Getting Started | Въведение в програмирането и инструментите на занаята | Научете основите зад повечето програмни езици и софтуера, който помага на професионалните разработчици да вършат работата си | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | Основи на GitHub, включва работа в екип | Как да използвате GitHub в проекта си, как да си сътрудничите с други върху кодовата база | Intro to GitHub | Floor |
| 03 | Getting Started | Достъпност | Научете основите на уеб достъпността | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | Типове данни в JavaScript | Основите на типовете данни в JavaScript | Data Types | Jasmine |
| 05 | JS Basics | Функции и методи | Научете за функциите и методите за управление на логиката на приложението | Functions and Methods | Jasmine и Christopher |
| 06 | JS Basics | Вземане на решения с JS | Научете как да създавате условия в кода си чрез методи за вземане на решения | Making Decisions | Jasmine |
| 07 | JS Basics | Масиви и цикли | Работа с данни чрез масиви и цикли в JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML на практика | Създайте HTML за онлайн терариум, с фокус върху създаването на оформление | Introduction to HTML | Jen |
| 09 | Terrarium | CSS на практика | Създайте CSS, за да стилизирате онлайн терариума с акцент върху основите на CSS, включително адаптивност на страницата | Introduction to CSS | Jen |
| 10 | Terrarium | JavaScript затваряния, манипулация на DOM | Създайте JavaScript, за да направите терариума функционален с drag/drop интерфейс, с акцент върху затваряния и манипулация на DOM | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Създаване на игра за писане | Научете как да използвате клавишни събития, за да управлявате логиката на вашето JavaScript приложение | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Работа с браузъри | Научете как работят браузърите, тяхната история и как да изградите първите елементи на браузър разширение | About Browsers | Jen |
| 13 | Green Browser Extension | Създаване на форма, повикване на API и съхраняване на променливи в локално хранилище | Изградете JavaScript елементи на браузър разширението си за извикване на API с използване на променливи, съхранявани в локално хранилище | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра за управление на иконата на разширението; научете за уеб производителността и оптимизации за повишаване | Background Tasks and Performance | Jen |
| 15 | Space Game | По-напреднало разработване на игри с JavaScript | Научете за наследяването чрез класове и композиция и патърна Pub/Sub, като подготовка за създаване на игра | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Рисуване върху платно | Научете за Canvas API, използван за рисуване на елементи на екран | Drawing to Canvas | Chris |
| 17 | Space Game | Преместване на елементи по екрана | Открийте как елементите могат да придобият движение чрез декартови координати и Canvas API | Moving Elements Around | Chris |
| 18 | Space Game | Откриване на сблъсък | Накарайте елементите да се сблъскват и реагират един на друг чрез натискане на клавиши и добавете функция за забавяне, за да осигурите производителност на играта | Collision Detection | Chris |
| 19 | Space Game | Водене на резултати | Извършвайте математически изчисления въз основа на състоянието и представянето на играта | Keeping Score | Chris |
| 20 | Space Game | Край и рестартиране на играта | Научете за край и рестартиране на играта, включително почистване на ресурси и нулиране на стойности на променливи | The Ending Condition | Chris |
| 21 | Banking App | HTML шаблони и маршрути в уеб приложение | Научете как да създадете скелет на архитектурата на многостраничен уебсайт чрез маршрутизиране и HTML шаблони | HTML Templates and Routes | Yohan |
| 22 | Banking App | Създаване на формуляр за вход и регистрация | Научете за създаването на формуляри и обработката на валидационни процедури | Forms | Yohan |
| 23 | Banking App | Методи за извличане и използване на данни | Как данните постъпват и излизат от приложението ви, как да ги изтегляте, съхранявате и изтривате | Data | Yohan |
| 24 | Banking App | Концепции за управление на състояние | Научете как вашето приложение запазва състояние и как да го управлявате програмно | State Management | Yohan |
| 25 | Browser/VScode Code | Работа с VScode | Научете как да използвате редактор на код | Use VScode Code Editor | Chris |
| 26 | AI Assistants | Работа с изкуствен интелект | Научете как да създадете собствен AI асистент | AI Assistant project | Chris |
Нашата учебна програма е създадена с два ключови педагогически принципа:
- обучение чрез проекти
- чести тестове
Програмата преподава основите на JavaScript, HTML и CSS, както и най-новите инструменти и техники, използвани от съвременните уеб разработчици. Студентите ще имат възможност да придобият практичен опит, като изграждат игра за писане, виртуален терариум, екологично разширение за браузър, игра в стил „нападател на космоса“ и банково приложение за бизнес. В края на серията студентите ще имат солидно разбиране на уеб разработка.
🎓 Можете да започнете с първите няколко урока от тази учебна програма като Учебен път в Microsoft Learn!
Като гарантираме, че съдържанието съвпада с проектите, процесът за учениците става по-ангажиращ и задържането на концепциите се увеличава. Също така написахме няколко въвеждащи урока по основите на JavaScript, за да представим концепциите, съчетани с видео от поредицата "Beginners Series to: JavaScript", някои от авторите на които допринесоха за тази учебна програма.
Освен това, неангажиращ тест преди урока задава нагласата на студента към ученето на тема, а втори тест след урока осигурява допълнително задържане на материал. Тази учебна програма е създадена, за да бъде гъвкава и забавна и може да се взема цялостно или по части. Проектите започват с по-малки теми и стават все по-сложни до края на 12-седмичния цикъл.
Докато умишлено сме избегнали въвеждането на JavaScript рамки, за да се концентрираме върху основните умения, необходими като уеб разработчик преди да се премине към рамка, добър следващ ход след завършване на тази програма би бил да научите Node.js чрез друга поредица от видеа: "Beginner Series to: Node.js".
Посетете нашите насоки Кодекс на поведение и Принос. Очакваме вашите конструктивни отзиви!
Можете да използвате тази документация офлайн чрез Docsify. Форкнете това хранилище, инсталирайте Docsify на локалната си машина, след което в главната папка на хранилището въведете docsify serve. Уебсайтът ще се обслужва на порт 3000 на локалния ви хост: localhost:3000.
PDF с всички уроци може да бъде намерен тук.
Екипът ни произвежда и други курсове! Разгледайте:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Ако изпитате затруднения или имате въпроси относно създаването на AI приложения, присъединете се към други учащи и опитни разработчици в дискусии за MCP. Това е подкрепяща общност, където въпросите са добре дошли и знанията се споделят свободно.
Ако имате обратна връзка за продукта или грешки при създаването, посетете:
Това хранилище е лицензирано под MIT лиценз. Вижте файла LICENSE за повече информация.
Отказ от отговорност:
Този документ е преведен с помощта на AI преводаческа услуга Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или неправилни тълкувания, произтичащи от използването на този превод.