1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
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="in-page-callout webdev">
<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/Словарь">словаре</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>
|
