Изучение веб-разработки
Добро пожаловать в обучающий раздел 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 в текущем местоположении, на которое указывает ваша командная строка/терминал, используйте следующую команду:
bashgit clone https://github.com/mdn/learning-area
-
Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/Проводника либо команды cd).
Вы можете обновить репозиторий learning-area
и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:
-
В командной строке / терминале войдите в директорию
learning-area
командойcd
. Например, если вы в родительской директории:bashcd learning-area
-
Обновите репозиторий, выполнив следующую команду:
bashgit pull
Связаться с нами
Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши списки рассылки или IRC-каналы. Мы хотели бы услышать от вас обо всём, чего не хватает или неправильно на нашем сайте, запросы новых тем по обучению, просьбы о помощи с тем, что вы не понимаете, или что-то ещё.
Если вам интересно создание или улучшение контента, посмотрите, как вы можете помочь, и оставайтесь на связи! Мы будем очень рады поговорить с вами, обучающийся ли вы, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.
Смотрите также
- Codecademy
-
Крутой интерактивный сайт для изучения языков программирования с нуля.
- Code.org
-
Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.
- EXLskills
-
Бесплатные и открытые курсы для обучения техническим навыкам, с наставничеством и проектным обучением.
- Карта веб-грамотности
-
Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.
- Преподавательская деятельность
-
Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.
- Edabit
-
Тысячи интерактивных задач JavaScript.