1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
---
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>
|
