---
title: Фронтенд веб-розробник
slug: Learn/Front-end_web_developer
tags:
  - CSS
  - Front-end
  - HTML
  - JavaScript
  - Web Standarts
  - Інструментарій
  - Навчання
  - Початківець
  - Стандарти
  - Фронт-енд
  - Фронтенд
  - інструменти
translation_of: Learn/Front-end_web_developer
original_slug: Learn/Фронт-енд_веб-розробник
---
<p>{{learnsidebar}}</p>

<p>Ласкаво просимо до нашого навчального шляху веб-розробника!</p>

<p>Ми представяємо вам структурований курс, який навчить вас усьому, що вам потрібно знати, аби стати передовим веб-розробником. Просто працюйте над кожним розділом, опановуючи нові або вдосконалюючи існуючі навички, рухаючись далі. Кожен розділ містить практичні завдання та оцінювання, щоб перевірити своє розуміння, перш ніж рухатися вперед.</p>

<h2 id="Охоплена_тематика">Охоплена тематика</h2>

<p>Досліджувані теми:</p>

<ul>
 <li>Основні налаштування та як правильно вчитися</li>
 <li>Веб-стандарти та найкращі практики (наприклад, доступність та сумісність між браузерами)</li>
 <li>HTML. Мова, що надає структуру та зміст веб-контенту</li>
 <li>CSS. Мова, що використовується для стилізації веб-сторінок</li>
 <li>JavaScript. Мова сценаріїв, що використовується для створення динамічної функціональності в Інтернеті.</li>
 <li>Інструменти, які використовуються для сприяння сучасній розробці веб-сторінок на стороні клієнта.</li>
</ul>

<p>Ви можете працювати з розділами по порядку, проте кожен з них також є самостійним. Наприклад, якщо ви вже знаєте HTML, ви можете перейти до розділу CSS.</p>

<h2 id="Передумови">Передумови</h2>

<p>Щоб почати цей курс, вам не потрібні попередні знання. Все, що вам потрібно, це комп’ютер, що може працювати із сучасними веб-браузерами, підключення до Інтернету та готовність вчитися.</p>

<p>Якщо ви не впевнені, що фронтенд веб-розробка вам підходить та/чи ви хочете більш поступове ознайомлення перед початком довгого та повного курсу, спершу опрацюйте наш модуль <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a>.</p>

<h2 id="Отримання_допомоги">Отримання допомоги</h2>

<p>Ми намагалися зробити навчання фронт-енд веб-розробці якомога комфортним, але ви, ймовірно, все ж таки десь застрягнете, тому що чогось не розумієте або якийсь код просто не працює.</p>

<p>Не панікуйте. Ми всі застрягаємо, не зважаючи на те - ми початківці чи ми професійні веб-розробники. Стаття <a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> пропонує вам низку порад щодо пошуку інформації та надання допомоги самому собі. Якщо ви все ще не зрушили з мертвої точки, сміливо розміщуйте питання на нашому <a href="https://discourse.mozilla.org/c/mdn/learn/">Дискурсному форумі</a>.</p>

<p>Нумо починати. Щасти!</p>

<h2 id="Шлях_навчання">Шлях навчання</h2>

<h3 id="Початок">Початок</h3>

<p>Час на виконання: 1,5–2 години</p>

<h4 id="Передумови_2">Передумови</h4>

<p>Нічого, крім базової комп'ютерної грамотності.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>В цій частині курсу немає оцінювання, проте не пропускайте її. Важливо, щоб ви налаштувались і були готові виконувати практичні завдання пізніше в процесі.</p>

<h4 id="Посібники">Посібники</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> — базове налаштування інструментів (15 хвилин читання)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a> (45 хвилин читання)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> (45 хвилин читання)</li>
</ul>

<h3 id="Семантика_та_структура_за_допомогою_HTML">Семантика та структура за допомогою HTML</h3>

<p>Час на виконання: 35–50 годин</p>

<h4 id="Передумови_3">Передумови</h4>

<p>Нічого, крім базової комп'ютерної грамотності та базового середовища для веб-розробки.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_2">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>

