Научете основите на уеб разработката с нашия 12-седмичен подробен курс, воден от Microsoft Cloud Advocates. Във всеки от 24-те урока се разглеждат JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузър и космически игри. Вземете участие в викторини, дискусии и практически задачи. Усъвършенствайте уменията си и оптимизирайте задържането на знания с нашата ефективна, проектно базирана педагогика. Започнете своето обучение по програмиране още днес!
Присъединете се към Discord общността на Azure AI Foundry
Следвайте тези стъпки, за да започнете да използвате тези ресурси:
- Направете форк на репoзиторията: Кликнете
- Клонирайте репозиторията:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Присъединете се към Azure AI Foundry Discord и се запознайте с експерти и други разработчици
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Предпочитате да клонирате локално?
Този репозитори включва над 50 езикови превода, което значително увеличава размера на изтеглянето. За да клонирате без преводи, използвайте sparse checkout:
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 Assistant проект, разгледайте го тук
📣 Обявление - Нова учебна програма за Генеративен изкуствен интелект за JavaScript току-що беше пусната
Не пропускайте нашата нова учебна програма за Генеративен ИИ!
Посетете 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 адреса:
CodeSpace След това отворете 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 | Заключвания в JS, манипулация на DOM | Jen |
| 11 | Игра за писане | Създаване на игра за писане | Научете как да използвате клавишни събития за задвижване на логиката на приложението си на JavaScript | Програмиране базирано на събития | Christopher |
| 12 | Зелен браузър екстензия | Работа с браузъри | Научете как работят браузърите, тяхната история и как да изградите първите елементи на екстензия за браузър | За браузърите | Jen |
| 13 | Зелен браузър екстензия | Създаване на формуляр, извикване на API и съхраняване на променливи локално | Създайте JavaScript елементите на браузър екстензията си за извикване на API чрез променливи, съхранявани локално | API, формуляри и локално съхранение | Jen |
| 14 | Зелен браузър екстензия | Фонови процеси в браузъра, уеб производителност | Използвайте фоновите процеси на браузъра за управление на иконата на екстензията; научете за уеб производителността и оптимизации | Фонови задачи и производителност | Jen |
| 15 | Космическа игра | По-напреднало разработване на игри с JavaScript | Научете за наследяването чрез класове и композиция, както и за патерна Pub/Sub, подготвяйки се за изграждане на игра | Въведение в напреднало разработване на игри | Chris |
| 16 | Космическа игра | Рисуване в canvas | Научете за Canvas API, използван за рисуване на елементи на екрана | Рисуване в Canvas | Chris |
| 17 | Космическа игра | Преместване на елементи по екрана | Открийте как елементите придобиват движение чрез декартови координати и Canvas API | Преместване на елементи | Chris |
| 18 | Космическа игра | Откриване на сблъсъци | Направете елементите да се сблъскват и реагират на натискане на клавиши и добавете функция за охлаждане, за да подобрите изпълнението | Откриване на сблъсъци | Chris |
| 19 | Космическа игра | Водене на резултата | Извършете математически изчисления въз основа на състоянието и представянето на играта | Водене на резултата | Chris |
| 20 | Космическа игра | Край и рестартиране на играта | Научете как да приключите и рестартирате играта, включително почистване на ресурси и нулиране на променливите | Условия за край | Chris |
| 21 | Банкова Апликация | HTML шаблони и маршрути в уеб приложение | Научете как да създадете структурата на многостраничен уебсайт с използване на маршрутизация и HTML шаблони | HTML шаблони и маршрути | Yohan |
| 22 | Банкова Апликация | Създаване на формуляр за вход и регистрация | Научете как се изграждат формуляри и как да се обработва валидирането | Формуляри | Yohan |
| 23 | Банкова Апликация | Методи за извличане и използване на данни | Как данните влизат и излизат от вашето приложение, как да ги извличате, съхранявате и изхвърляте | Данни | Yohan |
| 24 | Банкова Апликация | Концепции за управление на състоянието | Научете как приложението ви запазва състояние и как да го управлявате програмно | Управление на състоянието | Yohan |
| 25 | Browser/VScode Code | Работа с VScode | Научете как да използвате кодов редактор | Използване на VScode Code Editor | Chris |
| 26 | AI Асистенти | Работа с AI | Научете как да изградите свой собствен AI помощник | Проект AI Assistant | 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: 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. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия първичен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за каквито и да било недоразумения или неправилни тълкувания, произтичащи от използването на този превод.