---
title: Учебники
slug: Web/Tutorials
tags:
  - Веб-дизайн
  - Код
  - Руководство
translation_of: Web/Tutorials
---
<p>Ссылки на этой странице ведут к целому ряду учебных пособий и материалов. Если вы только начинаете учить основы, или же вы уже бывалый веб-разработчик, то здесь вы сможете найти полезные ресурсы для получения передового практического опыта.  <span id="result_box" lang="ru"><span class="hps">Эти ресурсы</span> <span class="hps">создаются</span> <span class="hps">дальновидными</span> <span class="hps">компаниями</span> <span class="atn hps">и веб-</span><span>разработчиками, включают</span> <span class="hps">открытые стандарты и</span> <span class="hps">лучшие</span> <span class="hps">практики</span> <span class="hps">для веб-разработки, </span><span class="hps">предоставляют</span> <span class="hps">или</span> <span class="hps">позволяют</span> <span class="hps">переводы</span> под открытой лицензией<span class="hps">, такой, как</span> <span class="hps">Creative Commons.</span></span></p>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation">HTML <span class="short_text" id="result_box" lang="ru"><span class="hps">учебники</span></span></h2>

<h3 id="Вводный_уровень">Вводный уровень</h3>

<dl>
 <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Введение в HTML</a></dt>
 <dd>Что такое HTML, что он делает, его краткая история, и что представляет собой структура HTML документа. В последующих статьях мы подробнее рассмотрим отдельные части HTML.</dd>
 <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Базовая структура веб-страницы</a> (SitePoint)</dt>
 <dd>Узнайте как HTML <span class="short_text" id="result_box" lang="ru"><span class="hps">элементы</span> <span class="hps">сочетаются</span> <span class="hps">в общую картину</span></span>.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Element Reference</a></dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Комплексный</span> <span class="hps">справочник</span> <span class="hps">для</span> <span class="hps">HTML</span> <span class="hps">элементов</span><span>,</span> <span class="hps">и</span><span>, как различные</span> <span class="hps">браузеры поддерживают</span> <span class="hps">их</span><span>.</span></span></dd>
 <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (Wikiversity)</dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Используйте эти</span> <span class="hps">задачки</span><span>, чтобы отточить свои</span> <span class="hps">HTML навыки</span> <span class="atn hps">(для </span><span>примера,</span> <span class="atn hps">"Какой элемент нужно использовать - </span><span class="atn hps"> &lt;</span><span>h2</span><span>&gt;</span> <span class="hps"> или</span> <span class="hps">&lt;STRONG&gt;</span><span>?</span><span>"</span><span>)</span><span>, фокусируясь на</span> <span class="hps">смысле разметки</span><span>.</span></span></dd>
 <dt></dt>
</dl>

<h3 id="Продвинутый_уровень">Продвинутый уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Tips for Authoring Fast-Loading HTML Pages</a></dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Оптимизация</span> <span class="hps">веб-страниц</span><span>, для большей адаптивности</span> <span class="hps">сайта</span> <span class="hps">и</span> <span class="hps">снижения нагрузки</span> <span class="hps">на веб-сервера</span> <span class="hps">и подключение к Интернету</span></span></dd>
 <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Tutorials</a> (HTML5 Rocks)</dt>
 <dd><span id="result_box" lang="ru"><span class="hps">Совершите экскурсию</span> <span class="hps">в код</span><span>, который использует</span> <span class="hps">возможности HTML5</span><span>.</span></span></dd>
 <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semantics in HTML5</a> (A List Apart)</dt>
 <dd>Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперёд).</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></dt>
 <dd>Узнайте, как рисовать с помощью скриптов, используя элемент <code>canvas</code>.</dd>
 <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
 <dd>Статьи о том, как  используется HTML5 прямо сейчас.</dd>
 <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">The Joy of HTML5 Audio</a> (Elated)</dt>
 <dd>Узнайте как использовать HTML аудио элемент для того, чтобы вставлять звуки в ваши веб-страницы. В учебнике представлено много примеров кода.</dd>
</dl>

<h2 class="Documentation" id="Documentation">Javascript учебники</h2>

<h3 id="Вводный_уровень_2">Вводный уровень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript First Steps</a></strong></dt>
 <dd>JavaScript руководство, написанное как часть MDN <a href="https://developer.mozilla.org/en-US/docs/Learn">Learning Area</a>.</dd>
</dl>

<dl>
 <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
 <dd>Codecademy это простой способ изучить JavaScript. Он интерактивный, и вы можете делать это вместе с друзьями</dd>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Getting Started with JavaScript</a></dt>
 <dd>Что такое JavaScript и как он может пригодиться вам?</dd>
 <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">JavaScript Best Practices</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
 <dd>Узнайте о некоторых из очевидных (и не очень очевидных) лучших практиках для написания кода на  JavaScript.</dd>
 <dt></dt>
</dl>