<h4 id="Модулі">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> (15–20 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a> (15–20 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Tables">HTML-таблиці</a> (5-10 годин читання/виконання практичних завдань)</li>
</ul>

<h3 id="Стилізація_та_розмітка_за_допомогою_CSS">Стилізація та розмітка за допомогою CSS</h3>

<p>Час на виконання: 90–120 гоодин</p>

<h4 id="Передумови_4">Передумови</h4>

<p>Перед початком вивчення CSS рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_3">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>

<h4 id="Модулі_2">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/First_steps">Перші кроки у CSS</a> (10–15 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Building_blocks">Будівельні блоки CSS</a> (35–45 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Styling_text">Стилізація тексту</a> (15–20 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/CSS_%D1%80%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0">CSS розмітка</a> (30–40 годин читання/виконання практичних завдань)</li>
</ul>

<h4 id="Додаткові_ресурси">Додаткові ресурси</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Web/CSS/%D0%A0%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0_%D0%BA%D1%83%D0%BB%D1%96%D0%BD%D0%B0%D1%80%D0%BD%D0%B0-%D0%BA%D0%BD%D0%B8%D0%B3%D0%B0">Кулінарна книга з CSS розмітки</a></li>
</ul>

<h3 id="Інтерактивність_за_допомогою_JavaScript">Інтерактивність за допомогою JavaScript</h3>

<p>Час на виконання: 135–185 годин</p>

<h4 id="Передумови_5">Передумови</h4>

<p>Перед початком вивчення JavaScript рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_4">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>

<h4 id="Модулі_3">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/First_steps">Перші кроки у JavaScript</a> (30–40 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%91%D1%83%D0%B4%D1%96%D0%B2%D0%B5%D0%BB%D1%8C%D0%BD%D1%96_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8">Будівельні блоки JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Client-side_web_APIs">Веб-APIs на стороні клієнта</a> (30–40 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%B8%D0%B9">Асинхронний JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
</ul>

<h3 id="Веб-форми_—_Робота_з_даними_користувача">Веб-форми — Робота з даними користувача</h3>

<p>Час на виконання: 40–50 годин</p>

<h4 id="Передумови_6">Передумови</h4>

<p>Вивчення форм вимагає знання з HTML, CSS та JavaScript. Враховуючи складність роботи з формами, це спеціальна тема.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_5">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>

<h4 id="Модулі_4">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Forms">Веб-форми</a> (40–50 годин)</li>
</ul>

<h3 id="Роблячи_Інтернет_доступним_для_кожного">Роблячи Інтернет доступним для кожного</h3>

<p>Час на виконання: 60–75 годин</p>

<h4 id="Передумови_7">Передумови</h4>

<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript. Багато методів та найкращих практик стосуються декількох технологій.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_6">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>

<h4 id="Модулі_5">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A2%D0%B5%D1%81%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BA%D1%80%D0%BE%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%96">Тестування кросбраузерності</a> (25–30 годин читання/виконання практичних завдань)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C">Доступність</a> (20–25 годин читання/виконання практичних завдань)</li>
</ul>

<h3 id="Сучасний_інструментарій">Сучасний інструментарій</h3>

<p>Час на виконання: 55–90 годин</p>

<h4 id="Передумови_8">Передумови</h4>

<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript, оскільки інструменти, що тут обговорюються, працюють вкупі із багатьма з цих технологій.</p>

<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_7">Як мені дізнатися, що я можу рухатися далі?</h4>

<p>У цьому наборі модулів немає конкретних статей з оцінюванням. Навчальні посібники з прикладами в кінці другого та третього модулів готують вас до розуміння основ сучасного інструментарію.</p>

<h4 id="Модулі_6">Модулі</h4>

<ul>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/Git_%D1%82%D0%B0_GitHub">Git та GitHub</a> (5 годин читання)</li>
 <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_%D1%96%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2_%D0%B2%D0%B5%D0%B1-%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння інструментів веб-розробки на стороні клієнта</a> (20–25 годин читання)</li>
 <li>
  <p><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_JavaScript-%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D1%96%D0%B2_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння JavaScript-фреймворків на стороні клієнта</a> (30-60 годин читання/виконання практичних завдань)</p>
 </li>
</ul>