---
title: Посібники
slug: Web/Tutorials
tags:
  - Керівництво
  - Код
  - Основи
  - Посібник
  - Початківець
  - вебдизайн
translation_of: Web/Tutorials
original_slug: Web/Посібники
---
<p>Посилання на цій сторінці ведуть до різноманітних посібників і навчальних матеріалів. Незалежно від того, чи ви початківець, чи маєте достатньо досвіду в веб-розробці, ви знайдете безліч корисних ресурсів та найкращих практик. Ці матеріали були створенні перспективними компаніями та веб-розробниками, котрі використовують відкриті стандарти та найкращі практики в веб-розробці, що дозволяє перекладати й розповсюджувати матеріали через ліцензію відкритого контенту, таку як Creative Commons.</p>

<h2 id="Для_початківців_Інтернету"><span class="tlid-translation translation" lang="uk"><span title="">Для початківців Інтернету</span></span></h2>

<dl>
 <dt><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом </a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title=""><em>Початок роботи з Інтернетом</em> - це стислий цикл, який знайомить вас із практичними можливостями веб-розробки.</span> <span title="">Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного простого коду.</span></span></dd>
</dl>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">HTML Посібники</h2>

<h3 id="Вступний_рівень">Вступний рівень</h3>

<dl>
 <dt>
 <p><strong><a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Введення в HTML</a></strong></p>
 </dt>
 <dd>
 <p>Цей модуль знайомить вас з важливими поняттями і синтаксисом, розглядає застосування HTML до тексту, як створювати гіперпосилання і як сформувати структуру HTML сторінки. Статті, які подано далі, розбирають кожну частину HTML більш суттєво.</p>
 </dd>
 <dt>
 <p><strong><a href="https://www.theblogstarter.com/html-for-beginners" rel="external">Створення простої веб-сторінки з HTML</a></strong></p>
 </dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Посібник з HTML для початківців, який містить пояснення загальних тегів, включаючи теги HTML5.</span> <span title="">Також включає покрокове керівництво зі створення базової веб-сторінки з прикладами коду.</span></span></dd>
 <dt><strong><a href="/uk/docs/Web/HTML/Елемент">MDN Довідник HTML елементів</a></strong></dt>
 <dd>Повний довідник HTML елементів та як вони підтримуються в різних браузерах.</dd>
 <dt><strong><a href="https://en.wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Задачі</a></strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Використовуйте ці задачі, щоб відточити свої навички HTML (наприклад, "Чи слід використовувати &lt;h2&gt; елемент або &lt;strong&gt; елемент?"),</span></span> фокусуючись на значенні розмітки.</dd>
 <dd>
 <h3 id="Середній_рівень">Середній рівень</h3>
 </dd>
 <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Мультимедіа та вбудовування</a></strong></dt>
 <dd>Цей модуль досліджує, як використовувати HTML для включення мультимедіа на ваші веб-сторінки, включаючи різні способи включення зображень, а також як вставити відео, аудіо та навіть цілі інші веб-сторінки.</dd>
 <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML таблиці</a></strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Представлення табличних даних на веб-сторінці зрозумілим</span></span>, {{glossary("Accessibility", "accessible")}} <span class="tlid-translation translation" lang="uk"><span title="">може бути проблемою.</span> <span title="">Цей модуль охоплює базову розмітку таблиці, а також більш складні функції, такі як реалізація підписів та резюме</span></span>.</dd>
</dl>

<h3 id="Професійний_рівень">Професійний рівень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Поради щодо створення швидкозавантажуваних HTML сторінок</a></strong></dt>
 <dd>Оптимізуйте веб-сторінки, щоб забезпечити більш зручний та швидкозавантажуваний сайт для відвідувачів, щоб зменшити навантаження на ваш веб-сервер і підключення до Інтернету.</dd>
 <dt><strong><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Підручники</a></strong></dt>
 <dd>Проведіть екскурсію по коду, який використовує функції HTML5.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Семантика в HTML5</a></strong></dt>
 <dd>Дізнайтеся про значущу розмітку, яка розширюється та сумісна з попередніми версіями.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Підручник</a></strong></dt>
 <dd>Дізнайтеся, як малювати графіку за допомогою скриптів та використовуючи елемент canvas (полотно).</dd>
 <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Доктор</a></strong></dt>
 <dd>Статті про використання HTML5 "тут і зараз".</dd>
 <dt><strong><a href="http://www.elated.com/articles/html5-audio/" rel="external">Використання HTML5 Audio</a></strong></dt>
 <dd>Дізнайтеся, як легко використовувати HTML аудіо елемент, <span class="tlid-translation translation" lang="uk"><span title="">щоб легко вставляти звуки на своїх веб-сторінках.</span> <span title="">У підручнику включено багато прикладів коду</span></span>.</dd>
 <dt><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">HTML forms</a></strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Форми є дуже важливою частиною Інтернету - вони забезпечують значну функціональність, необхідну для взаємодії з веб-сайтами, наприклад,</span> <span title="">реєстрація та вхід у систему, надсилання відгуків, покупка товарів онлайн тощо.</span> <span title="">Цей модуль розпочав роботу зі створення частин форм клієнтської форми.</span></span></dd>
</dl>

<h2 class="Documentation" id="Documentation" name="Documentation">Javascript Посібники</h2>

<h3 id="Вступний_рівень_2">Вступний рівень</h3>

