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

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

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

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

Что нового

Контент в обучающем разделе регулярно пополняется. Мы начали вести примечания к версии обучающего раздела (en-US), чтобы показать, что изменилось.

Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем форуме Discourse.

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

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

Начать

С чего начать

Я новичок

Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.

Уже что-то знаю

Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение HTML и CSS во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Вступление в CSS».

Погружаемся в программирование

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

Фреймворки и инструменты

Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению инструментов веб-разработки на стороне клиента (en-US), а затем углубиться в JavaScript-фреймворки для фронтенда и программирование веб-сайтов на стороне сервера.

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

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

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

Начало работы с вебом

Практическое введение в веб-разработку для начинающих.

Изучение HTML: руководства и уроки

HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.

CSS: стилизация веб-страниц

CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.

JavaScript: разработка клиентских скриптов для динамических веб-страниц

JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.

Веб-формы: работа с пользовательскими данными

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

Доступность: сделаем интернет доступным для всех

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

Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми

Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.

Инструменты и тестирование (en-US)

В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.

Серверное программирование веб-сайтов

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

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

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

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

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

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

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

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

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

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

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

Codecademy

Крутой интерактивный сайт для изучения языков программирования с нуля.

Code.org

Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.

EXLskills

Бесплатные и открытые курсы для обучения техническим навыкам, с наставничеством и проектным обучением.

Карта веб-грамотности

Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.

Преподавательская деятельность

Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.

Edabit

Тысячи интерактивных задач JavaScript.