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 (автоматично та завжди актуально)

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 | Korean | Lithuanian | Malay | Marathi | Nepali | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Thai | Turkish | Ukrainian | Urdu | Vietnamese

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

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

Відвідайте сторінку 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	Початок роботи	Вступ до програмування та інструментів розробника	Дізнайтеся основи більшості мов програмування та про програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу	Вступ до мов програмування та інструментів розробника	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	Замикання у JavaScript, маніпуляція DOM	Jen
11	Гра на друкування	Створення гри на друкування	Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка	Програмування, кероване подіями	Christopher
12	Розширення для браузера Green	Робота з браузерами	Дізнайтеся, як працюють браузери, їх історію, і як створити перші елементи розширення для браузера	Про браузери	Jen
13	Розширення для браузера Green	Створення форми, виклик API та збереження змінних у локальному сховищі	Створіть JavaScript-елементи вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі	API, форми та локальне сховище	Jen
14	Розширення для браузера Green	Фонові процеси у браузері, продуктивність вебу	Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації	Фонові завдання та продуктивність	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 усіх уроків можна знайти тут.

🎒 Інші курси

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

LangChain

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

---

Серія про генеративний AI

---

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

---

Серія Copilot

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

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

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

Ліцензія

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

---

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