Web-Dev-For-Beginners/translations/uk

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

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

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

Відвідайте сторінку Student Hub, де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки та час від часу перевіряти, оскільки ми щомісяця оновлюємо контент.

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

   

   Потім відкрийте Термінал у 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	Гра на швидкість друку	Створення гри на швидкість друку	Вивчіть, як використовувати події клавіатури для управління логікою вашого додатку на JavaScript	Програмування, кероване подіями	Christopher
12	Green Browser Extension	Робота з браузерами	Дізнайтеся, як працюють браузери, їхню історію та як створити перші елементи розширення для браузера	Про браузери	Jen
13	Green Browser Extension	Створення форми, виклик API та збереження змінних у локальному сховищі	Створіть елементи JavaScript для вашого розширення браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі	API, форми та локальне сховище	Jen
14	Green Browser Extension	Фонові процеси в браузері, продуктивність вебу	Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації	Фонові завдання та продуктивність	Jen
15	Space Game	Розширена розробка ігор з JavaScript	Дізнайтеся про наслідування за допомогою класів і композиції, а також про патерн Pub/Sub, готуючись до створення гри	Вступ до розширеної розробки ігор	Chris
16	Space Game	Малювання на canvas	Дізнайтеся про API Canvas, який використовується для малювання елементів на екрані	Малювання на canvas	Chris
17	Space Game	Переміщення елементів на екрані	Дізнайтеся, як елементи можуть набувати руху, використовуючи декартові координати та API Canvas	Переміщення елементів	Chris
18	Space Game	Виявлення зіткнень	Зробіть так, щоб елементи стикалися та реагували один на одного, використовуючи натискання клавіш, і додайте функцію затримки для забезпечення продуктивності гри	Виявлення зіткнень	Chris
19	Space Game	Підрахунок очок	Виконуйте математичні обчислення на основі статусу гри та її продуктивності	Підрахунок очок	Chris
20	Space Game	Завершення та перезапуск гри	Дізнайтеся про завершення та перезапуск гри, включаючи очищення ресурсів та скидання значень змінних	Умови завершення	Chris
21	Banking App	HTML-шаблони та маршрути у веб-додатку	Дізнайтеся, як створити структуру архітектури багатосторінкового веб-сайту, використовуючи маршрути та HTML-шаблони	HTML-шаблони та маршрути	Yohan
22	Banking App	Створення форми входу та реєстрації	Дізнайтеся про створення форм та обробку процедур перевірки	Форми	Yohan
23	Banking App	Методи отримання та використання даних	Як дані надходять у ваш додаток, як їх отримувати, зберігати та видаляти	Дані	Yohan
24	Banking App	Концепції управління станом	Дізнайтеся, як ваш додаток зберігає стан і як ним управляти програмно	Управління станом	Yohan

🏫 Педагогіка

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

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

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

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

🎒 Інші курси

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

• Generative AI for Beginners
• Generative AI for Beginners .NET
• Generative AI with JavaScript
• Generative AI with Java
• AI for Beginners
• Data Science for Beginners
• ML for Beginners
• Cybersecurity for Beginners
• Web Dev for Beginners
• IoT for Beginners
• XR Development for Beginners
• Mastering GitHub Copilot for Agentic use
• Mastering GitHub Copilot for C#/.NET Developers
• Choose Your Own Copilot Adventure

Ліцензія

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

---

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