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
|
---
title: Фронтенд разработчик
slug: Learn/Front-end_web_developer
tags:
- Начинающий
- Стандарты веб-разработки
- Фронтенд
translation_of: Learn/Front-end_web_developer
original_slug: Learn/Фронтенд_разработчик
---
<p>{{learnsidebar}}<br>
<br>
Добро пожаловать на курс обучения Фронтенд разработчика!<br>
<br>
Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдете упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.</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>Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.<br>
<br>
Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел <a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с веб</a> модулем.</p>
<h2 id="Получить_помощь">Получить помощь</h2>
<p>Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.</p>
<p>Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья <a href="/en-US/docs//Learn/Learning_and_getting_help">Обучение и получение помощи</a> предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем <a href="https://discourse.mozilla.org/c/mdn/learn/">Форуме</a>.</p>
<p>Давайте начнём,</p>
<p>Удачи!</p>
<h2 id="Путь_обучения">Путь обучения</h2>
<h3 id="Начало_работы">Начало работы</h3>
<p>Время изучения: 1–2 часа</p>
<h4 id="Необходимые_условия_2">Необходимые условия</h4>
<p>Ничего, кроме базовой компьютерной грамотности.</p>
<h4 id="Как_понять_что_я_могу_двигаться_дальше">Как понять, что я могу двигаться дальше?</h4>
<p>В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.</p>
<h4 id="Основные_руководства">Основные руководства</h4>
<ul>
<li><a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a>— базовая настройка инструмента (15 минут чтения)</li>
<li><a href="ru/docs/Learn/Getting_started_with_the_web/%D0%92%D0%B5%D0%B1_%D0%B8_%D0%B2%D0%B5%D0%B1_%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D1%8B">История всемирной сети и веб-стандартов</a> (45 минут чтения)</li>
<li><a href="/en-US/docs//Learn/Learning_and_getting_help">Обучение и получение помощи</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="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a> (15–20 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a> (15–20 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/HTML/Tables">HTML таблицы</a> (5–10 часов чтения/упражнений)</li>
</ul>
<h3 id="Стилизация_и_размещение_с_помощью_CSS"><span>Стилизация и размещение с помощью CSS</span></h3>
<p>Время завершения: 90–120 часов</p>
<h4 id="Необходимые_условия_4">Необходимые условия</h4>
<p>Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>.</p>
<h4 id="Как_понять_что_я_могу_двигаться_дальше_3">Как понять, что я могу двигаться дальше?</h4>
<p>Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
<h4 id="Основные_модули_2">Основные модули</h4>
<ul>
<li><a href="/ru/docs/Learn/CSS/First_steps">Первые шаги в CSS</a> (10–15 часов чтения/упражнений)</li>
<li>С<a href="/ru/docs/Learn/CSS/Building_blocks">труктурные элементы CSS</a> (35–45 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/CSS/Styling_text">Стилизирование текста</a> (15–20 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/CSS/CSS_layout">CSS разметка</a> (30–40 часов чтения/упражнений)</li>
</ul>
<h4 id="Дополнительные_ресурсы">Дополнительные ресурсы</h4>
<ul>
<li><a href="/ru/docs/Web/CSS/Layout_cookbook">Книга рецептов CSS</a></li>
</ul>
<h3 id="Интерактивность_с_JavaScript">Интерактивность с JavaScript</h3>
<p>Время завершения: 135–185 часов</p>
<h4 id="Необходимые_условия_5">Необходимые условия</h4>
<p>Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>.</p>
<h4 id="Как_понять_что_я_могу_двигаться_дальше_4">Как понять, что я могу двигаться дальше?</h4>
<p>Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
<h4 id="Основные_модули_3">Основные модули</h4>
<ul>
<li><a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги в JavaScript</a> (30–40 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы Javascript</a> (25–35 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/JavaScript/Client-side_web_APIs">Клиентский веб API</a> (30–40 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/JavaScript/Объекты">Введение в объекты Javascript</a> (25–35 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/JavaScript/Asynchronous">Асинхронный 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="/ru/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="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing">Кросс-браузерное тестирование</a> (25–30 часов чтения/упражнений)</li>
<li><a href="/ru/docs/Learn/Доступность">Доступность</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>В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.</p>
<h4 id="Основные_модули_6">Основные модули</h4>
<ul>
<li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git и Github</a> (5 часов чтения)</li>
<li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Понимание инструментов на стороне клиента</a> (20–25 часов чтения/упражнений)</li>
<li>
<p><a href="/ru/docs/Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки">Понимание JavaScript-фреймворков для фронтенда</a> (30-60 часов чтения/упражнений)</p>
</li>
</ul>
|