<dl>
 <dt><strong><a href="http://www.codecademy.com/">Codecademy</a></strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Codecademy - це простий спосіб навчитися кодувати JavaScript.</span> <span title="">Це інтерактивна робота, і ви можете це робити з друзями.</span></span></dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Початок роботи з JavaScript</a></strong></dt>
 <dd>Що таке JavaScript і як це може допомогти вам?</dd>
 <dt><strong><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript найкращі практики</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</strong></dt>
 <dd>Дізнайтесь про деякі з очевидних (та не дуже) найкращі практики написання JavaScript.</dd>
</dl>

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

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Повторне введення в JavaScript</a></strong></dt>
 <dd>Резюме мови програмування JavaScript, спрямоване на розробників середнього рівня.</dd>
 <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Красномовний JavaScript</a></strong></dt>
 <dd>Вичерпний посібник з проміжних та розширених методологій JavaScript.</dd>
 <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Розмовляючи на JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Для програмістів, які хочуть швидко та правильно вивчити JavaScript, та для програмістів JavaScript, які хочуть поглибити свої навички та / або шукати конкретні теми.</span></span></dd>
 <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Основні шаблони дизайну JavaScript</a> (Addy Osmani)</strong></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Ознайомлення з основними моделями дизайну JavaScript.</span></span></dd>
 <dt><strong><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">Мова програмування JavaScript</a> (YUI Blog)</strong></dt>
 <dd>Douglas Crockford <span class="tlid-translation translation" lang="uk"><span title="">досліджує мову, якою вона є сьогодні, і якою вона стала</span></span>.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Введення в об'єктно-орієнтований JavaScript</a></strong></dt>
 <dd>Дізнайтеся про об'єктно-орієнтовану модель JavaScript.</dd>
 <dt>
 <h3 id="Розповсюджені_додатки">Розповсюджені додатки</h3>
 </dt>
 <dd>https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School - <span class="tlid-translation translation" lang="uk"><span title="">це дає гарне ознайомлення з деякими аспектами адонів Firefox</span></span>...</dd>
 <dt>.... <span class="tlid-translation translation" lang="uk"><span title="">Потрібні інші посилання на інші навчальні посібники про розповсюджені додатки</span></span>...</dt>
</dl>
</div>

<div class="section">
<h3 id="Професійний_рівень_2">Професійний рівень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></strong></dt>
 <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd>
 <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt>
 <dd>A series of books diving deep into the core mechanisms of the JavaScript language.</dd>
 <dt><strong><a href="http://ejohn.org/apps/learn/" rel="external">Learning Advanced JavaScript</a> (John Resig)</strong></dt>
 <dd>John Resig's guide to advanced JavaScript.</dd>
 <dt><strong><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducing the JavaScript DOM</a> (Elated)</strong></dt>
 <dd>What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.</dd>
 <dt><strong><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)</strong></dt>
 <dd>Douglas Crockford explains the Document Object Model.</dd>
 <dt><strong><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">Advanced JavaScript</a> (YUI Blog)</strong></dt>
 <dd>Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications.</dd>
 <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt>
 <dd>Documentation of the most quirky parts of JavaScript.</dd>
 <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>Reliable and in-depth information on ECMAScript 6.</dd>
 <dt><strong><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-Blocking JavaScript Downloads</a> (YUI Blog)</strong></dt>
 <dd>Tips on improving the download performance of pages containing JavaScript.</dd>
 <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></strong></dt>
 <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd>
 <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt>
 <dd>A detailed research article describing different modern browsers, their engines, page rendering etc.</dd>
</dl>

<h2 class="Documentation" id="Documentation" name="Documentation">CSS Посібники</h2>

<h3 id="Вступний_рівень_3">Вступний рівень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS Getting Started</a></strong></dt>
 <dd>This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</strong></dt>
 <dd>Що є класами в CSS?</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">External CSS</a> (Wikiversity)</strong></dt>
 <dd>Використання у CSS зовнішніньої таблиці стилів.</dd>
 <dt><strong><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Adding a Touch of Style</a> (W3C)</strong></dt>
 <dd>A brief beginner's guide to styling web pages with CSS.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></strong></dt>
 <dd>Загальні запитання та відповіді для початківців.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" title="http://codeavengers.com/">CSS Selectors</a></strong></dt>
 <dd>Знайомство з CSS селекторами</dd>
</dl>

<h3 id="Середній_рівень_3">Середній рівень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Reference</a></strong></dt>
 <dd>Повний довідник з CSS, де є деталі про підтримку CSS у Firefox та інших броузерах.</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (Wikiversity)</strong></dt>
 <dd>Flex your CSS skills, and see where you need more practice.</dd>
 <dt><strong><a href="http://www.html.net/tutorials/css/" rel="external">Intermediate CSS Concepts</a> (HTML.net)</strong></dt>
 <dd>Групування, псевдокласи, та інше.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</strong></dt>
 <dd>Використовуйте позиціювання для стандартного, безтабличного макету.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Progressive Enhancement with CSS</a> (A List Apart)</strong></dt>
 <dd>Втілення прогресивного покращення у ваші web сторінки за допомогою CSS.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</strong></dt>
 <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd>
</dl>

<h3 id="Професійний_рівень_3">Професійний рівень</h3>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></strong></dt>
 <dd>Застосування обертання, перекошування, маштабування та транслявання у CSS.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Transitions</a></strong></dt>
 <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd>
 <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</strong></dt>
 <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd>
 <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt>
 <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd>
</dl>
</div>
</div>