<h3 id="Средний_уровень">Средний уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A Re-Introduction to JavaScript</a></dt>
 <dd>Повторение языка программирования JavaScript для разработчиков среднего уровня.</dd>
 <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt>
 <dd>Полное руководство по "средним" и "продвинутым" методикам JavaScript.</dd>
 <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt>
 <dd>Введение в основы шаблонов проектирования JavaScript.</dd>
 <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">The JavaScript Programming Language</a> (YUI Blog)</dt>
 <dd>Douglas Crockford исследует язык, какой он есть сегодня, и как он пришёл, чтобы быть.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></dt>
 <dd>Узнайте об ООП в JavaScript.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>Для тех программистов, кто хочет быстро и хорошо выучить  JavaScript, а так же для тех, кто хочет углубить свои навыки или же изучить какие-то специфические темы.</dd>
</dl>

<h3 id="Продвинутый_уровень_2">Продвинутый уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt>
 <dd>Полное, регулярно обновляемое руководство по JavaScript для всех уровней обучения от начального до продвинутого.</dd>
 <dt><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</dt>
 <dd>Гид по "продвинутому" JavaScript от John Resig.</dd>
 <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</dt>
 <dd>Что такое Document Object Model, и зачем она нужна? Эта статья даёт вам постепенное введение в эту мощную способность JavaScript.</dd>
 <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">An Inconvenient API: The Theory of the DOM</a> (YUI Blog)</dt>
 <dd>Douglas Crockford объясняет Document Object Model.</dd>
 <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</dt>
 <dd>Douglas Crockford пристально следит за шаблоном кода, который JavaScript программисты могут выбрать в авторстве своих приложений.</dd>
 <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
 <dd>Документация из самых необычных частей JavaScript</dd>
 <dt><a href="http://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Which JavaScript Framework?</a> (StackOverflow)</dt>
 <dd>Советы по выбору основы JavaScript..</dd>
 <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</dt>
 <dd>Советы по улучшению производительности скачивания страниц, содержащих JavaScript</dd>
 <dt><a href="http://shichuan.github.io/javascript-patterns">JavaScript Patterns</a></dt>
 <dd>Шаблоны и антишаблоны проектирования JavaScript, которые охватывают функциональные шаблоны, шаблоны JQuery, шаблоны плагинов JQuery, шаблоны проектирования, основные шаблоны, literal patterns и шаблоны конструирования, шаблоны создания объекта, переиспользуемый шаблонный код, DOM.</dd>
 <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
 <dd>Статья с подробным исследованием, описывающая различные современные браузеры, их движки, рендеринг страниц и пр.</dd>
</dl>

<dl>
 <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>Надёжная и подробная информация об ECMAScript 2015.</dd>
 <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt>
 <dd>Видео о JavaScript.</dd>
</dl>

<dl>
 <dt>
 <h2 id="CSS_учебники">CSS учебники</h2>
 </dt>
</dl>

<h3 id="Вводный_уровень_3">Вводный уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></dt>
 <dd>Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведёт вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.</dd>
 <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt>
 <dd>Что такое классы в CSS?</dd>
 <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</dt>
 <dd>Использование CSS из внешних источников.</dd>
 <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</dt>
 <dd>Краткое руководство для начинающих по стилизации веб-страниц с помощью CSS.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></dt>
 <dd>Общие вопросы и ответы для начинающих.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">CSS Selectors</a></dt>
 <dd>Введение в CSS селекторы.</dd>
</dl>

<h3 id="Средний_уровень_2">Средний уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></dt>
 <dd>Полный справочник по CSS, с информацией о поддержке в Firefox и других браузерах.</dd>
 <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</dt>
 <dd>Улучшите ваши навыки CSS, и обратите внимание на то, где вам нужно больше практики.</dd>
 <dt><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</dt>
 <dd>Группировка, псевдоклассы и многое другое.</dd>
 <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt>
 <dd>Использование позиционирования в соответствии со стандартами, без использования таблиц.</dd>
 <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</dt>
 <dd>Прогрессивное улучшение в веб-страницы с помощью CSS.</dd>
 <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt>
 <dd>Дизайн вёрстки, который плавно изменяется вместе с размерами окна, основанный на сетке.</dd>
</dl>

<h3 id="Продвинутый_уровень_3">Продвинутый уровень</h3>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></dt>
 <dd>Как применять поворот, наклон, масштабирование и перемещение при помощи CSS</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></dt>
 <dd>CSS переходы, спецификация CSS3 по этой теме, как анимировать изменения стилей в CSS, вместо того, чтобы делать их "сразу".</dd>
 <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</dt>
 <dd>Возможности @font-face в CSS3, создание собственных шрифтов и работа с ними.</dd>
 <dt><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</dt>
 <dd>Введение в инструменты и методологии для разработки более краткого, масштабируемого и поддерживаемого CSS.</dd>
</dl>
</div>
</div>