42 KiB

Raw Blame History Unescape Escape

Веб-розробка для початківців - навчальна програма

Вивчіть основи веб-розробки за нашим 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 (автоматично та завжди актуально)

Надаєте перевагу клонуванню локально?

У цьому репозиторії міститься 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'
Це дасть вам усе необхідне для проходження курсу з набагато швидшим завантаженням.

Якщо ви хочете додаткові переклади, підтримувані мови наведені тут

🧑‍🎓 Ви студент?

Відвідайте сторінку Student Hub, де ви знайдете ресурси для початківців, студентські пакети та навіть можливості отримати безкоштовний сертифікат. Цю сторінку варто додати до закладок і час від часу перевіряти, оскільки ми щомісяця оновлюємо контент.

📣 Оголошення - Нові завдання режиму GitHub Copilot Agent для виконання!

Додано нове завдання, шукайте "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

Запуск навчальної програми у Codespace

У вашій копії цього репозиторію, яку ви створили, натисніть кнопку Code і виберіть Open with Codespaces. Це створить для вас новий Codespace для роботи.

Запуск навчальної програми локально на вашому комп’ютері

Щоб запустити цю навчальну програму локально на вашому комп’ютері, вам знадобиться текстовий редактор, браузер і командний рядок. Наш перший урок, Вступ до мов програмування та інструментів, допоможе вам дослідити різні варіанти для кожного з цих інструментів та обрати найкращий для вас.

Ми рекомендуємо використовувати Visual Studio Code як редактор, який також має вбудований термінал. Ви можете завантажити Visual Studio Code тут.

Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку Code і скопіювавши URL:

CodeSpace Потім відкрийте Термінал у Visual Studio Code і виконайте наступну команду, замінивши <your-repository-url> на URL, який ви щойно скопіювали:
```
git clone <your-repository-url>
```
Відкрийте папку у Visual Studio Code. Це можна зробити, клацнувши Файл > Відкрити папку та вибравши щойно клоновану папку.

Рекомендовані розширення 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 and 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	Гра на набір тексту	Створення гри на друку	Навчитися використовувати події клавіатури для управління логікою вашого JS-додатка	Програмування на подіях	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 помічника	Chris

🏫 Педагогіка

Наша навчальна програма розроблена з урахуванням двох ключових педагогічних принципів:

навчання на основі проєктів
часті тести

Програма викладає основи JavaScript, HTML і CSS, а також найсучасніші інструменти й техніки, які використовують сьогоднішні веб-розробники. Студенти матимуть змогу отримати практичний досвід, створюючи гру на друк, віртуальний тераріум, екологічне розширення для браузера, гру в стилі космічних загарбників та банківський додаток для бізнесу. Наприкінці курсу студенти отримають ґрунтовні знання веб-розробки.

🎓 Ви можете пройти перші кілька уроків цієї програми як навчальний шлях на Microsoft Learn!

Забезпечуючи відповідність контенту проєктам, процес стає більш захопливим для студентів, а засвоєння концепцій — кращим. Ми також створили кілька початкових уроків з основ JavaScript, поєднаних з відеоуроком із серії "Початок роботи з JavaScript", деякі автори якої сприяли цій програмі.

Крім того, легкий тест перед заняттям формує намір студента вивчати тему, а другий тест після заняття забезпечує подальше засвоєння. Цю програму було спроєктовано, щоб вона була гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.

Хоча ми цілеспрямовано уникали впровадження фреймворків JavaScript, щоб зосередитися на базових навичках, необхідних веб-розробнику до використання фреймворку, наступним логічним кроком після завершення цієї програми буде вивчення Node.js за допомогою іншої серії відеоуроків: "Початкова серія по Node.js".

Відвідайте наші Правила поведінки та Внесок. Ми вітаємо ваші конструктивні відгуки!

🧭 Оффлайн доступ

Ви можете запускати цю документацію офлайн, використовуючи Docsify. Форкніть це репозиторій, встановіть Docsify на ваш локальний комп’ютер і потім у кореневій папці цього репозиторію наберіть docsify serve. Вебсайт буде доступний на порту 3000 на вашому локальному хості: localhost:3000.

📘 PDF

PDF усіх уроків можна знайти тут.

🎒 Інші курси

Наша команда створює інші курси! Перегляньте:

LangChain

Azure / Edge / MCP / Агенти

Серія Генеративного ШІ

Основне навчання

Серія Copilot

Отримання допомоги

Якщо ви застрягли або маєте будь-які питання щодо створення AI-додатків. Приєднуйтесь до інших учнів та досвідчених розробників у обговореннях MCP. Це підтримуюча спільнота, де вітаються питання і знання вільно обмінюються.

Якщо у вас є відгуки про продукт або помилки під час розробки, відвідайте:

Ліцензія

Цей репозиторій ліцензовано за ліцензією MIT. Докладніше дивіться в файлі LICENSE.

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.

42 KiB Raw Blame History Unescape Escape