38 KiB

Raw Permalink Blame History Unescape Escape

Следвайте тези стъпки, за да започнете да използвате тези ресурси:

Направете Fork на хранилището: Кликнете
Клонирайте хранилището: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Присъединете се към Azure AI Foundry Discord и се срещнете с експерти и други разработчици

Уеб разработка за начинаещи - учебна програма

Научете основите на уеб разработката с нашия 12-седмичен курс, създаден от Microsoft Cloud Advocates. Всяка от 24-те лекции разглежда JavaScript, CSS и HTML чрез практически проекти като терариуми, разширения за браузъри и космически игри. Участвайте в тестове, дискусии и практически задачи. Подобрете уменията си и оптимизирайте запаметяването на знания с нашата ефективна проектно-базирана методология. Започнете своето кодиращо пътешествие още днес!

🌐 Поддръжка на много езици

Поддържано чрез GitHub Action (Автоматизирано и винаги актуално)

Ако желаете да добавите допълнителни преводи, списъкът с поддържани езици е тук

🧑‍🎓 Студент ли сте?

Посетете страницата за студенти, където ще намерите ресурси за начинаещи, студентски пакети и дори начини да получите безплатен ваучер за сертификат. Това е страницата, която трябва да запазите и проверявате от време на време, тъй като съдържанието се сменя ежемесечно.

📣 Съобщение - Нов проект за изграждане с Генеративен 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 на хранилището: Кликнете върху бутона "Fork" в горния десен ъгъл на тази страница.
Клонирайте хранилището: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Изпълнение на учебната програма в Codespace

В копието на хранилището, което създадохте, кликнете върху бутона Code и изберете Open with Codespaces. Това ще създаде нов Codespace, в който да работите.

!Codespace./images/createcodespace.png)

Изпълнение на учебната програма локално на вашия компютър

За да изпълните тази учебна програма локално на вашия компютър, ще ви е необходим текстов редактор, браузър и инструмент за команден ред. Нашият първи урок, Въведение в програмните езици и инструменти за работа, ще ви преведе през различни опции за всеки от тези инструменти, за да изберете това, което работи най-добре за вас.

Нашата препоръка е да използвате Visual Studio Code като редактор, който също има вграден Терминал. Можете да изтеглите Visual Studio Code тук.

Клонирайте вашето хранилище на вашия компютър. Можете да направите това, като кликнете върху бутона Code и копирате URL адреса:

!CodeSpace

След това отворете Терминал в Visual Studio Code и изпълнете следната команда, като замените <your-repository-url> с URL адреса, който току-що копирахте:
```
git clone <your-repository-url>
```
Отворете папката във Visual Studio Code. Можете да направите това, като кликнете върху File.

Отворете папка и изберете папката, която току-що клонирахте. Препоръчителни разширения за 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	Космическа игра	Рисуване върху 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	Браузър/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: localhost:3000.

📘 PDF

PDF с всички лекции може да бъде намерен тук.

🎒 Други курсове

Нашият екип създава и други курсове! Вижте:

Лиценз

Този репозиторий е лицензиран под лиценза MIT. Вижте файла LICENSE за повече информация.

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

38 KiB Raw Permalink Blame History Unescape Escape