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 | Kannada | Khmer | 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:

Bash / macOS / Linux:

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'

CMD (Windows):

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 - щоб допомогти вам швидше писати код

📂 Кожен урок містить:

• додаткову замальовку (sketchnote) за бажанням
• додаткове відео за бажанням
• розігрівальний вікторину перед уроком
• письмовий урок
• для проектно-орієнтованих уроків — покрокові керівництва зі створення проєкту
• перевірки знань
• виклик (challenge)
• додаткове читання
• завдання
• вікторину після уроку

Примітка щодо вікторин: Усі вікторини знаходяться в папці 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 та збереження змінних у локальному сховищі	Створити JS-елементи розширення браузера для виклику API, використовуючи змінні у локальному сховищі	API, форми та локальне сховище	Jen
14	Зелене розширення для браузера	Фонові процеси у браузері, веб-продуктивність	Користуватись фоновими процесами браузера для керування іконкою розширення; вивчити веб-продуктивність і оптимізації	Фонові завдання та продуктивність	Jen
15	Космічна гра	Більш просунута розробка ігор на JavaScript	Вивчити наслідування за допомогою класів і композиції та патерн Pub/Sub перед створенням гри	Вступ до просунутої розробки ігор	Chris
16	Космічна гра	Малювання на канвасі	Вивчити Canvas API, який використовується для малювання елементів на екрані	Малювання на канвасі	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:3000.

📘 PDF

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

🎒 Інші Курси

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

LangChain

Azure / Edge / MCP / Agents

---

Серія Generative AI

---

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

---

Серія Copilot

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

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

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

Ліцензія

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

---

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