Web-Dev-For-Beginners/translations/uk

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

Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен з 24 уроків глибоко занурюється у JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення браузерів та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою нашої ефективної проєктно-орієнтованої педагогіки. Почніть свою подорож програмування вже сьогодні!

Приєднуйтеся до спільноти Azure AI Foundry у Discord

Виконайте ці кроки, щоб почати використовувати ці ресурси:

1. Зробіть форк репозиторію: Натисніть
2. Клонувати репозиторій: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Приєднуйтесь до 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 із копією навчальної програми.

Виконайте ці кроки:

1. Форкніть репозиторій: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. Клонування репозиторію: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

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

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

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

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

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

1. Клонуйте свій репозиторій на свій комп’ютер. Для цього натисніть кнопку Code і скопіюйте URL:

   CodeSpace Тоді відкрийте Термінал у Visual Studio Code і запустіть наступну команду, замінивши <your-repository-url> на URL, який ви щойно скопіювали:

   git clone <your-repository-url>
   

2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши File > Open Folder та обравши щойно клоновану папку.

Рекомендовані розширення Visual Studio Code:

• Live Server - для попереднього перегляду HTML-сторінок у Visual Studio Code
• Copilot - для швидшого написання коду

📂 Кожен урок включає:

• необов’язкову нотатку
• необов’язкове додаткове відео
• розминковий вікторину перед уроком
• текстовий урок
• для уроків на основі проектів – покрокові інструкції зі створення проекту
• перевірки знань
• виклик
• додаткове читання
• завдання
• вікторину після уроку

Примітка про вікторини: Всі вікторини знаходяться в папці Quiz-app, всього 48 вікторин по три питання в кожній. Вони доступні тут, додаток для вікторин можна запускати локально або розгортати в Azure; дотримуйтесь інструкцій в папці quiz-app.

🗃️ Уроки

	Назва проекту	Вивчені концепції	Навчальні цілі	Пов’язаний урок	Автор
01	Початок роботи	Вступ до програмування та інструменти фахівця	Вивчити основи більшості мов програмування і програмне забезпечення, яке допомагає професійним розробникам у їх роботі	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Початок роботи	Основи GitHub, включаючи роботу в команді	Як використовувати GitHub у вашому проекті, як співпрацювати з іншими над кодом	Intro to GitHub	Floor
03	Початок роботи	Доступність	Вивчити основи веб-доступності	Accessibility Fundamentals	Christopher
04	Основи JS	Типи даних JavaScript	Основи типів даних JavaScript	Data Types	Jasmine
05	Основи JS	Функції та методи	Вивчити функції та методи для керування логікою додатка	Functions and Methods	Jasmine and Christopher
06	Основи JS	Прийняття рішень на JS	Вивчити, як створювати умови у коді за допомогою методів прийняття рішень	Making Decisions	Jasmine
07	Основи JS	Масиви та цикли	Працювати з даними, використовуючи масиви та цикли у 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, щоб зробити терраріум інтерфейсом перетягування, зосередившись на замиканнях і маніпулюванні 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	Вивчити 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 асистента	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: localhost:3000.

📘 PDF

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

🎒 Інші курси

Наша команда створює й інші курси! Ознайомтеся з ними:

LangChain

Azure / Edge / MCP / Agents

---

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

---

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

---

Серія Copilot

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

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

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

Ліцензія

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

---

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