---
title: Изучение веб-разработки
slug: Learn
tags:
  - CSS
  - HTML
  - Index
  - Landing
  - Learn
  - NeedsContent
  - TopicStub
  - Web
  - Новичок
  - Обучающий раздел
  - Обучение
translation_of: Learn
---
<div>{{LearnSidebar}}</div>

<p class="summary">Добро пожаловать в обучающий раздел MDN. Эта серия статей направлена на то, чтобы предоставить начинающим с нуля в веб-программировании всё необходимое для того, чтобы начать разрабатывать сайты.</p>

<p>Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая <a href="https://developer.mozilla.org/ru/">остальные материалы MDN</a> и другие средние и продвинутые материалы, предполагающие существенные начальные знания.</p>

<p>Если вы начинаете с нуля, веб-разработка может оказаться непростой — мы будем держать вас за руку и давать вам достаточно подробностей, чтобы вы чувствовали себя комфортно и как следует изучили темы. Вы можете чувствовать себя как дома, будь вы студентом, изучающим веб-разработку (самостоятельно или на занятиях), преподавателем, ищущим материал для занятий, любителем или тем, кто просто хочет лучше разобраться в том, как работают веб-технологии.</p>

<h2 id="Что_нового">Что нового</h2>

<p>Контент в обучающем разделе регулярно пополняется. Мы начали вести <a href="/en-US/docs/Learn/Release_notes">примечания к версии обучающего раздела</a>, чтобы показать, что изменилось.</p>

<p>Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем <a href="https://discourse.mozilla.org/c/mdn/236">форуме Discourse</a>.</p>

<div class="callout">
<h3 id="Хотите_стать_фронтенд-разработчиком">Хотите стать фронтенд-разработчиком?</h3>

<p>Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.</p>

<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Начать</a></p>
</div>

<h2 id="С_чего_начать">С чего начать</h2>

<ul class="card-grid">
 <li><span>Я новичок</span> Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «<a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с вебом</a>», которая представляет собой практическое вступление в веб-разработку.</li>
 <li><span>Уже что-то знаю</span> Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение {{glossary("HTML")}} и {{glossary("CSS")}} во всех подробностях: начните с нашей статьи «<a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>», а затем загляните в статью «<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>».</li>
 <li><span>Погружаемся в программирование</span> Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в {{glossary("JavaScript")}} или разработку на стороне сервера. Загляните в разделы «<a href="/ru/docs/Learn/JavaScript/First_steps">Первые шаги в JavaScript</a>» и «<a href="/ru/docs/Learn/Server-side/First_steps">Первые шаги в программировании веб-сайтов на стороне сервера</a>».</li>
 <li><span>Фреймворки и инструменты</span> Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">инструментов веб-разработки на стороне клиента</a>, а затем углубиться в <a href="/ru/docs/Learn/Tools_and_testing/%D0%A4%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4_JavaScript_%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8">JavaScript-фреймворки для фронтенда</a> и <a href="/ru/docs/Learn/Server-side">программирование веб-сайтов на стороне сервера</a>.</li>
</ul>

<div class="note">
<p><strong>Примечание:</strong> в нашем <a href="/ru/docs/Glossary">глоссарии</a> вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «<a href="/ru/docs/Learn/Common_questions">Распространённые вопросы</a>».</p>
</div>

<p>{{LearnBox({"title":"Случайное слово из глоссария"})}}</p>

<h2 id="Изучаемые_темы">Изучаемые темы</h2>

<p>Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.</p>

<dl>
 <dt><a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с вебом</a></dt>
 <dd>Практическое введение в веб-разработку для начинающих.</dd>
 <dt><a href="/ru/docs/Learn/HTML">Изучение HTML: руководства и уроки </a></dt>
 <dd>HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.</dd>
 <dt><a href="/ru/docs/Learn/CSS">CSS: стилизация веб-страниц</a></dt>
 <dd>CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.</dd>
 <dt><a href="/ru/docs/Learn/JavaScript">JavaScript: разработка клиентских скриптов для динамических веб-страниц </a></dt>
 <dd>JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.</dd>
 <dt><a href="/ru/docs/Learn/HTML/Forms">Веб-формы: работа с пользовательскими данными </a></dt>
 <dd>Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.</dd>
 <dt><a href="/ru/docs/Learn/Доступность">Доступность: сделаем интернет доступным для всех </a></dt>
 <dd>Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.</dd>
 <dt><a href="/ru/docs/Learn/Performance">Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми </a></dt>
 <dd>Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing">Инструменты и тестирование</a></dt>
 <dd>В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.</dd>
 <dt><a href="/ru/docs/Learn/Server-side">Серверное программирование веб-сайтов</a></dt>
 <dd>Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).</dd>
</dl>

<h2 id="Получение_наших_примеров_кода">Получение наших примеров кода</h2>

<p>Представленные в обучающем разделе примеры кода <a href="https://github.com/mdn/learning-area/">доступны на GitHub</a>. Если вы хотите скопировать их все на свой компьютер, самый простой способ — <a href="https://github.com/mdn/learning-area/archive/master.zip">загрузить ZIP-архив с последней веткой основного кода</a>.</p>

<p>Если вы предпочитаете копировать репозиторий более гибким способом, позволяющим автоматические обновления, вы можете использовать следующую, более сложную инструкцию:</p>

<ol>
 <li><a href="https://git-scm.com/downloads">Установите Git</a> на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.</li>
 <li>Откройте <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">командную строку</a> (Windows) или терминал (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
 <li>Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду:
  <pre class="notranslate">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо <a href="https://ru.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команды cd</a>).</li>
</ol>

<p>Вы можете обновить репозиторий <code>learning-area</code> и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:</p>

<ol>
 <li>В командной строке / терминале войдите в директорию <code>learning-area</code> командой <code>cd</code>. Например, если вы в родительском каталоге:

  <pre class="notranslate">cd learning-area</pre>
 </li>
 <li>Обновите репозиторий, выполнив следующую команду:
  <pre class="notranslate">git pull</pre>
 </li>
</ol>

<h2 id="Связаться_с_нами">Связаться с нами</h2>

<p>Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши <a href="/ru/docs/MDN/Community/Conversations#Asynchronous_discussions">списки рассылки</a> или <a href="https://developer.mozilla.org/ru/docs/MDN/Community/Conversations#Chat_in_IRC">IRC-каналы</a>. Мы хотели бы услышать от вас о том, что на нашем сайте что-то отсутствует или неправильно, запросы новых тем по обучению, просьбы помощи с аспектами, которые вы не понимаете, или что-то ещё.</p>

<p>Если вам интересно создание или улучшение контента, посмотрите, <a href="/ru/Learn/How_to_contribute">как вы можете помочь</a>, и оставайтесь на связи! Мы будем очень рады поговорить с вами, будь вы обучающийся, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<dl>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>Крутой интерактивный сайт для изучения языков программирования с нуля.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
 <dd>бесплатный и открытые курсы для обучения техническим навыкам, с наставничеством и обучением на основе проектов</dd>
 <dt><a href="https://teach.mozilla.org/web-literacy/">Карта веб-грамотности</a></dt>
 <dd>Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.</dd>
 <dt><a href="https://teach.mozilla.org/activities">Преподавательская деятельность</a></dt>
 <dd>Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.</dd>
 <dt><a href="https://edabit.com/challenges">Edabit</a></dt>
 <dd>Тысячи интерактивных задач JavaScript.</dd>
</dl>