Изучение веб-разработки

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

Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая остальные материалы MDN и другие средние и продвинутые материалы, предполагающие существенные начальные знания.

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

С чего начать

Я новичок: Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.
Уже что-то знаю: Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение HTML и CSS во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Введение в CSS».
Погружаемся в программирование: Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в JavaScript или разработку на стороне сервера. Загляните в разделы «Первые шаги в JavaScript» и «Первые шаги в программировании веб-сайтов на стороне сервера».
Фреймворки и инструменты: Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению инструментов веб-разработки на стороне клиента, а затем углубиться в JavaScript-фреймворки для фронтенда и программирование веб-сайтов на стороне сервера.

Примечание: В нашем глоссарии вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «Распространённые вопросы».

Хотите стать фронтенд-разработчиком?

Если вы хотите стать фронтенд-разработчиком и не знаете, что изучать в первую очередь, мы предлагаем использовать MDN Curriculum. Этот проект предоставляет структурированный план обучения, охватывающий основные навыки и практики, необходимые для того, чтобы стать успешным фронтенд-разработчиком, а также содержит рекомендуемые учебные ресурсы.

Начать

Изучаемые темы

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

Начало работы с вебом: Практическое введение в веб-разработку для начинающих.
Изучение HTML: руководства и уроки: HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.
CSS: стилизация веб-страниц: CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.
JavaScript: разработка клиентских скриптов для динамических веб-страниц: JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.
Веб-формы: работа с пользовательскими данными: Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.
Доступность: сделаем интернет доступным для всех: Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.
Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми: Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
Инструменты и тестирование: В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.
Серверное программирование веб-сайтов: Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).

Получение наших примеров кода

Представленные в обучающем разделе примеры кода доступны на GitHub. Если вы хотите скопировать их все на свой компьютер, самый простой способ — загрузить ZIP-архив с последней веткой основного кода.

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

Установите Git на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.
Откройте командную строку (Windows) или терминал (Linux, macOS).
Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка/терминал, используйте следующую команду:
bash
```
git clone https://github.com/mdn/learning-area
```
Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/Проводника либо команды cd).

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

В командной строке / терминале войдите в директорию learning-area командой cd. Например, если вы в родительской директории:
bash
```
cd learning-area
```
Обновите репозиторий, выполнив следующую команду:
bash
```
git pull
```

Связаться с нами

Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши списки рассылки или IRC-каналы. Мы хотели бы услышать от вас обо всём, чего не хватает или неправильно на нашем сайте, запросы новых тем по обучению, просьбы о помощи с тем, что вы не понимаете, или что-то ещё.

Если вам интересно создание или улучшение контента, посмотрите, как вы можете помочь, и оставайтесь на связи! Мы будем очень рады поговорить с вами, обучающийся ли вы, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.

Смотрите также

Codecademy: Крутой интерактивный сайт для изучения языков программирования с нуля.
Code.org: Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.
EXLskills: Бесплатные и открытые курсы для обучения техническим навыкам, с наставничеством и проектным обучением.
Карта веб-грамотности: Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.
Преподавательская деятельность: Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.
Edabit: Тысячи интерактивных задач JavaScript.