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

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

Додано новий проєкт AI Assistant, ознайомтеся з ним тут

📣 Оголошення — Нова навчальна програма з генеративного 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 з копією навчальної програми.

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

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. Ви можете зробити це, натиснувши Файл > Відкрити папку і вибравши папку, яку ви щойно клонували.

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

---

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

---

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

---

Серія Copilot

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

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

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

Ліцензія

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

---

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