---
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/The_web_and_web_standards">История всемирной сети и веб-стандартов</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>