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!

Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання для вас, яке потрібно виконати за допомогою GitHub Copilot і режиму агента. Якщо ви раніше не використовували режим агента, він не лише генерує текст, а й може створювати та редагувати файли, запускати команди та багато іншого.

📣 Оголошення - Новий проект на базі Генеративного ШІ

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

📣 Оголошення - Нещодавно випущено новий навчальний курс з Генеративного ШІ для JavaScript

Не пропустіть наш новий курс з Генеративного ШІ!

Відвідайте https://aka.ms/genai-js-course, щоб почати!

• Уроки охоплюють все від основ до RAG.
• Спілкуйтесь з історичними персонажами за допомогою GenAI і нашого компаньйона-додатку.
• Цікаве і захоплююче оповідання, ви будете подорожувати в часі!

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

• Формування запитів та інженерія запитів (prompt engineering)
• Генерація текстових і зображальних додатків
• Пошукові додатки

Відвідайте 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 та 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	Гра-надрукування	Створення гри-надрукування	Вивчити, як використовувати події клавіатури для керування логікою вашого JS-застосунку	Програмування на основі подій	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 асистента	Проєкт AI Асистент	Chris

🏫 Педагогіка

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

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

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

🎓 Ви можете пройти перші кілька уроків із цієї навчальної програми як Навчальний шлях на 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

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

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

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

Ліцензія

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

---

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