initial commit

56 files changed, 9978 insertions, 0 deletions

diff --git a/files/uk/learn/common_questions/index.html b/files/uk/learn/common_questions/index.html
new file mode 100644
index 0000000000..cef04ddf9c
--- /dev/null
+++ b/files/uk/learn/common_questions/index.html
@@ -0,0 +1,133 @@
+---
+title: Поширені питання
+slug: Learn/Common_questions
+tags:
+  - Інфраструктура
+  - Мережа
+  - Механізми мережі
+  - Навчання
+  - Написання сценаріїв
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Цей розділ надає відповіді на поширені питання, які проте не обов'язково є частиною основного матеріалу для вивчення (як-от статті по <a href="/uk/docs/Learn/HTML">HTML</a> чи <a href="/uk/docs/Learn/CSS">CSS</a>.) Ці статті надані для самостійного опрацювання.</p>
+
+<h2 id="Як_працює_мережа">Як працює мережа</h2>
+
+<p>Розділ розкриває механізм мережі - це питання, що відносяться до загальних знань про екосистему мережі та принципу її роботи.</p>
+
+<dl>
+ <dt>
+ <h3 id="Як_працює_Інтернет"><a href="/uk/docs/Learn/Common_questions/How_does_the_Internet_work">Як працює Інтернет?</a></h3>
+ </dt>
+ <dd>Інтернет - це основа мережі, технічна інфраструктура, завдяки якій вона можлива. В найпростішому вигляді - це велика мережа комп'ютерів, що спілкуються один з одним. В цій статті розглядається принцип його роботи на базовому рівні.</dd>
+ <dt>
+ <h3 id="Яка_різниця_між_веб-сторінкою_сайтом_веб-сервером_та_пошуковою_системою"><a href="/uk/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Яка різниця між веб-сторінкою, сайтом, веб-сервером та пошуковою системою?</a></h3>
+ </dt>
+ <dd><font>У цій статті ви дізнаєтесь про різні веб-поняття: веб-сторінки, веб-сайти, веб-сервери та пошукові системи. Нові користувачі Інтернету часто плутають  або використовуються неправильно ці терміни. Давайте дізнаємося, що вони означають!</font></dd>
+ <dt>
+ <h3 id="Що_таке_URL"><a href="/uk/docs/Learn/Common_questions/What_is_a_URL">Що таке URL?</a></h3>
+ </dt>
+ <dd>Поряд з {{Glossary("Hypertext","гіпертекстом")}} та {{Glossary("HTTP")}}, URL - одне з ключових понять мережі. Це механізм, який використовують {{Glossary("Browser","переглядачі")}} для отримання будь-яких доступних  в мережі ресурсів.</dd>
+ <dt>
+ <h3 id="Що_таке_доменне_ім'я"><a href="/uk/docs/Learn/Common_questions/What_is_a_domain_name">Що таке доменне ім'я?</a></h3>
+ </dt>
+ <dd><font>Доменні імена є ключовою частиною інфраструктури Інтернету. Вони надають адресу для будь-якого веб-сервера, доступного в Інтернеті, у вигляді, що легко читається людиною</font></dd>
+ <dt>
+ <h3 id="Що_таке_веб-сервер"><a href="/uk/docs/Learn/Common_questions/What_is_a_web_server">Що таке веб-сервер?</a></h3>
+ </dt>
+ <dd><font>Термін "веб-сервер" може означати обладнання або програмне забезпечення, яке обслуговує веб-сайти клієнтів в Інтернеті, а також обидві частини, що працюють разом. </font><font>У цій статті ми розглянемо, як працюють веб-сервери, та чому вони важливі.</font></dd>
+ <dt>
+ <h3 id="Що_таке_гіперпосилання"><a href="/uk/docs/Learn/Common_questions/What_are_hyperlinks">Що таке гіперпосилання?</a></h3>
+ </dt>
+ <dd>В цій статті ми розглянемо, що таке {{Glossary("Hyperlinks","гіперпосилання")}}, та чому вони мають значення. </dd>
+</dl>
+
+<h2 id="Інструменти_та_налаштування">Інструменти та налаштування</h2>
+
+<p>Питання, що пов'язані з інструментами/програмами, які ви можете використати для створення сайтів.</p>
+
+<dl>
+ <dt>
+ <h3 id="Скільки_коштує_щось_зробити_в_мережі"><a href="/uk/docs/Learn/Common_questions/How_much_does_it_cost">Скільки коштує щось зробити в мережі?</a></h3>
+ </dt>
+ <dd>Коли ви запускаєте сайт, це може вам нічого не коштувати або ваші витрати можуть бути захмарні. В статті ми вияснимо скільки що коштуватиме, та що ви матимете за плату чи даром.</dd>
+ <dt>
+ <h3 id="Які_програми_потрібні_для_створення_сайту"><a href="/uk/docs/Learn/Common_questions/What_software_do_I_need">Які програми потрібні для створення сайту?</a></h3>
+ </dt>
+ <dd>Ця стаття про програмні компоненти, що необхідні вам для редагування, вивантаження чи перегляду сайту.</dd>
+ <dt>
+ <h3 id="Які_є_текстові_редактори"><a href="/uk/docs/Learn/Common_questions/Available_text_editors">Які є текстові редактори?</a></h3>
+ </dt>
+ <dd>В статті окреслено  деякі речі, про які потрібно замислитися перед вибором та встановленням текстового редактора для веб-розробки.</dd>
+ <dt>
+ <h3 id="Що_таке_Інструменти_розробника_в_браузері"><a href="/uk/docs/Learn/Common_questions/What_are_browser_developer_tools">Що таке "Інструменти розробника" в браузері?</a></h3>
+ </dt>
+ <dd>Кожен браузер має набір інструментів розробника для налагодження HTML, CSS та іншого веб-коду. Дізнайтесь, як використовувати їхні основні функції.</dd>
+ <dt>
+ <h3 id="Як_переконаєтись_що_сайт_працює_належним_чином"><a href="/uk/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Як переконаєтись, що сайт працює належним чином?</a></h3>
+ </dt>
+ <dd>Ви оприлюднили сайт в Інтернеті — чудово! Та чи впевнені ви, що він працює належним чином? Дізнайтеся про кілька основних способів усунення несправностей.</dd>
+ <dt>
+ <h3 id="Як_налаштувати_локальний_сервер_для_тестування"><a href="/uk/docs/Learn/Common_questions/set_up_a_local_testing_server">Як налаштувати локальний сервер для тестування?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>Стаття про налаштовування, на вашому комп'ютері, простого локального сервера для  тестування та основи його використання.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="Як_вивантажити_файли_на_веб-сервер"><a href="/uk/docs/Learn/Common_questions/Upload_files_to_a_web_server">Як вивантажити файли на веб-сервер?</a></h3>
+ </dt>
+ <dd>Як оприлюднити сайт в Інтернеті, щоб люди мала доступ до нього з їхніх комп'ютерів? Зробимо це за допомогою одого з найпоширеніших способів — інструментів <a class="glossaryLink" href="https://developer.mozilla.org/uk/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a></dd>
+ <dt>
+ <h3 id="Як_користуватись_GitHub_сторінками"><a href="/uk/docs/Learn/Common_questions/Using_GitHub_Pages">Як користуватись GitHub сторінками </a><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">?</a></h3>
+ </dt>
+ <dd>Ця стаття містить загальний посібник по публікації вмісту за допомогою gh-сторінок GitHub.</dd>
+ <dt>
+ <h3 id="Як_розмістити_свій_сайт_на_Google_App_Engine"><a href="/uk/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Як розмістити свій сайт на Google App Engine?</a></h3>
+ </dt>
+ <dd>Шукаєте місце для розміщення вашого веб-сайту? Це покроковий посібник по розміщенню вашого сайту на Google App Engine.</dd>
+ <dt>
+ <h3 id="Які_є_інструменти_для_налагодження_та_підвищення_ефективності_сайту"><a href="/uk/docs/Tools/Performance">Які є інструменти для налагодження та підвищення ефективності сайту?</a></h3>
+ </dt>
+ <dd>В наборі статей показано, як використовувати інструменти розробника в Firefox для налагодження та підвищення ефективності сайту. А саме — інструментів для перевірки використання пам'яті, дерева викликів JavaScript, кількості виділених версій DOM та інших.</dd>
+</dl>
+
+<h2 id="Дизайн_та_доступність">Дизайн та доступність </h2>
+
+<p>У розділі перелічені питання, пов'язані з естетикою, структурою сторінки, методами  досягнення доступності тощо.</p>
+
+<dl>
+ <dt>
+ <h3 id="Як_почати_розробку_сайту"><a href="/uk/docs/Learn/Common_questions/Thinking_before_coding">Як почати розробку сайту?</a></h3>
+ </dt>
+ <dd>Стаття про найважливіший перший крок кожного проекту: визначте, що ви хочете цим досягти.</dd>
+ <dt>
+ <h3 id="Що_містять_поширені_веб-макети"><a href="/uk/docs/Learn/Common_questions/Common_web_layouts">Що містять поширені веб-макети?</a></h3>
+ </dt>
+ <dd>При проектуванні сторінок сайту, добре мати уявлення про найпоширеніші макети. Ця стаття про декілька типових веб-макетів та їх окремі компоненти.</dd>
+ <dt>
+ <h3 id="Що_таке_доступність"><a href="/uk/docs/Learn/Common_questions/What_is_accessibility">Що таке доступність?</a></h3>
+ </dt>
+ <dd>Стаття містить основні поняття, що визначають доступність сайтів.</dd>
+ <dt>
+ <h3 id="Як_ми_можемо_спроектувати_сайт_для_різноманітних_користувачів"><a href="/uk/docs/Learn/Common_questions/Design_for_all_types_of_users">Як ми можемо спроектувати сайт для різноманітних користувачів?</a></h3>
+ </dt>
+ <dd>Стаття містить основні методи, які допоможуть вам розробляти сайти для будь-яких користувачів — переваги швидкого доступу та подібні речі.</dd>
+ <dt>
+ <h3 id="Які_особливості_HTML_сприяють_доступності"><a href="/uk/docs/Learn/Common_questions/HTML_features_for_accessibility">Які особливості HTML сприяють доступності?</a></h3>
+ </dt>
+ <dd>В статті описуються специфічні особливості HTML, які можна використати, щоб зробити веб-сторінку більш доступною для людей з різними обмеженнями.</dd>
+</dl>
+
+<h2 id="Питання_з_HTML_CSS_та_JavaScript">Питання з HTML, CSS та JavaScript</h2>
+
+<p>Про поширені вирішеня проблем в HTML/CSS/JavaScript читайте в наступних статтях:</p>
+
+<ul>
+ <li><a href="/uk/docs/Learn/HTML/Howto">Скористайтесь HTML, щоб вирішити поширені проблеми</a></li>
+ <li><a href="/uk/docs/Learn/CSS/Howto">Скористайтесь CSS, щоб вирішити поширені проблеми</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Скористайтесь JavaScrip, щоб вирішити поширені проблеми</a></li>
+</ul>
diff --git a/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html b/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..5ebd96246f
--- /dev/null
+++ b/files/uk/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,95 @@
+---
+title: Як налаштувати локальний тестовий сервер?
+slug: Learn/Common_questions/set_up_a_local_testing_server
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p> Стаття про те, як налаштувати на вашому комп'ютері простий локальний тестовий сервер та основи його використання.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Вам потрібно спочатку дізнатись, <a href="/uk/docs/Learn/How_the_Internet_works">як працює інтернет</a> і <a href="/uk/docs/Learn/What_is_a_Web_server">що таке веб-сервер</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Ви дізнаєтеся, як налаштувати локальний тестовий сервер.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Локальні_файли_порівняно_з_віддаленими">Локальні файли порівняно з віддаленими</h2>
+
+<p>Протягом більшої частини вивчення зони навчання ми пропонуємо вам просто відкрити свої приклади безпосередньо в браузері. Це можна зробити двічі клацнувши файл HTML, перетягнувши його в вікно браузера або вибравши «Файл»&gt; «Відкрити ...» та знайти файл HTML. Є ще багато способів це зробити.</p>
+
+<p>Якщо шлях веб-адреси починається з <code>file://</code>, а потім йде шлях до файлу на локальному жорсткому диску, використовується локальний файл. На відміну від цього, якщо ви переглядаєте один з наших прикладів, розміщених на GitHub (або приклад на якомусь іншому віддаленому сервері), веб-адреса почнеться з <code>http://</code> або <code>https://</code>, щоб показати, що файл буде отримано через HTTP .</p>
+
+<h2 id="Проблема_з_тестуванням_локальних_файлів">Проблема з тестуванням локальних файлів</h2>
+
+<p>Деякі приклади не працюватимуть, якщо ви відкриєте їх як локальні файли. Це може бути з різних причин, найбільш імовірно:</p>
+
+<ul>
+ <li><strong>Вони мають асинхронні запити. </strong>Деякі переглядачі (включаючи Chrome) не запускають асинхроні запити (див. <a href="/uk/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Отримання даних зі сервера</a>), якщо ви запустите приклад з локального файлу. Це пов'язано з обмеженнями безпеки (для отримання додаткової інформації про веб-безпеку, читайте <a href="/uk/docs/Learn/Server-side/First_steps/Website_security">Безпека сайту</a>).</li>
+ <li><strong>Вони мають мову на стороні сервера.</strong> Мови на стороні сервера (наприклад, PHP або Python) вимагають спеціального сервера для інтерпретації коду та отримання результатів.</li>
+</ul>
+
+<h2 id="Запуск_простого_локального_HTTP-сервера">Запуск простого локального HTTP-сервера</h2>
+
+<p>Щоб подолати проблему з асинхронними запитами, та перевірити такі приклади, ми повинні запустити їх на локальному веб-сервері. Для наших цілей одним з найпростіших способів зробити це — використати модуль Python <code>SimpleHTTPServer</code>.</p>
+
+<p>Як це зробити:</p>
+
+<ol>
+ <li>
+  <p>Встановити Python. Якщо ви використовуєте Linux або Mac OS X, він вже має бути доступним у вашій системі. Якщо ви користувач Windows, ви можете отримати інсталятор з домашньої сторінки Python та дотримуватесь інструкцій, щоб встановити його:</p>
+
+  <ul>
+   <li>Перейдіть до <a href="https://www.python.org/">python.org</a></li>
+   <li>Натисніть кнопку «Download» віберіть «Windows».</li>
+   <li>У списку виберіть виконавчий файл <em>Windows x86 executable installer</em> або <em>Windows x86-64 executable installer</em> та завантажте його. </li>
+   <li>Після завантаження запустіть його.</li>
+   <li>На першій сторінці встановлення переконайтеся, що відмітили "Додати Python 3.xxx до PATH".</li>
+   <li>Натисніть кнопку «Встановити», а після завершення інсталяції — «Закрити».</li>
+  </ul>
+ </li>
+ <li>
+  <p>Відкрийте командний рядок (Windows) або термінал (OS X/Linux). Щоб перевірити, чи встановлено Python, введіть таку команду:</p>
+
+  <pre class="brush: bash notranslate">python -V</pre>
+ </li>
+ <li>
+  <p>Ви маєте отриматити номер версії. Якщо це так, то перейдіть до каталогу, в якому ваш приклад, за допомогою команди <code>cd</code>.</p>
+
+  <pre class="brush: bash notranslate"># include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..</pre>
+ </li>
+ <li>
+  <p>Щоб запустити сервер у цьому каталозі, введіть команду:</p>
+
+  <pre class="brush: bash notranslate"># If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>Зазвичай він буде запускати вміст каталогу на локальному веб-сервері по порту 8000. Ви можете перейти на цей сервер, зайшовши на адресу <code>localhost: 8000</code> у своєму переглядачі. Ви побачите там вміст вказаного каталогу — натисніть файл HTML, який ви хочете запустити.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка</strong>: Якщо у вас вже щось працює по порту 8000, ви можете вибрати інший, запустивши команду сервера з іншим номером порту, як-от <code>python -m http.server 7800</code> (Python 3.x) або <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Після цього ви можете отримати доступ до свого вмісту по <code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Запуск_мов_серверної_частини_локально">Запуск мов серверної частини локально</h2>
+
+<p>Модуль Python <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> корисний, але він не знає як запустити код написаний на таких мовах як Python, PHP чи JavaScript. To handle that you'll need something more — exactly what you'll need depends on the server-side language you are trying to run. Here are a few examples:</p>
+
+<ul>
+ <li>To run Python server-side code, you'll need to use a Python web framework. You can find out how to use the Django framework by reading <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> is also a good (slightly less heavyweight) alternative to Django. To run this you'll need to <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, then install Flask using <code>pip3 install flask</code>. At this point you should be able to run the Python Flask examples using for example <code>python3 python-example.py</code>, then navigating to <code>localhost:5000</code> in your browser.</li>
+ <li>To run Node.js (JavaScript) server-side code, you'll need to use raw node or a framework built on top of it. Express is a good choice — see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>To run PHP server-side code, you'll need a server setup that can interpret PHP. Good options for local PHP testing are <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, and PHP/Python/Perl). These are complete packages that create local setups to allow you to run the Apache server, PHP, and MySQL databases.</li>
+</ul>
diff --git a/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..5444f5713a
--- /dev/null
+++ b/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,337 @@
+---
+title: Cascade and inheritance
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Мета  цього уроку - розвинути розуміння найфундаментальніших концептів CSS — каскадності (cascade), специфічності (specificity), і наслідування (inheritance) — ці принципи контролюють те, як  CSS застосовується до елементів HTML і як вирішуються конфлікти між правилами CSS.</p>
+
+<p>Опрацювання цього уроку може здатися не настільки актуальним на даному етапі і занадто академічним порівняно з іншими частинами курсу, однак розуміння цих концепцій збереже вам багато часу в майбутньому. Ми заохочуємо вас опрацювати цю частину курсу уважно і впевнитися, що ви розумієте ці концепти перед тим, як рухатися далі. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn about the cascade and specificity, and how inheritance works in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Правила_CSS_що_конфліктують_між_собою">Правила CSS, що конфліктують між собою</h2>
+
+<p>CSS означає Cascading Style Sheets (Каскадні Таблиці Стилів), і розуміння першого слова <em>каскадний</em> є надзвичайно важливим — спосіб поведінки каскадів це ключ до розуміння CSS.</p>
+
+<p>Рано чи пізно, ви будете працювати над проектом і потрапите в ситуацію, коли правила CSS, які повинні були б застосуватися до якогось певного HTML елемента, не працюють.  Як правило, проблема полягатиме в тому, що ви створили два різних СSS правила, які можуть потенційно застосуватися до одного і того самого елемента. <strong>Каскад (cascade)</strong>, так само як і тісно пов*язаний із ним концепт <strong>специфічності - </strong>це механізми, які контролюють те, яке саме із CSS правил застосується в випадку такого конфлікту. Правило, яке застосується до вашого елементу може бути далеко не тим, на котре ви очікували. Для того, щоб уникнути таких ситуацій, потрібно зрозуміти, як саме працюють ці механізми. </p>
+
+<p>Так само важливим є і концепт <strong>наслідування (inheritance)</strong>, який полягає в тому, що деякі CSS властивості (CSS properties) по замовчуванню наслідують ознаки своїх батьківських елементів (parent elements), а деякі ні. Це так само може призвести до неочікуваних ситуацій.</p>
+
+<p>Для початку, поглянемо на концепції із якими ми матимемо справу в загальному, а потім розберемо кожну із них по черзі, щоб побачити те, як вони співпрацюють між собою і іншими правилами CSS, які ви написали. Зрозуміти ці концепти може бути непросто спочатку, однак в процесі написання і практикування з CSS, вам буде все легше і легше  розуміти і те, як саме воно працює. </p>
+
+<h3 id="Каскад_cascade">Каскад (cascade)</h3>
+
+<p>Каскад — на найпростішому рівні, цей принцип полягає в тому, що порядок CSS правил має значення. В випадках, коли можна застосувати одне із двох різних правил із однаковою специфічністю, вибирається те правило, яке зазначене останнім. </p>
+
+<p>В нашому прикладі ми маємо два правила, що могли б бути застосовані до елемента  <code>h1</code>. Елемент <code>h1</code> в кінцевому результаті виявиться синім — ці два правила мають ідентичний селектор, і, як результат, однакову специфічність, а тому той, який іде останнім по порядку, "перемагає".</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Специфічність_specificity">Специфічність (specificity)</h3>
+
+<p>Принцип специфічності полягає в тому, як саме браузер вирішує те, яке із CSS правил застосувати тоді, коли різні правила відносяться до різних селеторів, але все одно можуть бути застосовані до одного і того самого елемента. В певному сенсі це міра того, наскільки специфічним буде вибір селектора.</p>
+
+<ul>
+ <li>Селектор що відноситься до <strong>типу елемента</strong> (наприклад, h1, p) буде менш специфічним. Він вибирає всі елементи однакового типу, що з*являться на сторінці, а тому матиме низький показник. </li>
+ <li>Селектор, що відноситься до<strong> класу </strong>буде специфічнішим, оскільки він вибере лише ті елементи на сторінці, що матимуть атрибут <code>class</code> із якимось специфічним значенням.  Тому його показник буде вищим.</li>
+</ul>
+
+<p>Час для прикладу: ми знову бачимо 2 правила, що можуть бути застосовані до елемента  <code>h1</code>. В кінцквому результаті  <code>h1</code> стає червоним — селектор по класу надає своєму правилу більшої специфічності,  а тому браузер застосує саме його, не зважаючи на те, що по порядку він йде другим.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Ми пояснимо розрахунок специфічності далі у цій статті. </p>
+
+<h3 id="Inheritance">Inheritance</h3>
+
+<p>Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.</p>
+
+<p>For example, if you set a <code>color</code> and <code>font-family</code> on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Some properties do not inherit — for example if you set a {{cssxref("width")}} of 50% on an element, all of its descendants do not get a width of 50% of their parent's width. If this was the case, CSS would be very frustrating to use!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: On MDN CSS property reference pages you can find a technical information box, usually at the bottom of the specifications section, which lists a number of data points about that property, including whether it is inherited or not. See the <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a>, for example.</p>
+</div>
+
+<h2 id="Understanding_how_the_concepts_work_together">Understanding how the concepts work together</h2>
+
+<p>These three concepts together control which CSS applies to what element; in the below sections we'll see how they work together. It can sometimes seem a little bit complicated, but you will start to remember them as you get more experienced with CSS, and you can always look up the details if you forget! Even experienced developers don't remember all the details.</p>
+
+<h2 id="Understanding_inheritance">Understanding inheritance</h2>
+
+<p>We'll start with inheritance. In the example below we have a {{cssxref("ul")}}, with two levels of unordered lists nested inside it. We have given the outer <code>&lt;ul&gt;</code> a border, padding, and a font color.</p>
+
+<p>The color has applied to the direct children, but also the indirect children — the immediate child <code>&lt;li&gt;</code>s, and those inside the first nested list. We have then added a class of <code>special</code> to the second nested list and applied a different color to it. This then inherits down through its children.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Things like widths (as mentioned above), margins, padding, and borders do not inherit. If a border were to be inherited by the children of our list, every single list and list item would gain a border — probably not an effect we would ever want!</p>
+
+<p>Which properties are inherited by default and which aren't is largely down to common sense.</p>
+
+<h3 id="Controlling_inheritance">Controlling inheritance</h3>
+
+<p>CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to <code>inherit</code> instead.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Resets the property to its natural value, which means that if the property is naturally inherited it acts like <code>inherit</code>, otherwise it acts like <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There is also a newer value, {{cssxref("revert")}}, which has limited browser support.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: See {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} for more information on each of these and how they work.</p>
+</div>
+
+<p>We can look at a list of links and explore how the universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to get to grips with HTML and CSS.</p>
+
+<p>For example:</p>
+
+<ol>
+ <li>The second list item has the class <code>my-class-1</code> applied. This sets the color of the a element nested inside to inherit. If you remove the rule how does it change the color of the link?</li>
+ <li>Do you understand why the third and fourth links are the color that they are? Check the description of the values above if not.</li>
+ <li>Which of the links will change color if you define a new color for the <code>&lt;a&gt;</code> element — for example <code>a { color: red; }</code>?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Resetting_all_property_values">Resetting all property values</h3>
+
+<p>The CSS shorthand property <code>all</code> can be used to apply one of these inheritance values to (almost) all properties at once. Its value can be any one of the inheritance values (<code>inherit</code>, <code>initial</code>, <code>unset</code>, or <code>revert</code>). It's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes.</p>
+
+<p>In the below example we have two blockquotes. The first has styling applied to the blockquote element itself, the second has a class applied to the blockquote which sets the value of <code>all</code> to <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Try setting the value of <code>all</code> to some of the other available values and observe what the difference is.</p>
+
+<h2 id="Розуміння_каскадів">Розуміння каскадів</h2>
+
+<p>Ми тепер розуміємо, чому параграф, що знаходиться всередині структури HTML документа, має такий самий коляр як і той, що вказаний в CSS для елементу  &lt;body&gt;. З початкових уроків ми розуміємо також  from the introductory lessons we have an understanding of how to change the CSS applied to something at any point in the document — whether by assigning CSS to an element or creating a class. We will now take a proper look at how the cascade defines which CSS rules apply when more than one thing could style an element.</p>
+
+<p>There are three factors to consider, listed here in decreasing order of importance. Earlier ones overrule later ones:</p>
+
+<ol>
+ <li>Importance</li>
+ <li>Specificity</li>
+ <li>Source order</li>
+</ol>
+
+<p>We will look at these from the bottom up, to see how browsers figure out exactly what CSS should be applied.</p>
+
+<h3 id="Source_order">Source order</h3>
+
+<p>We have already seen how source order matters to the cascade. If you have more than one rule, which has exactly the same weight, then the one that comes last in the CSS will win. You can think of this as rules which are nearer the element itself overwriting early ones until the last one wins and gets to style the element.</p>
+
+<h3 id="Specificity">Specificity</h3>
+
+<p>Once you understand the fact that source order matters, at some point you will run into a situation where you know that a rule comes later in the stylesheet, but an earlier, conflicting, rule is applied. This is because that earlier rule has a <strong>higher specificity</strong> — it is more specific, and therefore is being chosen by the browser as the one that should style the element.</p>
+
+<p>As we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the element.</p>
+
+<p>Something to note here is that although we are thinking about selectors, and the rules that are applied to the thing they select, it isn't the entire rule which is overwritten, only the properties which are the same.</p>
+
+<p>This behavior helps avoid repetition in your CSS. A common practice is to define generic styles for the basic elements, and then create classes for those which are different. For example, in the stylesheet below we have defined generic styles for level 2 headings, and then created some classes which change only some of the properties and values. The values defined initially are applied to all headings, then the more specific values are applied to the headings with the classes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Let's now have a look at how the browser will calculate specificity. We already know that an element selector has low specificity and can be overwritten by a class. Essentially a value in points is awarded to different types of selectors, and adding these up gives you the weight of that particular selector, which can then be assessed against other potential matches.</p>
+
+<p>The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:</p>
+
+<ol>
+ <li><strong>Thousands</strong>: Score one in this column if the declaration is inside a {{htmlattrxref("style")}} attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.</li>
+ <li><strong>Hundreds</strong>: Score one in this column for each ID selector contained inside the overall selector.</li>
+ <li><strong>Tens</strong>: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.</li>
+ <li><strong>Ones</strong>: Score one in this column for each element selector or pseudo-element contained inside the overall selector.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The universal selector (<code>*</code>), combinators (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), and negation pseudo-class (<code>:not</code>) have no effect on specificity.</p>
+</div>
+
+<p>The following table shows a few isolated examples to get you in the mood. Try going through these, and making sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN  <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Thousands</th>
+   <th scope="col">Hundreds</th>
+   <th scope="col">Tens</th>
+   <th scope="col">Ones</th>
+   <th scope="col">Total specificity</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Before we move on, let's look at an example in action.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>So what's going on here? First of all, we are only interested in the first seven rules of this example, and as you'll notice, we have included their specificity values in a comment before each one.</p>
+
+<ul>
+ <li>The first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra ID selector in the chain: its specificity is 201 vs. 101.</li>
+ <li>The third and fourth selectors are competing over the styling of the link's text color — the second one wins and makes the text white because although it has one less element selector, the missing selector is swapped out for a class selector, which is worth ten rather than one. So the winning specificity is 113 vs. 104.</li>
+ <li>Selectors 5–7 are competing over the styling of the link's border when hovered. Selector six clearly loses to five with a specificity of 23 vs. 24 — it has one fewer element selectors in the chain. Selector seven, however, beats both five and six — it has the same number of sub-selectors in the chain as five, but an element has been swapped out for a class selector. So the winning specificity is 33 vs. 23 and 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: This has only been an approximate example for ease of understanding. In actuality, each selector type has its own level of specificity that cannot be overwritten by selectors with a lower specificity level. For example, a <em>million</em> <strong>class</strong> selectors combined would not be able to overwrite the rules of <em>one</em> <strong>id</strong> selector.</p>
+
+<p>A more accurate way to evaluate specificity would be to score the specificity levels individually starting from highest and moving on to lowest when necessary. Only when there is a tie between selector scores within a specificity level do you need to evaluate the next level down; otherwise, you can disregard the lower specificity level selectors since they can never overwrite the higher specificity levels.</p>
+</div>
+
+<h3 id="!important">!important</h3>
+
+<p>There is a special piece of CSS that you can use to overrule all of the above calculations, however you should be very careful with using it — <code>!important</code>. This is used to make a particular property and value the most specific thing, thus overriding the normal rules of the cascade.</p>
+
+<p>Take a look at this example where we have two paragraphs, one of which has an ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand:</p>
+
+<ol>
+ <li>You'll see that the third rule's {{cssxref("color")}} and {{cssxref("padding")}} values have been applied, but the {{cssxref("background-color")}} hasn't. Why? Really all three should surely apply, because rules later in the source order generally override earlier rules.</li>
+ <li>However, The rules above it win, because class selectors have higher specificity than element selectors.</li>
+ <li>Both elements have a {{htmlattrxref("class")}} of <code>better</code>, but the 2nd one has an {{htmlattrxref("id")}} of <code>winning</code> too. Since IDs have an <em>even higher</em> specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are <em>very specific</em> in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.</li>
+ <li>The 2nd element <em>does</em> get the red background color, but no border. Why? Because of the <code>!important</code> declaration in the second rule — including this after <code>border: none</code> means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The only way to override this <code>!important</code> declaration would be to include another <code>!important</code> declaration on a declaration with the <em>same specificity</em> later in the source order, or one with a higher specificity.</p>
+</div>
+
+<p>It is useful to know that <code>!important</code> exists so that you know what it is when you come across it in other people's code. <strong>However, we strongly recommend that you never use it unless you absolutely have to.</strong> <code>!important</code> changes the way the cascade normally works, so it can make debugging CSS problems really hard to work out, especially in a large stylesheet.</p>
+
+<p>One situation in which you may have to use it is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override a style that can't be overridden in any other way. But really, don't use it if you can avoid it.</p>
+
+<h2 id="The_effect_of_CSS_location">The effect of CSS location</h2>
+
+<p>Finally, it is also useful to note that the importance of a CSS declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.</p>
+
+<h2 id="To_summarize">To summarize</h2>
+
+<p>Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:</p>
+
+<ol>
+ <li>Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).</li>
+ <li>Normal declarations in user style sheets (custom styles set by a user).</li>
+ <li>Normal declarations in author style sheets (these are the styles set by us, the web developers).</li>
+ <li>Important declarations in author style sheets</li>
+ <li>Important declarations in user style sheets</li>
+</ol>
+
+<p>It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using <code>!important</code> in their rules.</p>
+
+<h2 id="Active_learning_playing_with_the_cascade">Active learning: playing with the cascade</h2>
+
+<p>In this active learning, we'd like you to experiment with writing a single new rule that will override the color and background color that we've applied to the links by default. Can you use one of the special values we looked at in the {{anch("Controlling inheritance")}} section to write a declaration in a new rule that will reset the background color back to white, without using an actual color vff</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">take a look at the solution here</a>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p>
+
+<h2 id="Whats_next">What's next</h2>
+
+<p>If you understood most of this article, then well done — you've started getting familiar with the fundamental mechanics of CSS. Next up, we'll look at selectors in detail.</p>
+
+<p>If you didn't fully understand the cascade, specificity, and inheritance, then don't worry! This is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky. We'd advise that you return to this article a few times as you continue through the course, and keep thinking about it.</p>
+
+<p>Refer back here if you start to come across strange issues with styles not applying as expected. It could be a specificity issue.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/uk/learn/css/building_blocks/index.html b/files/uk/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..39839cd182
--- /dev/null
+++ b/files/uk/learn/css/building_blocks/index.html
@@ -0,0 +1,90 @@
+---
+title: Будівельні блоки CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p>
+
+<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should have:</p>
+
+<ol>
+ <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li>
+ <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt>
+ <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt>
+ <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt>
+ <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt>
+ <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt>
+ <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt>
+ <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt>
+ <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt>
+ <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt>
+ <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt>
+ <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt>
+ <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt>
+ <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt>
+ <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt>
+ <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt>
+ <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt>
+ <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd>
+</dl>
diff --git a/files/uk/learn/css/css_розмітка/index.html b/files/uk/learn/css/css_розмітка/index.html
new file mode 100644
index 0000000000..14ce8f9c63
--- /dev/null
+++ b/files/uk/learn/css/css_розмітка/index.html
@@ -0,0 +1,70 @@
+---
+title: CSS розмітка
+slug: Learn/CSS/CSS_розмітка
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already:</p>
+
+<ol>
+ <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
+ <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt>
+ <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
+ <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt>
+ <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt>
+ <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt>
+ <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt>
+ <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt>
+ <dd>
+ <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt>
+ <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
+ <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd>
+</dl>
diff --git a/files/uk/learn/css/first_steps/index.html b/files/uk/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..30aa7f0214
--- /dev/null
+++ b/files/uk/learn/css/first_steps/index.html
@@ -0,0 +1,53 @@
+---
+title: Перші кроки у CSS
+slug: Learn/CSS/First_steps
+tags:
+  - CSS
+  - Модулі
+  - Навчання
+  - Перші кроки
+  - Посадка
+  - Початок
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets) використовується для стилювання та розміщення веб-сторінок - наприклад, для зміни шрифту, кольору, розміру та інтервалу вашого вмісту, розділення його на кілька стовпців або додавання анімації та інших декоративних функцій. Цей модуль забезпечує легкий початок вашого шляху до оволодіння CSS основами того, як він працює, як виглядає синтаксис і як ви можете почати використовувати його для додавання стилю до HTML.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перш ніж запустити цей модуль, ви повинні мати:</p>
+
+<ol>
+ <li>Основне ознайомлення з використанням комп'ютерів та пасивним використанням Інтернету (тобто перегляд його, споживання вмісту.)</li>
+ <li>Основне робоче середовище, створене, як детально описано в <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення,</a> і розуміння того, як створювати файли та керувати ними, як детально описано у розділі <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">«Робота з файлами».</a><br>
+  Основне ознайомлення з HTML, як обговорювалося в модулі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> .</li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка. Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де у вас немає можливості створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад </strong><a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<p>Цей модуль містить наступні статті, які допоможуть вам ознайомитись з усією базовою теорією CSS та нададуть вам можливість перевірити деякі навички.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></dt>
+ <dd>У цій статті ми візьмемо простий HTML-документ і застосуємо до нього CSS, вивчивши деякі практичні речі щодо мови.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Яка структура CSS</a></dt>
+ <dd>Тепер, коли ви маєте уявлення про те, що таке CSS та основи його використання, саме час трохи заглибитись у структуру самої мови. Ми вже зустріли багато обговорених тут концепцій; ви можете повернутися до цього, щоб скласти резюме, якщо ви знайдете якісь пізніші поняття заплутані.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></dt>
+ <dd>Ми вивчили основи CSS, для чого він потрібен та як писати прості таблиці стилів. У цьому уроці ми розглянемо, як браузер приймає CSS та HTML і перетворює їх у веб-сторінку.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуючи свої нові знання</a></dt>
+ <dd>З того, що ви вивчили на останніх кількох уроках, ви повинні виявити, що ви можете форматувати прості текстові документи за допомогою CSS, щоб додати до них свій власний стиль. Ця стаття дає вам шанс це зробити.</dd>
+</dl>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Проміжна веб-грамотність 1: Вступ до CSS</a></dt>
+ <dd>Чудовий курс від Mozilla foundation, який вивчає та перевіряє багато навичок, про які говорилося в модулі «Вступ до CSS». Дізнайтеся про стилізацію HTML-елементів на веб-сторінці, селекторах CSS, атрибутах та значеннях.</dd>
+</dl>
diff --git a/files/uk/learn/css/first_steps/що_таке_css/index.html b/files/uk/learn/css/first_steps/що_таке_css/index.html
new file mode 100644
index 0000000000..a1ee6d30ea
--- /dev/null
+++ b/files/uk/learn/css/first_steps/що_таке_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Що таке CSS?
+slug: Learn/CSS/First_steps/Що_таке_CSS
+tags:
+  - CSS
+  - Вступ до CSS
+  - Модулі
+  - Навчання
+  - Синтаксис
+  - Специфікація
+  - новачок
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Основна комп'ютерна грамотність, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">встановлено базове програмне забезпечення</a>, основні знання про <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">робота з файлами,</a> та HTML базовий (вивчыть <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Мета:</p>
+
+
+   </th>
+   <td>To learn what CSS is.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.</p>
+
+<h2 id="Для_чого_CSS">Для чого CSS?</h2>
+
+<p>Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A <strong>document</strong> is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.</p>
+
+<p>Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка</strong>: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.</p>
+</div>
+
+<p>CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.</p>
+
+<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
+
+<p>CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".</p>
+
+<p>У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).</p>
+
+<p>Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.</p>
+
+<p>Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">значення кольорів</a>. У нас також є  <code>font-size</code> влыстивість. Ця властивість може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">розмір одиниць</a>.</p>
+
+<p>Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка</strong>: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN <a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!</p>
+</div>
+
+<h2 id="CSS_Модулі">CSS Модулі</h2>
+
+<p>Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).</p>
+
+<p>На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.</p>
+
+<p>Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> та <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> властивості, що визначаються в цьому модулі. І ти будеш прав.</p>
+
+<h3 id="CSS_специфікація">CSS специфікація</h3>
+
+<p>Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.</p>
+
+<p>CSS не відрізняється - він розроблений групою в межах W3C під назвою <a href="https://www.w3.org/Style/CSS/">CSS Робоча група</a>. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.</p>
+
+<p>Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!</p>
+
+<p>Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.</p>
+
+<h2 id="Підтримка_браузера">Підтримка браузера</h2>
+
+<p>Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a>. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.</p>
+
+<p>Далі йде таблиця даних compat для властивості CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> .</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Що_далі">Що далі</h2>
+
+<p>Тепер, коли ви зрозуміли, що таке CSS, перейдемо до <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a> де ви можете почати самостійно писати деякі CSS.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Як структурується CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуйте свої нові знання</a></li>
+</ol>
diff --git a/files/uk/learn/css/index.html b/files/uk/learn/css/index.html
new file mode 100644
index 0000000000..c4fd0dedfc
--- /dev/null
+++ b/files/uk/learn/css/index.html
@@ -0,0 +1,68 @@
+---
+title: Learn to style HTML using CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Style
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets — або {{glossary("CSS")}} — це перша технологія, яку слід почати вивчати після {{glossary("HTML")}}. Хоча HTML використовується для визначення структури та семантики вашого вмісту, CSS використовується для його стилізації та викладки. Наприклад, ви можете використовувати CSS, щоб змінити шрифт, колір, розмір та інтервал вашого вмісту, розділити його на кілька стовпців або додати анімацію та інші декоративні функції.</p>
+
+<h2 id="Шляхи_навчання">Шляхи навчання</h2>
+
+<p>Ви повинні вивчити основи HTML, перш ніж спробувати будь-який CSS. Рекомендуємо спочатку опрацювати наш Вступ до модуля HTML. У цьому модулі ви дізнаєтесь про:</p>
+
+<ul>
+ <li>CSS, почніть з модуля <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></li>
+ <li>Більш продвинуті <a href="/en-US/docs/Learn/HTML#Modules">HTML м</a>одулі</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, і як використовувати його для додавання динамічної функціональності веб-сторінкам</li>
+</ul>
+
+<p>Після того, як ви зрозумієте основи HTML, рекомендуємо вам вивчити HTML і CSS одночасно, рухаючись вперед і назад між двома темами. Це тому, що HTML набагато цікавіше і набагато цікавіше вчитися, коли ви застосовуєте CSS, і ви не можете навчитися CSS, не знаючи HTML.</p>
+
+<p>Перш ніж розпочати цю тему, ви також повинні ознайомитись з використанням комп’ютерів та пасивним використанням Інтернету (тобто, просто переглянувши його, споживаючи вміст). Ви повинні мати базове робоче середовище, налаштоване як детально<br>
+ в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення</a> та зрозуміти, як створити та керувати файлами, як це детально описано в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> — обидва вони є нашими частинами <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> повний модуль для початківців.</p>
+
+<p>Рекомендується опрацювати <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> перш ніж перейти до цієї теми. Однак це не зовсім необхідне, оскільки значна частина того, що розглядається в статті про основи CSS, також висвітлено в нашому модулі <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, хоча і набагато детальніше.</p>
+
+<h2 id="Модулі">Модулі</h2>
+
+<p>Ця тема містить наступні модулі в запропонованому порядку для роботи над ними. Ви обов'язково повинні почати з першого.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></dt>
+ <dd>Цей модуль розпочинає роботу з основами роботи CSS, включаючи використання селекторів та властивостей; написання правил CSS; застосування CSS до HTML; визначення довжини, кольору та інших одиниць у CSS; контроль каскаду та успадкування; розуміння основ моделі коробки; та налагодження CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt>
+ <dd>Тут ми розглядаємо основи стилізації тексту, включаючи встановлення шрифту, жирності та курсиву; інтервал між рядками та літерами; і скидання тіней та інших функцій тексту. Ми округляємо модуль, дивлячись на застосування спеціальних шрифтів до вашої сторінки та стилістичні списки та посилання.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Стильні коробки</a></dt>
+ <dd>Далі ми розглянемо вікна стилізації, один із основних кроків щодо створення веб-сторінки. У цьому модулі ми резюмуємо модель коробки, потім переглядаємо керування макетами коробки, встановлюючи накладки, межі та поля, встановлюючи власні кольори фону, зображення та фантазійні функції, такі як тіні для крапель та фільтри на коробках.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS макет</a></dt>
+ <dd>На даний момент ми вже розглядали основи CSS, як стилювати текст та як стилізувати та маніпулювати полями, у яких розміщений ваш вміст. Тепер прийшов час розглянути, як розташувати вікна в потрібному місці по відношенню до вікна перегляду та один до одного. Ми забезпечили необхідні передумови, тому тепер ми можемо зануритися в глиб CSS-макета, переглядаючи різні налаштування дисплея, сучасні інструменти компонування, такі як flexbox, CSS-сітка та позиціонування, а також деякі застарілі методи, про які ви все ще можете знати.</dd>
+ <dt>Чуйний дизайн (TBD)</dt>
+ <dd>Завдяки такій кількості різних типів пристроїв, які сьогодні можуть переглядати Інтернет, <a href="/en-US/docs/Web/Guide/Responsive_design">чуйний веб-дизайн</a> (RWD) стала основним навиком веб-розробки. Цей модуль буде охоплювати основні принципи та інструменти роботи RWD; поясніть, як застосувати різні CSS до документа залежно від функцій пристрою, таких як ширина екрана, орієнтація та роздільна здатність; та вивчити технології, доступні для обслуговування різних відео та зображень залежно від таких функцій.</dd>
+</dl>
+
+<h2 id="Вирішення_поширених_проблем_CSS">Вирішення поширених проблем CSS</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Використовуйте CSS для вирішення загальних проблем</a> надає посилання на розділи вмісту, що пояснюють, як використовувати CSS для вирішення дуже поширених проблем під час створення веб-сторінки.</p>
+
+<p>Ви спочатку застосовуватимете кольори до елементів HTML та їх фонів; зміни розміру, форми та положення елементів; і додавати та визначати межі елементів. Але не так багато, що ти не зможеш зробити, коли добре зрозумієш навіть основи CSS. Одна з найкращих речей щодо вивчення CSS - це те, що, як тільки ви знаєте основи, зазвичай у вас є гарне відчуття того, що можна, а чого не можна зробити, навіть якщо ви ще не знаєте, як це зробити!</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS в MDN</a></dt>
+ <dd>Основна точка входу для CSS-документації на MDN, де ви знайдете детальну довідкову документацію щодо всіх функцій мови CSS. Хочете знати всі цінності, які може спричинити властивість? Це гарне місце.</dd>
+</dl>
diff --git a/files/uk/learn/css/styling_text/index.html b/files/uk/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..46c343f406
--- /dev/null
+++ b/files/uk/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Стилізація тексту
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>
diff --git a/files/uk/learn/css/styling_text/стилі_списків/index.html b/files/uk/learn/css/styling_text/стилі_списків/index.html
new file mode 100644
index 0000000000..da8f62ab84
--- /dev/null
+++ b/files/uk/learn/css/styling_text/стилі_списків/index.html
@@ -0,0 +1,394 @@
+---
+title: Стилі списків
+slug: Learn/CSS/Styling_text/Стилі_списків
+tags:
+  - CSS
+  - Початківець
+  - Спискі
+  - Стаття
+  - Стилі
+  - Текст
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">Здебільшого <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#List">Списки</a> ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Основна комп'ютерна грамотність, основи HTML (вивчення <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступу до HTML</a>), основи CSS (вивчення <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступу до CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основи тексту та шрифтів CSS.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Простий_приклад_списку">Простий приклад списку</h2>
+
+<p>Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступний на Github</a> ( також перевірте <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">цей код</a>)</p>
+
+<p>Приклад HTML для нашого списку виглядає так:</p>
+
+<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Humous&lt;/li&gt;
+  &lt;li&gt;Pitta&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Humous&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pitta&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Якщо ви зараз перейдете до живого прикладу та вивчіть елементи списку, що використовують <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">інструменти розробника браузера</a>, ви помітите пара стилів по замовчуванням:</p>
+
+<ul>
+ <li>{{htmlelement("ul")}} і {{htmlelement("ol")}} елементи мають верхній і нижній {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>)  і {{cssxref("padding-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>Елементи списку ({{htmlelement("li")}} елементи) не встановлено за замовчуванням інтервал.</li>
+ <li>{{htmlelement("dl")}} елемент має верхню та нижню частини {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>), але не набір набивних покриттів.</li>
+ <li>{{htmlelement("dd")}} елементи мають {{cssxref("margin-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>{{htmlelement("p")}} елементи, які ми включили для довідки, мають вершину та нижню частину {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>),так само, як і різні типи списку.</li>
+</ul>
+
+<h2 id="Обробка_списку_інтервалів">Обробка списку інтервалів</h2>
+
+<p>При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">закінчений стиль приклад</a>  в Github, і <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">знайти вихідний код</a> також.)</p>
+
+<p>CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:</p>
+
+<pre class="brush: css">/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>Перше правило встановлює розмір шрифту на рівні сайту та розмір шрифту в базовому розмірі 10 пікселів. Вони успадковуються на всій сторінці.</li>
+ <li>Правила 2 та 3 встановлюють відносні розміри шрифтів для заголовків, різні типи списку (діти елементів списку успадковують їх) та абзаци. Це означає, що кожен параграф і список матимуть однаковий розмір шрифту та верхній та нижній інтервал, що допоможе зберегти вертикальний ритм узгоджено.</li>
+ <li>Правило 4 встановлює те ж саме {{cssxref("line-height")}} на абзаци та елементи списку - тому абзаци та окремий елемент списку матимуть однаковий інтервал між рядками. Це також допоможе зберегти вертикальний ритм узгоджено.</li>
+ <li>Правила 5 та 6 застосовуються до списку опису - ми встановили те ж саме <code>line-height</code> в термінах та описі списку опису, як ми робили з абзацами та елементами списку. Знову ж таки, послідовність хороша! Ми також робимо, що описові терміни мають жирний шрифт, тому вони виглядають простіше.<span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="List-specific_styles">List-specific styles</h2>
+
+<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li>
+ <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li>
+ <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li>
+</ul>
+
+<h3 id="Bullet_styles">Bullet styles</h3>
+
+<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>Це дає нам такий вигляд:</p>
+
+<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p>
+
+<h3 id="Bullet_position">Bullet position</h3>
+
+<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p>
+
+<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3>
+
+<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p>
+
+<pre class="brush: css">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p>
+
+<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p>
+
+<pre class="brush: css">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>Here we've done the following:</p>
+
+<ul>
+ <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li>
+ <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li>
+ <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows:
+  <ul>
+   <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li>
+   <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
+   <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
+   <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>This gives us the following result:</p>
+
+<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="list-style_shorthand">list-style shorthand</h3>
+
+<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p>
+
+<pre class="brush: css">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>Could be replaced by this:</p>
+
+<pre>ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p>
+
+<h2 id="Controlling_list_counting">Controlling list counting</h2>
+
+<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p>
+
+<h3 id="start">start</h3>
+
+<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed">reversed</h3>
+
+<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<h3 id="value">value</h3>
+
+<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p>
+</div>
+
+<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2>
+
+<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p>
+
+<ol>
+ <li>Give the unordered list square bullets.</li>
+ <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li>
+ <li>Give the ordered list lower alphabetical bullets.</li>
+ <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li>
+</ol>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/learn/getting_started_with_the_web/css_basics/index.html b/files/uk/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..61069ad322
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,273 @@
+---
+title: Основи CSS
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - CSS
+  - Веб
+  - Навчання
+  - Початківцям
+  - Стилізація
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код, що використовується для стилізації сайту. В <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основах CSS</a> надається інформація про стилізацію для початківців. Ми відповімо на такі питання: яким чином зробити текст чорним або червоним? Як розмістити контент саме у тому місці, де ми хочемо його бачити на сторінці? Як задавати фонові кольори та зображення?</p>
+</div>
+
+<h2 id="Що_таке_CSS_насправді">Що таке CSS насправді?</h2>
+
+<p>Як і HTML, CSS не є справжньою мовою програмування. Це лише <em>мова таблиць стилів</em>, яка дозволяє задавати стилі обраним елементам у HTML документах. Наприклад, для того, щоб вибрати <strong>усі</strong> параграфи на HTML сторінці та зробити колір їхнього тексту червоним, потрібно написати такий CSS:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Давайте спробуємо: вставте ці три рядки CSS у новий файл у вашому редакторі коду, та збережіть файл як <code>style.css</code> у вашій теці <code>styles</code>.</p>
+
+<p>Окрім того, нам необхідно приєднати CSS до вашого HTML документу, інакше стилі CSS не вплинуть на те, як браузер відобразить HTML документ. (Якщо ви щойно приєдналися до нашого проекту, прочитайте <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Роботу з файлами</a> та <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML </a>щоб дізнатися, що необхідно зробити на початку.) Відкрийте ваш файл <code style="font-style: normal; font-weight: normal;">index.html</code> та вставте наступний рядок кудись у head, між тегами <code style="font-style: normal; font-weight: normal;">&lt;head&gt;</code> і <code style="font-style: normal; font-weight: normal;">&lt;/head&gt;</code>:</p>
+
+<ol>
+ <li>
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Збережіть <code>index.html</code> та відкрийте його у вашому браузері. Ви побачите щось на зразок наведеного зображення:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Якщо текст ваших параграфів став червоним, вітаємо! Ви щойно написали ваш перший CSS!</p>
+
+<h3 id="Анатомія_правила_CSS">Анатомія правила CSS</h3>
+
+<p>Подивимось на попередній CSS більш детально:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Вся структура називається "<strong>rule set" — "набір правил" </strong>(частіше, скорочено, "правило"). Його частини також мають свої назви:</p>
+
+<dl>
+ <dt>Selector — Селектор</dt>
+ <dd>Назва елементу HTML на початку правила. Селектор вибирає елемент чи елементи, які будуть стилізовані (у нашому випадку, елементи p). Для стилізації інших елементів просто змініть селектор.</dd>
+ <dt>Declaration — Визначення (декларація)</dt>
+ <dd>Одне правило на зразок <code>color: red;</code> вказує, яку властивість елементу ви бажаєте стилізувати.</dd>
+ <dt>Properties — Властивості</dt>
+ <dd>Шляхи, якими ви можете стилізувати даний HTML елемент. (У цьому випадку, <code>color </code>— це властивість елементів <code>p</code>). У CSS ви обираєте властивості, які хочете змінити у вашому правилі.</dd>
+ <dt>Property value — Значення властивості</dt>
+ <dd>Праворуч від властивості, після двокрапки, ми вказуємо <strong>значення властивості, </strong>обираючи з багатьох можливих значень для наданої властивості (є багато інших значень властивості <code>color</code> окрім <code>red</code>).</dd>
+</dl>
+
+<p>Зверніть увагу на інші важливі частини синтаксису:</p>
+
+<ul>
+ <li>Кожен набір правил (окрім селектора) повинен бути оточений фігурними дужками (<code>{}</code>).</li>
+ <li>У кожному визначенні використовується двокрапка для відокремлення властивостей від їх значення.</li>
+ <li>У кожному наборі правил використовується крапка з комою для відокремлення декларацій від наступних.</li>
+</ul>
+
+<p>Отже, для того, щоб змінити декілька значень властивостей одночасно, їх достатньо записати, розділяючи крапкою з комою, наприклад:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Вибір_багатьох_елементів_одночасно">Вибір багатьох елементів одночасно</h3>
+
+<p>Ви також можете вибрати декілька типів елементів та застосувати один набір правил для них усіх. Додайте декілька селекторів, розділяючи їх комою, наприклад:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Різні_типи_селекторів">Різні типи селекторів</h3>
+
+<p>Є велика кількість різних типів селекторів. Вище ми розглянули лише <strong>селектори елементів</strong>, які вибирають всі елементи заданого типу у наданих HTML документах. Але ми можемо застосовувати більш специфічні селектори. Подивіться на найбільш розповсюджені типи селекторів:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Назва селектору</th>
+   <th scope="col">Що він вибирає</th>
+   <th scope="col">Приклад</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Селектор елементу (іноді називають селектором тегу)</td>
+   <td>Всі HTML елементи даного типу</td>
+   <td><code>p</code><br>
+    Вибирає <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор по ID</td>
+   <td>Елемент на сторінці, який має заданий ID (на HTML сторінці не може бути декілька елементів з однаковими ID).</td>
+   <td><code>#my-id</code><br>
+    Вибирає <code>&lt;p id="my-id"&gt;</code> чи <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор по класу</td>
+   <td>Елементи на сторінці, які мають задані класи (на сторінці можуть бути елементи з однаковими класами).</td>
+   <td><code>.my-class</code><br>
+    Вибирає <code>&lt;p class="my-class"&gt;</code> та <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектор по атрибуту</td>
+   <td>Елементи на сторінці із вказаним атрибутом</td>
+   <td><code>img[src]</code><br>
+    Вибирає <code>&lt;img src="myimage.png"&gt;</code> але не <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Селектори псевдокласів</td>
+   <td>Вказані елементи, але тільки тоді, коли вони знаходяться у вказаному стані, наприклад, коли на них наводять курсор миші.</td>
+   <td><code>a:hover</code><br>
+    Вибирає <code>&lt;a&gt;</code>, але тільки коли курсор миші вказує на посилання.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Інші селектори ви можете побачити на сторінці <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p>
+
+<h2 id="Шрифти_та_текст">Шрифти та текст</h2>
+
+<p>Дослідивши деякі основи CSS, давайте додамо більше правил та інформації в файл <code>style.css,</code> щоб зробити наш приклад більш привабливим. Для початку покращимо вигляд наших шрифтів та тексту.</p>
+
+<ol>
+ <li>В першу чергу, знайдіть збережений вами <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">вивід з сайту Google Fonts</a>, який ви зберегли раніше. Додайте елемент <code>&lt;link ... &gt;</code> у head файлу <code>index.html</code> (будь-куди між тегами <code>&lt;head&gt;</code> та <code>&lt;/head&gt;</code>). Елемент буде виглядати приблизно так:
+
+  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Видаліть правило, яке зараз знаходиться у вашому файлі <code>style.css</code>. Це був гарний приклад, але червоний текст виглядає не дуже гарно.</li>
+ <li>Додайте наступні строки до вашого файлу стилей, замінивши placeholder на рядок <code>font-family</code>, який ви отримали з сайту Google Fonts. (<code>font-family</code> означає шрифти, які ви застосуєте для вашого тексту). Це правило встановить глобальний базовий шрифт і його розмір для всієї сторінки (так як <code>&lt;html&gt;</code> — це батьківський елемент всієї сторінки, всі елементи у ньому успадкують однаковий <code>font-size та</code> <code>font-family</code>):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px означає 'пікселі': базовий розмір шрифта встановлюється рівним 10 пікселів заввишки  */
+  font-family: placeholder: замініть цей плейсхолдер на строку із сайту Google fonts
+}</pre>
+
+  <div class="note">
+  <p><strong>Примітка</strong>: Я додав коментар із поясненням, що означає "px". Все у CSS документі, що знаходиться  між <code>/*</code> та <code>*/</code> — це <strong>коментар CSS</strong>, який ігнорується браузером. Коментарі застосовують для приміток та пояснень, що допоможуть вам в роботі.</p>
+  </div>
+ </li>
+ <li>Встановимо розміри шрифта для елементів, що містять у собі текст всередині HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, та {{htmlelement("p")}}). Також відцентруємо текст нашого заголовку та встановимо висоту строки і проміжок між літерами нашого контенту, щоб зробити його зручнішим для читання.
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Ви можете змінювати числа як завгодно, щоб ваш дизайн виглядав так, як ви хочете. Загалом він буде виглядати так:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Блоки_блоки_і_ще_раз_про_блоки">Блоки, блоки, і ще раз про блоки</h2>
+
+<p><span id="result_box" lang="uk"><span>Одна річ, яку ви помітите при написанні CSS, полягає в тому, що багато використовуються блоки - встановлення їх розміру, кольору, позиції тощо. Більшість HTML-елементів на вашій сторінці можуть розглядатися як блоки, які розташовані один на одному.</span></span></p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p><span id="result_box" lang="uk"><span>Не дивно, що макет CSS заснований переважно на блочній моделі </span></span> <em>(box model)</em><span lang="uk"><span>.</span> <span>Кожен із блоків, що займає простір на вашій сторінці, має такі властивості</span></span>:</p>
+
+<ul>
+ <li><code>padding</code>, простір лише навколо контенту (наприклад, навколо параграфу тексту)</li>
+ <li><code>border</code>, суцільна лінія (межа), яка розташована ззовні від padding</li>
+ <li><code>margin</code>, простір навколо зовнішнього елемента</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>В цьому розділі ми також використовуємо:</p>
+
+<ul>
+ <li><code>width</code> (ширина елемента)</li>
+ <li><code>background-color</code>, колір за контентом і padding елемента</li>
+ <li><code>color</code>, колір змісту елементу (зазвичай тексту)</li>
+ <li><code>text-shadow</code>: встановлює тінь на тексті в середині елемента</li>
+ <li><code>display</code>: встановлює режим відображення елемента (не хвилюйтесь про це покищо)</li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Отже, давайте почнемо та додамо ще кілька CSS на нашу сторінку!</span> <span>Додайте ці нові правила до нижньої частини сторінки, і не бійтеся експериментувати зі зміною значень, щоб побачити, як це працює.</span></span></p>
+
+<h3 id="Зміна_кольору_сторінки"><span class="short_text" id="result_box" lang="uk"><span>Зміна кольору сторінки</span></span></h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p><span id="result_box" lang="uk"><span>Це правило встановлює фоновий колір для всієї сторінки</span></span> . Змініть код кольору на будь-який інший, <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">що ви обрали при плануванні свого сайту</a>.</p>
+
+<h3 id="Задання_стилів_для_body">Задання стилів для body</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Тепер стилі для елемента <code>body</code>. Тут багато параметрів, тому давайте розглянемо по-одному:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — цей параметр робить body шириною завжди 600 пікселів.</li>
+ <li><code>margin: 0 auto;</code> — Коли ви встановлюєте два значення у властивостях <code>margin</code> або <code>padding</code>, перше значення впливає на верхню  <strong>та</strong> нижню сторони елемента (зроблено <code>0</code> в даному випадку), та друге значення лівої <strong>та</strong> правої сторони (тут <code>auto</code> - <span id="result_box" lang="uk"><span>це спеціальне значення, яке рівномірно розподіляє доступний горизонтальний простір між лівою і правою стороною</span></span>). Ви можете також використовувати один, три або чотири значення, як задокументовано <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">тут</a>.</li>
+ <li><code>background-color: #FF9500;</code> — <span id="result_box" lang="uk"><span>як і раніше, це встановлює фоновий колір елемента</span></span>. <span id="result_box" lang="uk"><span>Ми використали якийсь червоно-оранжевий для body, а не синій для елемента {{htmlelement ("html")}}, але не бійтеся експериментувати, підставляючи інші кольори.</span></span></li>
+ <li><code>padding: 0 20px 20px 20px;</code> — <span id="result_box" lang="uk"><span>ми маємо чотири значення, встановлені для padding, щоб зробити трохи простору навколо нашого вмісту.</span> <span>Цього разу ми не встановлюємо padding зверху від body (значення 0px), а встановлюємо 20 пікселів ліворуч, знизу та праворуч.</span> <span>Значення встановлено в такому порядку: вгорі, праворуч, внизу та ліворуч.</span></span></li>
+ <li><code>border: 5px solid black;</code> — встановлює безперервну чорну рамку border товщиною 5 пікселів з усіх боків body.</li>
+</ul>
+
+<h3 id="Позиціонування_та_стиль_заголовка_головної_сторінки"><span id="result_box" lang="uk"><span>Позиціонування та стиль заголовка головної сторінки</span></span></h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p><span id="result_box" lang="uk"><span>Ви, мабуть, помітили, що у верхній частині body є чималенький розрив</span></span>. <span id="result_box" lang="uk"><span>Це відбувається тому, що браузери застосовують деякий <strong>стиль за умовчанням</strong> до елемента</span></span> {{htmlelement("h1")}} (серед інших), <span id="result_box" lang="uk"><span>навіть якщо ви не застосували жодного CSS!</span> </span>Це може здаватись поганою ідеєю, але ми хочемо, щоб <span id="result_box" lang="uk"><span>навіть незавершена веб-сторінка мала базову читабельність.</span> <span>Щоб позбутися розриву, ми перекриваємо стандартний <strong>стиль за замовчуванням</strong>, встановлюючи</span></span> <code>margin: 0;</code>.</p>
+
+<p><span id="result_box" lang="uk"><span>Далі ми встановили верхній та нижній відступи (padding) заголовку до 20 пікселів і зробили заголовок текстом того ж кольору, що і колір фону (background) всієї сторінки html</span></span>.</p>
+
+<p><span id="result_box" lang="uk"><span>Одна досить цікава властивість, яку ми використовували тут,</span></span> це - <code>text-shadow</code>, <span id="result_box" lang="uk"><span>яка застосовує текстову тінь до текстового вмісту елемента.</span> <span>Її чотири значення означають наступне</span></span>:</p>
+
+<ul>
+ <li><span id="result_box" lang="uk"><span>Перше значення пікселя встановлює <strong>горизонтальне зміщення</strong> тіні від тексту - як далеко вона рухається: негативне значення має перемістити тінь вліво</span></span>.</li>
+ <li><span id="result_box" lang="uk"><span>Друге значення пікселя встановлює <strong>вертикальне зміщення</strong> тіні від тексту - як далеко вона рухається в такому випадку;</span> <span>негативне значення має рухати тінь вгору</span></span>.</li>
+ <li><span id="result_box" lang="uk"><span>Третє значення пікселя встановлює <strong>радіус розмивання</strong> тіні - більша величина означатиме більш розмиту тінь</span></span>.</li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Четверте значення встановлює базовий колір тіні</span></span>.</li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Знову ж таки, спробуйте експериментувати з різними значеннями, щоб побачити, що ви можете придумати</span></span>.</p>
+
+<h3 id="Центрування_зображення"><span class="short_text" id="result_box" lang="uk"><span>Центрування зображення</span></span></h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Нарешті, ми будемо центрувати зображення, щоб воно виглядало краще. Ми могли б використати <code>margin: 0 auto</code> як і раніше для body, але ми також можемо зробити дещо інше. Елемент body є <strong>блочним рівнем</strong>, <span id="result_box" lang="uk"><span>тобто він займає місце на сторінці, і до нього можуть бути додані поля та інші значення відступів</span></span>. <span id="result_box" lang="uk"><span>Зображення, з іншого боку, є <strong>вбудованими елементами (inline)</strong>, тобто вони не можуть мати відступів.</span> <span>Таким чином, щоб застосувати поля до зображення, ми повинні надати поведінку блочного рівня зображенню за допомогою</span></span> <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: Не хвилюйтесь, якщо ще не зрозуміли <code>display: block;</code> <span id="result_box" lang="uk"><span>і відміну між блочним рівнем / вбудованим (inline) елементом.</span> Далі в<span>и будете вивчати CSS більш глибоко.</span> <span>Ви можете дізнатись більше про різні доступні значення відображення на нашому сайті</span></span> <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
+</div>
+
+<h2 id="Висновок">Висновок</h2>
+
+<p><span id="result_box" lang="uk"><span>Якщо ви дотримувалися всіх інструкцій у цій статті, ви повинні отримати сторінку, яка виглядає приблизно так</span></span> (ви можете також <a href="http://mdn.github.io/beginner-html-site-styled/">переглянути нашу версію тут</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Якщо ви застрягли, ви можете завжди  порівняти свою роботу з нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">закінченим прикладом коду на Github</a>.</p>
+
+<p>Тут ми, дійсно, лише зачепили поверхневі знання із CSS. <span id="result_box" lang="uk"><span>Щоб дізнатись більше, перейдіть до </span></span><a href="https://developer.mozilla.org/en-US/Learn/CSS">Вивчення теми CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..1cd1fa24d6
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,101 @@
+---
+title: Робота з файлами
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+tags:
+  - HTML
+  - Веб-сайт
+  - Початківцям
+  - Теорія
+  - Файли
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Веб-сайт складається з багатьох файлів: текстового наповнення, коду, стилів, медіаконтенту тощо. Коли ви будуєте веб-сайт, ви маєте поєднати ці файли у єдину змістову структуру на своєму локальному комп'ютері, переконатися, що всі файли можуть "спілкуватися" один з одним і правильно відображати весь контент, до того, як ви <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">завантажите їх на сервер</a>. У статті <em>Робота з файлами </em>ми розглядаємо кілька питань, які допоможуть правильно налаштувати структуру файлів для вашого сайту. </p>
+</div>
+
+<h2 id="Де_саме_має_зберігатися_сайт_на_вашому_комп'ютері">Де саме має зберігатися сайт на вашому комп'ютері?</h2>
+
+<p>Коли ви працюєте над своїм сайтом локально на комп'ютері, вам слід зберігати всі файли сайту в одній папці, структура якої має повністю відповідати структурі папки живого сайту, яка зберігається на сервері. Ваша локальна папка може зберігатися де завгодно, але найкраще тримати її там, де ви зможете її легко знайти, наприклад, на робочому столі чи в корені диска. </p>
+
+<ol>
+ <li>Виберіть місце для зберігання ваший веб-сайтів. Створіть нову папку і назвіть її <code>web-projects</code> (або схожим чином). У цій папці житимуть всі ваші веб-проекти. </li>
+ <li>Всередині папки, створіть ще одну папку для вашого першого веб-сайту. Назвіть її <code>test-site</code> (або більш вигадливо).</li>
+</ol>
+
+<h2 id="Примітка_про_великі_й_малі_літери_і_пробіли">Примітка про великі й малі літери і пробіли</h2>
+
+<p>Читаючи цю статтю, ви помітите, що ми просимо вас називати папки і файли малими літерами і без пробілів. Це тому що:</p>
+
+<ol>
+ <li>Багато комп'ютерів, особливо веб-серверів, є чутливими до регістрів літер. Наприклад, якщо ви покладете зображення <code>MyImage.jpg </code>у ваш веб-проект  <code>test-site</code>, а потім у якомусь файлі спробуєте вставити це зображення, вказавши шлях як <code>test-site/myimage.jpg</code>, це може не спрацювати.</li>
+ <li>Браузери, веб-сервери і мови програмування не завжди правильно опрацьовують пробіли. Наприклад, якщо ви використовуєте пробіли в назві файлу, деякі системи можуть вважати, що це дві окремі назви файлів. Деякі сервери замінять пробіли в назві файлів символом "%20" (код символу пробіл в URI), поламаючи при цьому ваші посилання. Краще розділяти слова дефісом, ніж нижнім підкресленням: <code>my-file.html</code> замість <code>my_file.html</code>.</li>
+</ol>
+
+<p>Коротко кажучи, вам слід використовувати дефіс у назвах файлів. Google розуміє дефіс як спосіб розділення слів, але на нижнє підкреслення це не поширюється. З цих міркувань, найкраще звикати до написання назв папок і файлів малими літерами без пробілів, розділяючи слова дефісом, принаймні допоки у вас немає достатніх знань. Так ви матимете менше проблем згодом. </p>
+
+<h2 id="Яку_структуру_вибрати_для_вашого_сайту">Яку структуру вибрати для вашого сайту?</h2>
+
+<p>Давайте поглянемо, яку структуру повинен мати ваш сайт. Найбільш поширені компоненти, які мають практично всі проекти, які ми створюємо, — це HTML-файл з назвою index, а також кілька папок: із зображеннями, стилями і скриптами. Давайте створимо їх зараз:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: цей файл буде містити практично весь контент вашої головної сторінки — текст і зображення, які користувачі бачать, коли відвідують ваш сайт. У своєму текстовому редакторі створіть файл з назвою <code>index.html</code> і збережіть його в папці <code>test-site.</code></li>
+ <li><strong>Папка <code>images</code></strong>: у цій папці будуть зібрані всі зображення, які ви будете використовувати на сайті. Створіть папку з назвою <code>images</code> всередині папки <code>test-site</code>.</li>
+ <li><strong>Папка <code>styles</code></strong>: у цій папці зберігатимуться всі CSS-файли зі стилями, якими ви будете змінювати зовнішній вигляд вашого контенту (наприклад, шрифт тексту чи колір бекграунду). Створіть папку <code>styles<font face="Open Sans, arial, x-locale-body, sans-serif"> </font></code><font face="Open Sans, arial, x-locale-body, sans-serif">всередині папки </font><code>test-site</code>.</li>
+ <li><strong>Папка <code>scripts</code></strong>: у цій папці будуть зберігатися всі файли з JavaScript-кодом, яким ви додасте інтерактивності вашому сайту (наприклад, щоб кнопки при кліку відображали якісь дані). Створіть папку <code>scripts<font face="Open Sans, arial, x-locale-body, sans-serif"> </font></code><font face="Open Sans, arial, x-locale-body, sans-serif">всередині папки </font><code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка</strong>: на комп'ютерах Windows ви не завжди можете бачити повну назву файлу із розширенням, оскільки Windows за замовчанням приховує розширення файлів. Ви можете змінити налаштування так: у File Explorer вибрати вкладку View і поставити "галочку" в пункті File name extensions. Більш детальну інформацію про те, як змінити налаштування на вашій версії Windows, можна легко знайти в інтернеті.</p>
+</div>
+
+<h2 id="Шляхи_файлів">Шляхи файлів</h2>
+
+<p>Щоб змусити файли "спілкуватися" між собою, ви маєте вказати їм шлях один до одного — по суті, маршрут, за яким один файл буде знати, де лежить інший файл. Щоб показати, як це працює, ми додамо трохи HTML у наш файл <code>index.html</code>, щоб вкласти на сторінку зображення, яке ви вибрали в статті <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?"</a>.</p>
+
+<ol>
+ <li>Скопіюйте вибране раніше зображення в папку <code>images</code>.</li>
+ <li>Відкрийте файл <code>index.html</code> і вставте туди цей код, точно так, як він поданий тут. Поки що не переймайтеся, що він означає, — пізніше ми розглянемо його в деталях.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>Рядок <code>&lt;img src="" alt="My test image"&gt;</code> є кодом HTML, який вставить зображення на нашу сторінку. Ми маємо сказати цьому коду, де саме шукати картинку, тобто вказати шлях файлу. Наше зображення зберігається в папці <code>images</code>, яка, в свою чергу, зберігається на тому ж рівні (в тій самій директорії), що і файл <code>index.html</code>. Щоб файл <code>index.html</code> зміг дістатися до нашого зображення, нам потрібно спочатку вказати назву папки із зображеннями, а потім ім'я конкретного зображення, отак: <code>images/ім'я-вашого-файлу</code>. Наприклад, якщо наше зображення називається <code>firefox-icon.png</code>, то наш шлях виглядатиме так: <code>images/firefox-icon.png</code>.</li>
+ <li>Вставте цей шлях у ваш код HTML між лапками коду <code>src=""</code>.</li>
+ <li>Збережіть файл HTML, потім відкрийте його в браузері (подвійний клік на файлі). Ви маєте побачити вашу нову веб-сторінку із зображенням! </li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Загальні правила шляху файлу:</p>
+
+<ul>
+ <li>Якщо файл, який приєднується, зберігається у тій самій директорії (на тому ж рівні), що і файл, до якого приєднується, то у шляху можна вказати лише назву приєднуваного файла, наприклад, <code>src="my-image.jpg"</code>.</li>
+ <li>Якщо файл, який приєднується, лежить у піддиректорії (рівнем нижче), ніж файл, до якого приєднується, спочатку вкажіть ім'я піддиректорії, потім скісну риску, потім назву приєднуваного файлу, наприклад, <code>src="subdirectory/my-image.jpg"</code>.</li>
+ <li>Якщо файл, який приєднується, лежить в директорії вище (рівнем вище), ніж файл, до якого приєднується, додайте на початку шляху дві крапки. Наприклад, якщо файл <code>index.html</code> лежав би в підпапці основної папки <code>test-site</code>, а <code>my-image.jpg</code> лежав би в корені основної папки <code>test-site</code>, то шлях до <code>my-image.jpg</code> з файлу <code>index.html</code> був би <code>src="../my-image.jpg"</code>.</li>
+ <li>Шлях до файлу, який приєднується, може бути складним і поєднувати директорії різних рівнів, наприклад: <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li>
+</ul>
+
+<p>Поки що це все, що вам потрібно знати.</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: файлова система Windows у своїх шляхах зазвичай використовує обернену скісну риску замість звичайної, наприклад, <code>C:\windows</code>. На ваш код HTML це не впливає— навіть якщо ви пишете сайт на Windows, вам все одно слід використовувати звичайну скісну риску. </p>
+</div>
+
+<h2 id="Що_ще_потрібно_зробити">Що ще потрібно зробити?</h2>
+
+<p>Поки що це все. Структура вашої папки має виглядати приблизно так: </p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..d736cf3913
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -0,0 +1,94 @@
+---
+title: Як працює мережа
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
+tags:
+  - IP-адреса
+  - Клієнт
+  - Початківцям
+  - Сервер
+  - протокол
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Стаття <em>Як працює мережа</em> спрощено пояснює, що саме відбувається, коли ви переглядаєте веб-сторінку у браузері на комп'ютері чи телефоні. </p>
+</div>
+
+<p>Ця теорія не є обов'язковою на початку веб-розробки, але чим далі ви просуватиметеся, тим більш очевидними будуть переваги розуміння того, що саме відбувається за лаштунками. </p>
+
+<h2 id="Клієнти_та_сервери">Клієнти та сервери</h2>
+
+<p>Комп'ютери, приєднані до мережі, називаються <strong>клієнтами</strong> та <strong>серверами</strong>. Цей малюнок спрощено показує, як відбувається їхня взаємодія: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Клієнти — це звичайні користувацькі комп'ютери, під'єднані до інтернету (наприклад, ваш комп'ютер, під'єднаний до Wi-Fi, або ваш телефон, під'єднаний до мобільної мережі) і програмне забезпечення на цих комп'ютерах з веб-доступом (зазвичай, це браузери, такі як Firefox чи Chrome).</li>
+ <li>Сервери — це комп'ютери, які зберігають веб-сторінки, сайти чи додатки. Коли клієнт хочу отримати доступ до веб-сторінки, копія цієї сторінки завантажується із сервера на клієнт і відображається у веб-браузері клієнта. </li>
+</ul>
+
+<h2 id="Інші_гравці_на_полі">Інші гравці на полі</h2>
+
+<p>Клієнт та сервер, про які йшлося вище, не єдині учасники процесу. Існує багато інших складових, про які ми зараз розкажемо. </p>
+
+<p>Для початку, уявимо мережу як дорогу. На одному кінці дороги — ваш будинок. Це наш клієнт. На протилежному кінці дороги — крамниця, у якій ви хочете щось придбати. Це наш сервер. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>На додачу до сервера і клієнта, ми також маємо: </p>
+
+<ul>
+ <li><strong>Ваше інтернет-з'єднання: </strong>дозволяє вам відсилати і отримувати дані в мережі. Це як вулиця між вашим будинком і магазином. </li>
+ <li><strong>TCP/IP</strong>: Transmission Control Protocol (протокол керування передачею) і Internet Protocol (інтернет-протокол) — комунікаційні протоколи, які визначають, як саме дані мають передаватися в мережі. Це як спосіб пересування, який дозволяє вам дістатися до магазину і купити товар. У нашому випадку, це як машина чи велосипед, чи будь-який інший спосіб пересування. </li>
+ <li><strong>DNS</strong>: Domain Name Servers (DNS-сервер) — це як адресний довідник для веб-сайтів. Коли ви вписуєте адресу веб-сторінки в браузер, браузер спочатку шукає її в DNS. Браузеру потрібно з'ясувати, на якому сервері живе потрібний вам сайт, щоб правильно надіслати HTTP-повідомлення (див. нижче). У нашому прикладі, це як подивитися в довіднику адресу магазину. </li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol — це протокол передачі даних ({{Glossary("Protocol" , "protocol")}}), що визначає мову, якою будуть спілкуватися клієнт і сервер. У нашому випадку, це мова, якою ви замовляєте своє товари. </li>
+ <li><strong>Складові файли</strong>: веб-сайт складається з багатьох різних файлів. У нашому прикладі, це як різні частини товарів, які ви купуєте в магазині. Ці файли бувають двох типів:
+  <ul>
+   <li><strong>Файли коду</strong>: веб-сайти зазвичай складаються з кодів HTML, CSS і JavaScript (пізніше ви познайомитеся з іншими технологіями).</li>
+   <li><strong>Матеріали</strong>: це загальна назва для всіх інших складових сайту, наприклад, зображення, музика, відео, документи Word чи PDF.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="То_що_власне_відбувається">То що, власне, відбувається?</h2>
+
+<p>Коли ви вписуєте адресу в браузер, то:</p>
+
+<ol>
+ <li>Браузер іде на DNS-сервер і знаходить там справжню адресу серверу, на якому зберігається потрібний вам сайт (ви знаходите адресу магазину).</li>
+ <li>Браузер надсилає HTTP-запит до сервера з проханням вислати копію сайту на клієнт (ви йдете в магазин і замовляєте товар). Цей запит і всі інші дані, які пересилаються між клієнтом і сервером, передаються в мережі за допомогою TCP/IP.</li>
+ <li>Якщо сервер вирішує задовольнити запит, він відсилає клієнту повідомлення "200 OK", що означає "Звісно, ви можете подивитися цей веб-сайт! Ось він", і потім починає відсилати файли веб-сайту в браузер по шматочках, погрупованих в маленькі набори, які називаються пакетами даних (магазин видає вам ваш товар і ви несете його додому).</li>
+ <li>Браузер збирає докупи всі шматочки і показує їх вам у вигляді готової веб-сторінки (ваш товар вже вдома!).</li>
+</ol>
+
+<h2 id="Пояснення_DNS">Пояснення DNS</h2>
+
+<p>Усі адреси ваших улюблених сайтів насправді є зовсім не такими, якими виглядають. Вони є спеціальними наборами цифр, як, наприклад, оцей: 63.245.215.20.</p>
+
+<p>Це {{Glossary("IP Address", "IP-адреса")}} сайту, вона представляє унікальне місце зберігання сайту в мережі. Її непросто запам'ятати, чи не так? Саме тому бути винайдені сервери доменних імен (Domain Name Servers), або DNS-сервери. Це спеціальні сервери, які зіставляють веб-адресу, яку ви вводите в браузер (наприклад, "mozilla.org") зі справжньою (IP) адресою сайту.</p>
+
+<p>Веб-сайти можна знайти напряму через їхні IP-адреси. Спробуйте зайти на сайт Mozilla website, увівши <code>63.245.215.20</code> в адресний рядок браузера.</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Пояснення_пакетів">Пояснення пакетів</h2>
+
+<p>Вище ми вживали термін "пакет", щоб описати формат, у якому дані пересилаються з сервера на клієнт. Що це означає? Дані пересилаються по мережі у вигляді серій пакетів, кожен з яких містить маленьких шматок інформації. Це робиться для того, щоб багато різних користувачів могли завантажувати одну й ту саму сторінку одночасно. Якщо б веб-сайти надсилалися одним великим шматком, тільки один користувач міг би завантажувати її в певний час, що значно ускладнило б користування мережею. </p>
+
+<h2 id="Також_дивися">Також дивися</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Автор_фото">Автор фото</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/html_basics/index.html b/files/uk/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..71e66f6f1e
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,214 @@
+---
+title: Основи HTML
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - HTML
+  - Початківець
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (мова гіпертекстової розмітки) — це код, який використовується для структурування і відображення веб-сторінки та її контенту. Наприклад, контент може бути розбитий на параграфи (абзаци), містити список, зображення чи таблицю. Ця стаття має дати базове розуміння мови HTML та її призначення. </p>
+</div>
+
+<h2 id="Що_таке_HTML">Що таке HTML?</h2>
+
+<p>HTML — це не мова програмування, це <em>мова розмітки</em>, яка каже вашому браузеру, як відображати вміст веб-сторінки, яку ви переглядаєте. Вона може бути простою чи складною, залежно від бажання веб-дизайнера, який її створює. HTML складається з серії (<strong>{{Glossary("element", "елементів")}})</strong>, які використовуються для вміщення, або "загортання" в них різних частин контенту, щоб вони відображалися чи діяли в певний спосіб. Ці елементи за допомогою початкових і кінцевих ({{Glossary("tag", "тегів")}}) можуть зробити слово чи зображення посиланням на будь-яку іншу сторінку, можуть відображати текст курсивом, збільшити чи зменшити шрифт тощо. Для прикладу, візьмемо такий контент: </p>
+
+<pre class="notranslate">Мій кіт дуже сумний.</pre>
+
+<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), додавши до нього відповідні теги:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Мій кіт дуже сумний.&lt;/p&gt;</pre>
+
+<h3 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h3>
+
+<p>Погляньмо на елемент "параграф" детальніше. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Основні частини елементу такі:</p>
+
+<ol>
+ <li><strong>Початковий тег:</strong> містить назву елементу (в даному випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li>
+ <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у даному випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li>
+ <li><strong>Вміст:</strong> вміст елементу, у даному випадку — просто текст. </li>
+ <li><strong>Елемент:</strong> початковий тег плюс кінцевий тег плюс вміст між ними — дорівнює елемент.</li>
+</ol>
+
+<p>Елементи також можуть мати атрибути, які виглядають так: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє дати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль. </p>
+
+<p>Атрибут завжди повинен мати:</p>
+
+<ol>
+ <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li>
+ <li>Ім'я атрибута, за яким іде знак дорівнює.</li>
+ <li>Значення атрибута, загорнене в прямі лапки.</li>
+</ol>
+
+<h3 id="Вкладені_елементи">Вкладені елементи</h3>
+
+<p>Ви можете додати елемент всередину іншого елементу. Це називається <strong>вкладенням.</strong> Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Мій кіт &lt;strong&gt;дуже&lt;/strong&gt; сумний.&lt;/p&gt;</pre>
+
+<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент &lt;strong&gt;, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Мій кіт &lt;strong&gt;дуже сумний.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим всім сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p>
+
+<h3 id="Порожні_елементи">Порожні елементи</h3>
+
+<p>Деякі елементи не містять жодного вмісту. Вони називаються <strong>порожніми елементами</strong>. Для прикладу візьмемо елемент {{htmlelement("img")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Моє тестове зображення"&gt;</pre>
+
+<p>Цей елемент має два атрибути, при цьому не має кінцевого тегу і жодного внутрішнього вмісту. Елементу image не потрібно загортати контент, його мета — вставити зображення на певне місце на веб-сторінці.</p>
+
+<h3 id="Анатомія_HTML-документу">Анатомія HTML-документу</h3>
+
+<p>Все зазначене вище є основами HTML-елементів, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку. Візьмемо для прикладу код з файлу <code>index.html</code> (який використовується в статті <em><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Моя тестова сторінка&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Моє тестове зображення"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Тут ми маємо:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — тип документу. В сиву давнину, коли HTML був молодим (приблизно в 1991-92 роках), типи документів мали слугувати набором посилань на правила, яким HTML-сторінка мала слідувати, щоб вважатися правильним HTML (наприклад, автоматична перевірка помилок та інше). Однак, у наш час мало хто переймається типами документів, і вони є швидше історичним артефактом, який потрібно додавати, щоб все працювало правильно. Поки що це все, що вам потрібно знати про тип документу.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — елемент {{htmlelement("html")}}. Цей елемент загортає весь контент на всій сторінці. Також його називають кореневим елементом (root element).</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — елемент {{htmlelement("head")}}. Цей елемент слугує контейнером для всієї інформації, яку ви хочете додати до своєї сторінки, але яка <em>не є власне контентом</em> сторінки, який будуть переглядати користувачі. Це, зокрема, {{Glossary("keyword", "ключові слова")}}, опис сторінки, який буде з'являтися в пошукових результатах, CSS для стилів контенту, набір символів (кодування) тощо.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — елемент {{htmlelement("body")}}. Цей елемент містить <em>увесь контент</em>, який ви хочете показати користувачам, коли вони відвідують вашу сторінку: текст, зображення, відео, ігри, аудіо тощо. </li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — цей елемент визначає набір символів, які використовує сторінка. Зазвичай це UTF-8, який містить найбільше символів з більшості людських писемних мов. По суті, ваша сторінка зможе відобразити практично будь-який текстовий контент. Немає жодних причин пропускати цей елемент, він може допомогти уникнути певних проблем пізніше. </li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — елемент {{htmlelement("title")}}. Цей елемент містить заголовок вашої сторінки, який буде відображатися у вкладці браузера при завантаженні сторінки. Також текст у цьому елементі буде відображатися в закладках, якщо додати сторінку до закладок.</li>
+</ul>
+
+<h2 id="Зображення">Зображення</h2>
+
+<p>Повернемося до елементу {{htmlelement("img")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Моє тестове зображення"&gt;</pre>
+
+<p>Як ми вже з'ясували раніше, цей елемент вставляє зображення на сторінку в тому місці, де воно має з'явитися.  Це відбувається за допомогою атрибута <code>src</code> (source — джерело), який містить шлях до зображення.</p>
+
+<p>Також ми додали атрибут <code>alt</code> (alternative). У цьому атрибуті потрібно вказувати альтернативний текст-опис зображення для тих випадків, коли користувачі не зможуть побачити картинку, наприклад, через те, що:</p>
+
+<ol>
+ <li>Мають порушення зору. Користувачі з порушенням зору часто використовують скрін-рідери, які читають описи зображень.</li>
+ <li>Щось пішло не так при завантаженні зображення. Спробуйте навмисно змінити шлях до зображення в атрибуті <code>src</code>, щоб він став неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите, що на місці зображення буде текст:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Основним при створенні атрибута alt має бути описовість тексту. Цей атрибут має дати користувачу достатньо інформації, щоб скласти уявлення про те, що є на зображенні. У нашому випадку, текст "Моє тестове зображення" нікуди не годиться. Набагато кращий варіант для логотипу Firefox був би "Логотип Firefox: палаюча лисиця навколо Земної кулі."</p>
+
+<p>Спробуйте придумати кращий альтернативний текст для свого зображення. </p>
+
+<div class="note">
+<p><strong>Примітка</strong>: дізнайтеся більше про доступність на сторінці <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility</a>.</p>
+</div>
+
+<h2 id="Розмітка_тексту">Розмітка тексту</h2>
+
+<p>У цьому розділі ми розглянемо базові HTML-елементи, які використовуються для розмітки тексту.</p>
+
+<h3 id="Заголовки">Заголовки</h3>
+
+<p>Елементи "Heading" дозволяють вам вказати, що певні частини контенту вашої сторінки є заголовками або підзаголовками. Так само, як у книжці є назва книги, назви розділів і підзаголовки, у HTML-документі це також є. HTML має заголовки шістьох рівнів, {{htmlelement("h1")}}–{{htmlelement("h6")}}, хоча зазвичай використовуються перші 3-4.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Мій головний заголовок&lt;/h1&gt;
+&lt;h2&gt;Мій важливий заголовок&lt;/h2&gt;
+&lt;h3&gt;Мій підзаголовок&lt;/h3&gt;
+&lt;h4&gt;Мій менш важливий підзаголовок&lt;/h4&gt;</pre>
+
+<p>Спробуйте додати підзаголовки до вашої HTML-сторінки перед елементом {{htmlelement("img")}}.</p>
+
+<h3 id="Параграфи">Параграфи</h3>
+
+<p>Як пояснювалося вище, елемент {{htmlelement("p")}} містить частину тексту, яка становить один абзац. Параграфи використовуються дуже часто, особливо при розмітці звичайного текстового контенту:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Це один параграф.&lt;/p&gt;</pre>
+
+<p>Додайте зразок тексту (він має бути готовий зі статті <em><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Як виглядатиме ваш сайт?</a></em>) в один чи два параграфи і розмістіть їх прямо під елементом {{htmlelement("img")}}.</p>
+
+<h3 id="Списки">Списки</h3>
+
+<p>Чимало контенту на веб-сторінках є списками, і в HTML є спеціальні елементи для них. Розмітка списків завжди має принаймні два елементи. Найпоширеніші типи списків - це нумерований і ненумерований списки:</p>
+
+<ol>
+ <li><strong>Ненумерований список</strong> — це перелік, у якому порядок пунктів не суттєвий, наприклад, список покупок. Такий список загортається в елемент {{htmlelement("ul")}}.</li>
+ <li><strong>Нумерований список</strong> — це перелік, у якому порядок пунктів має значення, наприклад, рецепт приготування. Такий список загортається в елемент {{htmlelement("ol")}}.</li>
+</ol>
+
+<p>Кожен пункт всередині списку загортається в свій окремий елемент {{htmlelement("li")}} (list item).</p>
+
+<p>Наприклад, якщо ми хочемо перетворити такий параграф у список: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mozilla — це глобальна спільнота технологів, мислителів і творців, які працюють разом...&lt;/p&gt;</pre>
+
+<p>Ми можемо так змінити розмітку:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mozilla — це глобальна спільнота&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;технологів&lt;/li&gt;
+  &lt;li&gt;мислителів&lt;/li&gt;
+  &lt;li&gt;творців&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;які працюють разом... &lt;/p&gt;</pre>
+
+<p>Спробуйте додати нумерований чи ненумерований список до вашої сторінки.</p>
+
+<h2 id="Посилання">Посилання</h2>
+
+<p>Посилання дуже важливі — це те, що робить мережу мережею! Щоб додати посилання, потрібно використовувати елемент {{htmlelement("a")}} ("a" скорочено від "anchor" — якір). Щоб перетворити параграф на посилання, робіть так:</p>
+
+<ol>
+ <li>Виберіть текст. Ми вибрали "Mozilla Manifesto".</li>
+ <li>Загорніть цей текст в елемент {{htmlelement("a")}}, отак:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Додайте до елементу {{htmlelement("a")}} атрибут <code>href</code>, отак:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Додайте значення цьому атрибута — адресу посилання:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Не пропускайте частину <code>https://</code> чи <code>http:// на початку адреси</code>, так званий <em>протокол</em>, інакше результати можуть бути неочікуваними. Після того, як елемент доданий, клікніть на посилання і переконайтеся, що вас відправило туди, куди ви хотіли.</p>
+
+<div class="note">
+<p><code>href</code> може видаватися дивним ім'ям для атрибута, який складно запам'ятати. Він означає <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>— гіпертекстове посилання.</p>
+</div>
+
+<p>Тепер додайте посилання до своєї сторінки.</p>
+
+<h2 id="Висновок">Висновок</h2>
+
+<p>Якщо ви слідували інструкціям у цій статті, у вас мала вийти сторінка, яка виглядає приблизно так (також можна переглянути <a href="http://mdn.github.io/beginner-html-site/">тут</a>):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Якщо ви застрягли, ви завжди можете порівняти свій код із завершеним прикладом коду на <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">GitHub</a>.</p>
+
+<p>У цій статті ми розглянули тільки базові поняття HTML. Щоб дізнатися більше, зайдіть на сторінку <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/index.html b/files/uk/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..af137773c8
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,64 @@
+---
+title: Початок роботи з Інтернетом
+slug: Learn/Getting_started_with_the_web
+tags:
+  - CSS
+  - HTML
+  - 'l10n: пріоритет'
+  - Покажчик
+  - Посібник
+  - Початківцям
+  - Розробка
+  - Теорія
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>«</em><em>Початок роботи з Інтернетом»</em> — це серія стислих статей, що знайомить з практичними питаннями веб-розробки. Ви налаштуєте інструменти, необхідні для створення простої веб-сторінки та публікації власного коду.</p>
+</div>
+
+<h2 id="Історія_вашого_першого_сайту">Історія вашого першого сайту</h2>
+
+<p>Розробка професійного сайту - це кропітка робота. Радимо не поспішати, якщо ви початківець у веб-програмуванні. Ви не отримаєте відразу новий Facebook, але легко побудуєте свій перший сайт.</p>
+
+<p>Опрацьовуючи статті послідовно, ви розташуєте створену веб-сторінку в інтернеті. Почнемо!</p>
+
+<h3 id="Встановлення_необхідних_програм"><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a></h3>
+
+<p>Є чимало інструментів для побудови сайтів. Початківець може розгубитись, при виборі редакторів коду, фреймворків  та засобів для тестів. <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> поступово допоможе встановити все, що потрібно для простої веб-розробки.</p>
+
+<h3 id="Який_вигляд_матиме_ваш_сайт"><a href="/uk/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Який вигляд матиме ваш сайт?</a></h3>
+
+<p>Перед тим, як почати писати код для сайту, треба мати план. Яку інформацію відобразити? Які кольори та шрифти використати? <a href="/uk/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Який вигляд матиме ваш сайт?</a> Пропонуємо вам простий спосіб планування змісту та зовнішнього вигляду вашого сайту.</p>
+
+<h3 id="Робота_з_файлами"><a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></h3>
+
+<p>Сайт складається з багатьох файлів: текстів, коду, таблиць стилів, медіа-контенту тощо. Коли створюється сайт, потрібно об'єднати ці файли в логічну структуру та впевнитися, що вони доступні одне одному. <a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> пояснює, як створити логічну структуру файлів для сайту й уникнути типових проблем.</p>
+
+<h3 id="Основи_HTML"><a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a></h3>
+
+<p>Hypertext Markup Language (HTML, мова розмітки гіпертексту) — це код, що структурує зміст веб-сторінок та надання йому значення і мети. Наприклад, чи є контент набором параграфів, чи списком із маркерами? Чи є на сторінці зображення, таблиці з даними? В <a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основах HTML </a>достатньо інформації для знайомства з HTML.</p>
+
+<h3 id="Основи_CSS"><a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основи CSS</a></h3>
+
+<p>Cascading Stylesheets (CSS, каскадні таблиці стилів) — це код для стилізації сайту. Наприклад, який колір тексту, де розміщенно контент на екрані? Які фонові зображення та кольори взято для оздоблення сайту? З <a href="/uk/docs/Learn/Getting_started_with_the_web/CSS_basics">Основ CSS</a> ви дізнаєтесь про стилізацію для початківців.</p>
+
+<h3 id="Основи_JavaScript"><a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a></h3>
+
+<p>JavaScript — це мова програмування, яку використовують для можливості взаємодії з веб-сайтами. А саме: ігри, дії, що відбудутся після натиску на кнопоку або введення даних до форми, створення динамічних стилей, анімацій тощо. <a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a> описують можливості цієї захоплючої мови програмування та як почати нею користовуватись.</p>
+
+<h3 id="Публікація_вашого_сайту"><a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого сайту</a></h3>
+
+<p>Після написання коду та організації файлів вашого сайту, необхідно розмістити його в інтернеті, щоб люди могли побачити результати вашої праці. <a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Публікація вашого коду</a> допоможе як найлегше розмістити ваш код в інтернеті.</p>
+
+<h3 id="Як_працює_Інтернет"><a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет </a></h3>
+
+<p>Коли ви заходите на улюблений сайт, виконується безліч фонових завдань, можливо непомітних для вас. <a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює Інтернет</a> описує процеси, які відбуваються, коли ви переглядаєте веб-сторінку на компьютері.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Веб Демістифікований</a>: Велика серія відеороликів, яка пояснює веб-основи, спрямована на початківця у веб-розробці. Створена <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
+ <li><a href="/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a>: Ця стаття надає корисну загальну інофрмацію про Інтернет - як він виник, які існують веб-технології, як вони співпрацюють, чому стати веб-програмістом - хороший вибір кар'єри, які підходи до вивчення є найкращими в цьому курсі.</li>
+</ul>
diff --git a/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..22e6bfadf6
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,63 @@
+---
+title: Встановлення необхідних програм
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - Браузер
+  - Початківцям
+  - текстовий редактор
+  - інструменти
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>В статті <em>"Встановлення необхідних програм"</em> ми з'ясуємо, які інструменти потрібні для веб-розробки та як їх правильно встановити.</p>
+</div>
+
+<h2 id="Які_інструменти_використовують_професіонали">Які інструменти використовують професіонали?</h2>
+
+<ul>
+ <li><strong>Комп'ютер</strong>. Це надто очевидно, проте хтось може читати статтю з телефону чи комп'ютера в бібліотеці. Для серйозної веб-розробки краще мати власний комп'ютер чи ноутбук з операційною системою Windows, Mac або Linux.</li>
+ <li><strong>Текстовий редактор</strong> для написання коду. Це такі текстові редактори, як: <a href="https://www.sublimetext.com/">SublimeText</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> або <a href="https://code.visualstudio.com/">Visual Studio Code</a> чи гібридні, як-от: <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> або <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Офісні програми (наприклад, MS Office) не відповідають вимогам, тому що вставляють в документ приховані елементи, які можуть вплинути на зчитування документу браузером.</li>
+ <li><strong>Веб-браузер</strong> для тестування коду. Наразі, найвживанішими є <a href="https://www.mozilla.org/uk/">Firefox</a>, <a href="https://www.google.com/intl/uk_ua/chrome/">Chrome</a>, <a href="https://www.opera.com/uk">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> та <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Ви повинні тестувати, як сайт відображається на мобільних пристроях та старих браузерах, які ваша цільова аудиторія може використовувати (як-от IE 8–10).</li>
+ <li><strong>Графічний редактор</strong>, як-от: <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> чи <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> щоб створити зображення для сайту.</li>
+ <li><strong>Система контролю версій</strong> для управління файлами на серверах, співпраці з командою, поширення коду і уникнення розбіжностей при редагуванні. Наразі <a href="http://git-scm.com/">Git</a> є найбільш визнаним інструментом контролю версій так само хостинг кодів <a href="https://github.com/">GitHub</a>, що базується на <a href="http://git-scm.com/">Git</a>.</li>
+ <li><strong>Програма FTP</strong>, якою користуються на старих веб-хостингах для управління файлами на серверах (<a href="http://git-scm.com/">Git</a> в цьому поступово витісняє FTP). Існує багато (S)FTP-програм, як-от <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> і <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Система автоматизації, </strong>наприклад, <a href="http://gruntjs.com/">Grunt</a> чи <a href="http://gulpjs.com/">Gulp</a> для автоматичного виконання повторюваних завдань, таких як зменшення коду чи виконання тестів. </li>
+ <li>Шаблони, бібліотеки, фреймворки для швидшого написання поширених частин коду.</li>
+ <li>А також багато іншого!</li>
+</ul>
+
+<h2 id="Які_інструменти_мені_потрібні_зараз">Які інструменти мені потрібні зараз?</h2>
+
+<p>Список виглядає страшно, але на щастя ви можете починати веб-розробку без знань більшості з них. У статті розглянемо базовий мінімум — текстовий редактор і кілька сучасних браузерів. </p>
+
+<h3 id="Встановлення_текстового_редактора">Встановлення текстового редактора</h3>
+
+<p>Напевно, у вас вже є простий текстовий редактор на комп'ютері. Windows зазвичай має <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a>, а macOS — <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux пропонує різні варіанти, зокрема Ubuntu має <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>.</p>
+
+<p>Для веб-розробки доступні кращі редактори, ніж Notepad чи TextEdit. Пропонуємо <a href="http://brackets.io">Brackets</a> —безкоштовний редактор з підказками та попереднім переглядом. </p>
+
+<h3 id="Встановлення_сучасного_браузера">Встановлення сучасного браузера</h3>
+
+<p>Встановимо кілька браузерів, щоб тестувати наш код. Оберіть операційну систему, клацніть відповідне посилання та завантажте улюблені браузери:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge"><font color="#0066cc">Microsoft Edge</font></a> (Windows 10 зазвичай має Edge; в Windows 7 і вище можете встановити Internet Explorer 11; для решти — інший браузер).</li>
+ <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari зазвичай є в iOS і macOS)</li>
+</ul>
+
+<p>Перед тим, як продовжити, встановіть принаймні два з цих браузерів і запустіть їх.</p>
+
+<div class="blockIndicator note">
+<p>Internet Explorer не сумісний з деякими сучасними функціями вебу та, вірогідно, не зможе запустити ваш проект. Зазвичай вам не потрібно турбуватися про те, щоб зробити свої веб-проекти сумісними з ним, оскільки дуже мало людей все ще користуються ним - тож, не надто переймайтеся про це, поки ви навчаєтесь. Іноді ви можете зіткнутися з проектом, який потребує його підтримки.</p>
+</div>
+
+<h3 id="Встановлення_локального_веб-сервера">Встановлення локального веб-сервера</h3>
+
+<p>Деякі приклади потрібно буде тестувати на локальному веб-сервері. Ви можете дізнатися, як його встановити, у статті <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Як ти налаштуєш локальний тестовий сервер?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html b/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..50ffb7a580
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,401 @@
+---
+title: Основи JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Інтернет
+  - Мова
+  - Основи
+  - Українська
+  - вивчення
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript — це мова програмування, яка приносить інтерактивність до вашого веб-сайту (наприклад: ігри, реакція на натиски кнопок, введеня даних через форми, динамічна зміна стилів, анімація). Ця стаття допоможе розпочати вивчення цієї захоплюючої мови і дасть вам уяву про її можливості.</p>
+</div>
+
+<h2 id="Що_ж_являє_собою_JavaScript_насправді">Що ж являє собою JavaScript насправді?</h2>
+
+<p>{{Glossary("JavaScript")}} ("JS" скорочено) це повноцінна {{Glossary("Динамічна мова програмування", "динамічна мова програмування")}}, яка, у застосуванні до {{Glossary("HTML")}} документу, може надати динамічну інтерактивність на веб-сайтах. Вона була винайдена Бренданом Eйхом, співзасновником проекту Mozilla, the Mozilla Foundation, та Mozilla Corporation.</p>
+
+<p>JavaScript має надзвичайно багато застосувань. Ви можете розпочати з малого: створити "каруселі", галереї зображень, динамічні макети сторінок, відповіді на натиски кнопок, тощо. Із досвідом, ви зможете створювати ігри, 2D та 3D графіку, складні застосунки з використанням баз даних та багато іншого!</p>
+
+<p>JavaScript доволі компактна та гнучка мова. Розробники забезпечили велике розмаїття інструментів, що доповнюють основу мови JavaScript, які відкривають величезну кількість додаткового функціоналу з мінімальними зусиллями. Серед них:</p>
+
+<ul>
+ <li>Програмні інтерфейси ({{Glossary("API","APIs")}}) для браузерів — API, які вбудовані у браузери, що надають функціонал на зразок динамічного створення HTML та застосування CSS-стилів, збір та обробка відео-потоків з вебкамери користувача, генерація 3D-графіки та аудіо-семплів.</li>
+ <li>API третіх осіб, що дозволяють розробникам інтегрувати у власні сайти функціонал інших провайдерів, таких як Twitter або Facebook.</li>
+ <li>Фреймворки та бібліотеки третіх осіб, які ви можете застосувати до вашого HTML, щоб прискорити створення сайтів та застосунків.</li>
+</ul>
+
+<p>Тому що ця стаття повинна бути легким введенням до JavaScript, на цьому етапі ми не будемо займати вашу увагу детальними розмовами про різницю основної мови JavaScript та різними інструментами, що наведені вище. Ви можете вивчити це у деталях пізніше, у нашій <a href="/en-US/docs/Learn/JavaScript">JavaScript learning area</a>, та решті MDN.</p>
+
+<p>Нижче ми представимо вам деякі аспекти основної мови, а також ви ознайомитесь з деякими можливостями API браузера. Розважайтесь!</p>
+
+<h2 id="Приклад_hello_world">Приклад "hello world"</h2>
+
+<p>Попередній розділ звучить неймовірно, і це дійсно так — JavaScript є одним із найперспекнивніших Веб-технологій, і коли ви проникнитесь та почнете використовувати його, ваші веб-сайти перейдуть у нові виміри продуктивності та креативності.</p>
+
+<p>Тим не менш,  відчувати себе комфортно з  JavaScript складніше ніж з HTML та CSS. Вам потрібно починати з малого та продовжувати працювати малими послідовними кроками. Для початку, ми розглянемо як додати деякі прості JS-елементи на вашу сторінку,  створюючи <em>"hello world!"</em> зразок (<a href="https://uk.wikipedia.org/wiki/Hello_world!">стандартний приклад з програмування</a>).</p>
+
+<div class="warning">
+<p><strong>Важливо</strong>: Якщо ви не проходили пепередні частини курсу, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">завантажте цей зразок коду</a>(архів) і використовуйте його як точку початку.</p>
+</div>
+
+<ol>
+ <li>Перш за все, перейдіть до вашого тестового сайту та створіть нову папку з іменем "scripts"(без лапок). Тоді, всередині нової папки для скриптів, що ви щойно створили, створіть новий файл з назвою <code>main.js</code>. Збережіть його в папці <code>scripts</code> .</li>
+ <li>Далі, у вашому файлі <code>index.html</code> введіть наступний елемент в новому рядку просто перед закриваючим тегом <code>&lt;/body&gt;</code> :
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Загалом,  це те ж саме, що і {{htmlelement("link")}} елемент для CSS — він додає JavaScript до сторінки, тож це може впливати на HTML (також на CSS, та будь що інше на сторінці).</li>
+ <li>Тепер додайте цей код до файлу <code>main.js</code> :
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>Наприкінці,  переконайтесь, що файли HTML та JavaScript збережені та приєднані до  <code>index.html</code> в браузері. Ви маєте побачити щось на кшталт цього:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Причиною, чому ми ставимо {{htmlelement("script")}} елемент ближче до низу HTML файлу, є те, що HTML завантажується браузером в порядку того, як він прописаний в файлі. Якщо JavaScript завантажено першим, а очікується, що він має впливати на HTML під ним, він може не працювати, якщо JavaScript завантажується раніше, ніж HTML, над яким він має здійснювати якісь маніпуляції. Тож, писати підключення JavaScript наприкінці коду HTML це, зачасту, найкраща стратегія.</p>
+</div>
+
+<h3 id="Що_сталось">Що сталось?</h3>
+
+<p>Текст вашого заголовка було замінено на "Hello world!", використовуючи JavaScript.  Ви зробили це за допомогою першої функції яку використали, яка має назву <code>{{domxref("Document.querySelector", "querySelector()")}}</code> щоб отримати посилання на ваш заголовок та зберегти його у змінній <code>myHeading</code>. Дуже схоже до того, що ми робили, використовуючи CSS селектори. Коли є потреба щось зробити з елементом, ви маєте спочатку його вибрати.</p>
+
+<p>Після цього, ви присвоюєте значення змінної <code>myHeading</code> властивості <code>{{domxref("Node.textContent", "textContent")}}</code> (яка містить контекст заголовка), а саме "Hello world!".</p>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Обидві можливості, що ви використовували перед цим, є частиною <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, що дозволяє вам маніпулювати документами.</p>
+</div>
+
+<h2 id="Прискорений_курс_основ">Прискорений курс основ</h2>
+
+<p>Розгляньмо кілька основних можливостей мови JavaScript, щоб дати вам краще розуміння того, як це все працює. Варто зазначити, що ці речі притаманні всім мовам програмування, тож якщо ви засвоїте цей базис, ви на шляху до того, щоб могти програмувати будь-що!</p>
+
+<div class="warning">
+<p><strong>Важливо</strong>:  У цій статті, намагайтесь перевіряти приклади коду на своєму ПК у JavaScript консолі. <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools$translate?tolocale=uk">Детальніша інформація</a> про JS-консоль та інші засоби розробника у браузері.</p>
+</div>
+
+<h3 id="Змінні">Змінні</h3>
+
+<p>{{Glossary("Змінна", "Змінні")}} - контейнери, у яких ви можете зберігати значення. Ви можете розпочати з оголошення змінної за допомогою ключового слова <code>var</code> , після якого вказавши ім'я, яким ви хочете назвати змінну:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Крапка з комою(англ. semicolon) в кінці рядка вказує на кінець виразу; ставити крапку з комою обов'язково, коли вам потрібно розділити вирази в одному рядку. Однак, деякі люди вважають гарною практикою ставити в кінці кожного виразу. Є інші правила, коли ви маєте чи не маєте ставити крапку з комою - дивіться <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a>, щоб дізнатись більше.</p>
+</div>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Ви можете називати змінні майже будь-як, проте є певні обмеження (читайте <a href="http://www.codelifter.com/main/tips/tip_020.shtml">статтю про правила іменування змінних</a>.) Якщо вагаєтесь, можна <a href="https://mothereff.in/js-variables">перевірити ім'я вашої змінної</a>, щоб дізнатись, чи є воно коректним.</p>
+</div>
+
+<div class="note">
+<p><strong>Зауважте</strong>: JavaScript це мова чутлива до регістру — <code>myVariable</code> , це не те саме, що <code>myvariable</code> чи <code>MYvariable</code>. Якщо ви маєте проблеми з кодом, можливо, варто перевірити регістр.</p>
+</div>
+
+<p>Після оголошення змінної, ви можете просвоїти їй значення:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Ви можете виконувати обидві операції в одному рядку:</p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p>Ви можете звертатись до змінної, просто вказавши її ім'я:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Після надання змінній значення, ви можете пізніше змінити його:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Зауважте, що змінні можуть містити значення <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">різних типів</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Тип</th>
+   <th scope="col">Пояснення</th>
+   <th scope="col">Приклад</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Послідовність символів, відома як рядок. Щоб визначити, що значенням є рядок, ви мусите занести його в лапки.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Число. Без лапок.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Значення True/False. Слова <code>true</code> та <code>false</code> є спеціальними словами в JS, та не потребують лапок.</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Масив. Дозволяє зберігати багато значень за одним посиланням.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Виклик значень елементів здійснюється так:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, і т. д.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Загалом, будь-що. Все у JS є об'єктом і може міститись у змінній. Пам'ятайте це.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Всі попередні приклади теж.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>То навіщо нам потрібні змінні? Щож, змінні потрібні для всіх цікавих у програмуванні речей. Якби змінні не могли змінюватись, то ви не могли б робити ніяких динамічних речей, як то персоналізовані вітальні повідомлення чи зміна відображуваних в галереї зображень.</p>
+
+<h3 id="Коментарі">Коментарі</h3>
+
+<p>Ви можете залишати коментарі у JavaScript коді, так само як у CSS:</p>
+
+<pre class="brush: js">/*
+Все, що всередині, є коментарем.
+*/</pre>
+
+<p>Якщо коментар однорядковий, то простіше виділити його двома слешами:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// Це коментар. Малозмістовний, та все ж.
+</pre>
+
+<h3 id="Оператори">Оператори</h3>
+
+<p><code>{{Glossary("Оператор")}}</code> , це математичний символ, що видає результат,  оснований на двох значення(чи змінних). В таблиці нижче ви можете побачити деякі з напростіших операторів з деякими прикладами, які можете перевірити у JavaScript консолі.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Оператор</th>
+   <th scope="col">Пояснення</th>
+   <th scope="col">Символ</th>
+   <th scope="col">Приклад</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Додавання/конкатинація</th>
+   <td>Вживається для додавання двох чисел чи злиття двох рядків разом.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Віднімання, множення, ділення</th>
+   <td>Те ж, що і в простій математиці.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td>
+    <p><code>9 - 3;<br>
+     8 * 2;  //Множення у JS позначається зірочкою<br>
+     9 / 3;</code></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Присвоєння</th>
+   <td>Ви вже це бачили; присвоєння змінній значення.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Порівняння</th>
+   <td>Перевіряє чи дві змінні рівні та повертає <code>true</code>/<code>false</code> (Boolean) .</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;//false</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Заперечення (обернений до порівняння)</th>
+   <td>Повертає логічний вираз, протилежний значенню операнда; <code>true</code> стає <code>false</code> і т.п. Повертає <code>true</code>, якщо значення не рівні.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Початковий вираз <code>true</code>, але повертається <code>false</code> , оскільки це заперечене порівняння :</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Ми перевіряємо "чи <code>myVariable</code> НЕ рівне 3". Повертає <code>false</code>, оскільки <code>myVariable</code> РІВНЕ 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Існує ще багато операторів, які ви можете використовувати, та цих поки достатньо. Відвідайте <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a>, щоб побачити повний список.</p>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Змішування типів даних може привести до дивних результатів при виконанні обрахунків, тож будьте обережні. Наприклад, введіть <code>"35" + "25"</code> в своїй консолі. Чому ви отримали не той результат, на який ви очікували? Тому, що лапки перетворили числа в рядки, тож виконалось не додавання, а злиття рядків. Якщо ввести <code>35 + 25</code> , то результат буде таким, який ви, можливо, очікували у попередньому випадку.</p>
+</div>
+
+<h3 id="Умови">Умови</h3>
+
+<p>Умовами називають структури коду, що дозволяють вам перевіряти, повертає вираз <code>true</code>, чи ні, виконуючи певні частини коду, залежно від результату. Поширеною формою умовної конструкції є <code>if ... else</code>.  Наприклад:</p>
+
+<pre class="brush: js">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>Вираз всередині <code>if ( ... )</code>, це порівняння — використовує оператор порівняння щоб співставити значення змінної <code>iceCream</code> з рядком <code>'chocolate'</code>,щоб визначити, чи рівні вони. Якщо <code>true</code>, то запускається перший блок коду. Якщо порівняння не повертає <code>true</code>, то перший блок пропускається, а  другий блок, після виразу <code>else</code>, запускається замість нього.</p>
+
+<h3 id="Функції">Функції</h3>
+
+<p>{{Glossary("Функція", "Функції")}}, це шлях до збереження функціоналу, який ви плануєте використовувати знову. В такому разі, коли вам потрібна певна процедура, ви можете просто викликати відповідну функцію. Ви вже бачили деякі використання функцій, наприклад:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Ці функції, <code>document.querySelector</code> та <code>alert</code>, є вбудованими у браузер, тож ви можете викликати їх коли вам заманеться.</p>
+
+<p>Якщо ви бачите щось, що виглядає, як ім'я змінної, проте має дужки до — <code>()</code> — та після, це функція. Функції зазвичай приймають {{Glossary("Арґумент", "аргументи")}} — дані, що необхідні їм для роботи. Їх записують між дужками, розділяючи комами, якщо є більше одного.</p>
+
+<p>Наприклад, функція <code>alert()</code> створює випадаюче вікно в вікні браузера, але ми маємо задати аргументом рядок, щоб повідомити функції, що саме потрібно написати у випадаючому вікні.</p>
+
+<p>Звісно ж, ви можете описувати власні функції — у цьому прикладі ми напишемо просту функцію, що приймає два числа аргументами та множить їх:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Спробуйте запустити функцію в консолі та протестувати з різними аргументами. Наприклад:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Зауважте</strong>: Вираз <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> вказує браузеру, що потрібно повернути змінну <code>result</code> наприкінці роботи функції, щоб вона була доступна до використання. Це необхідно, тому що змінні, що визначені всередині функції, видимі лише в цій же функції. Це називається {{Glossary("Scope", "зоною видимості")}} змінної. (<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">more on variable scoping</a>.)</p>
+</div>
+
+<h3 id="Події">Події</h3>
+
+<p>Справжня інтерактивність на сайті вимагає подій. Це структури коду, що стежать за тим, що стається у браузері та запускають певні блоки коду у відповідь. Найпоширеніша подія, це <a href="/en-US/docs/Web/Events/click">click</a>, що виконується браузером, коли ви клікаєте на щось своєю мишкою. Щоб побачити це, пропишіть наступний код у консолі а потім клацніть на цій сторінці:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Є багато шляхів прив'язати подію до елемента. Тут ми обираємо {{htmlelement("HTML")}} елемент, виставляючи для події <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> на виконання безіменну функцію, яку ми хочемо запустити при натисканні.</p>
+
+<p>Зауважте, що це:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>еквівалентне цьому:</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Просто коротше.</p>
+
+<h2 id="Прокачаємо_наш_зразок_сайту">Прокачаємо наш зразок сайту</h2>
+
+<p>Тепер, коли ми розглянули кілька принципів JavaScript, давайте додамо трохи нових крутих фішок до нашого сайту, щоб подивитись, що ми можемо з ним робити.</p>
+
+<h3 id="Додамо_зміну_картинок">Додамо зміну картинок</h3>
+
+<p>У цій частині, ми додамо ще зображень засобами DOM API, викорстовуючи JavaScript, щоб переключатись між ними, коли хтось клікне на зображення.</p>
+
+<ol>
+ <li>Перш за все, знайдіть ще одне зображення, яке б ви хотіли бачити на своєму сайті. Переконайтесь, що воно має такий же розмір, як і попереднє, або максимально близько до нього за розміром.</li>
+ <li>Збережіть його у папку <code>images</code> .</li>
+ <li>Перейменуйте його на 'firefox2.png' (без лапок, звичайно).</li>
+ <li>Перейдіть до файлу <code>main.js</code>, та введіть цей шматок коду JavaScript. (Якщо ваш  зразок "hello world" досі там, видаліть його.)
+  <pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Збережіть всі файли та відкрийте <code>index.html</code> у браузері. Тепер, коли ви клікатимете на зображення, воно буде замінюватись іншим.</li>
+</ol>
+
+<p>Ви зберігаєте посилання на ваше зображення у змінній <code>myImage</code>. Далі, ви прив'язуєте подію <code>onclick</code> для цієї змінної до функції, що не має імені(анонімної). Зараз, щоразу, коли ви клікнете на цей елемент:</p>
+
+<ol>
+ <li>Ви поновлюєте значення атрубуту зображення <code>src</code> .</li>
+ <li>Використовуєте умову для перевірки, чи значення <code>src</code> рівне шляху до першого зображення:
+  <ol>
+   <li>Якщо так, ви змінюєте значення <code>src</code> на шлях до другого зображення, змушуючи вже друге зображення завантажитись до елемента {{htmlelement("image")}}.</li>
+   <li>Якщо ні (значить зміни вже відбувались), значення <code>src</code> замінюється назад до оригінального зображення, в первинний стан.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Персоналізоване_привітання">Персоналізоване привітання</h3>
+
+<p>Далі ми допишемо шматок коду, що змінить заголовок сторінки на особисте привітання, коли користувач вперше відвідує сторінку. Це повідомлення залишиться, якщо користувач покине сайт та повернеться знову - ми збережемо його засобами <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Ми також додамо можливість змінити користувача і, відповідно, привітання, як тільки буде потрібно.</p>
+
+<ol>
+ <li>До <code>index.html</code> додамо наступний код, прямо перед елементом {{htmlelement("script")}}:
+
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>У файлі <code>main.js</code>, в  кінці вставте наступний код . Він отримує посилання на нову кнопку та заголовок і зберігає їх до нових відповідних змінних:
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Тепер додамо наступні функції, щоб налаштувати персоналізоване привітання - воно в такому стані не працюватиме, та скоро ми це виправимо:
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Ця функція містить функцію <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, яка викликає діалогове вікно, подібно до <code>alert()</code>. Функція <code>prompt()</code>, однак, запитує в користувача дані, зберігаючи їх у відповідній змінній одразу після того як буде натиснута кнопка <strong>OK</strong><em>.</em> В цьому випадку, ми питаємо в користувача його ім'я. Далі, ми звертаємось до API, що має назву <code>localStorage</code>, що дозволяє нам зберігати дані у браузері, а потім звертатись до них. Ми використовуємо з localStorage функцію <code>setItem()</code>, щоб створити та зберегти дані в <code>'name'</code>, та присвоїти це значення змінній <code>myName</code>, що міститиме дані, введені користувачем. Наприкінці, присвоюємо <code>textContent</code> заголовка рядок, додаючи щойно збережене користувачем ім'я.</li>
+ <li>Після цього, допишемо цей блок <code>if ... else</code> — ми можемо назвати його ініціалізацією, оскільки він структуруватиме логіку сторінки при запуску:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  Блок спочатку використовує оператор заперечення (логічне NOT, представлене "!") щоб перевірити, чи існують дані <code>name</code>. Якщо ні, функція <code>setUserName()</code> запуститься, щоб створити їх. Якщо існують (означає, що вони були створені, коли користувач минулого разу відвідував сайт), ми поновлюємо збережене ім'я за допомогою <code>getItem()</code> та присвоюємо заголовку <code>textContent</code> рядок, додаючи ім'я користувача, так само, як і у <code>setUserName()</code>.</li>
+ <li>Для завершення, прив'яжемо подію <code>onclick</code> до кнопки. Коли відбудеться клік, функція <code>setUserName()</code> запуститься. Це дозволить змінювати ім'я користувача, коли виникне в цьому потреба, натиснувши на кнопку:
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Тепер при, першому відвідуванні сайту, він запитає ваше ім'я, а потім відобразить персоналізоване привітання. Ви в будь-який момент можете змінити ім'я, натиснувши на кнопку. Як бонус, через те, що ім'я зберігається у localStorage, воно залишиться навіть, якщо закрити сторінку, зберігаючи персоналізоване привітання з вашим іменем!</p>
+
+<h2 id="Висновок">Висновок</h2>
+
+<p>Якщо ви слідували всім інструкціям, під кінець у вас мало б вийти щось накшталт цього (якщо ні, то можете <a href="https://mdn.github.io/beginner-html-site-scripted/">подивитись нашу версію тут</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Якщо ви десь застрягли, можете порівняти свою роботу з нашим завершеним зразком коду на <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github</a>.</p>
+
+<p>Тут ми ледь пошкрябали велику глибу можливостей JavaScript. Якщо вам сподобалось і ви бажаєте продовжити, перейдіть на наш <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">план вивчення JavaScript</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..a0d1a5e00f
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,111 @@
+---
+title: Публікація вашого сайту
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - Веб-сервер
+  - Доменне ім'я
+  - Мова
+  - Початківцям
+  - Публікація
+  - Українська
+  - Хостинг
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Коли ви закінчили писати код і організували всі файли, які складають ваш проект, ви маєте викласти все це онлайн, щоб ваш веб-сайт можна було побачити. У цій статті пояснюється, як без особливих зусиль викласти простий веб-сайт онлайн. </p>
+</div>
+
+<h2 id="Які_варіанти">Які варіанти?</h2>
+
+<p>Публікація сайту є складною темою, переважно тому, що існує дуже багато шляхів як це зробити. У цій статті ми не ставимо за мету розказати про всі можливі варіанти. Натомість ми поговоримо про "плюси" і "мінуси" трьох найбільш популярних стратегій виходу в онлайн з точки зору початківців, а потім розкажемо про один із способів, який нам найбільше підходить на даному етапі. </p>
+
+<h3 id="Хостинг_і_доменне_ім'я">Хостинг і доменне ім'я</h3>
+
+<p>Якщо ви хочете повністю контролювати ваш опублікований веб-сайт, то вам потрібно купити:</p>
+
+<ul>
+ <li>Хостинг — оренда місця для зберігання файлів на <a href="/en-US/Learn/What_is_a_web_server">веб-сервері</a> хостингової компанії. Ви можете викласти свої файли в орендоване місце, і веб-сервер буде надавати вміст вашого сайту користувачам.</li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Доменне ім'я</a> — унікальна адреса, за якою користувачі будуть знаходити ваш сайт, наприклад,  <code>http://www.mozilla.org чи</code> <code>http://www.bbc.co.uk</code>. Ви можете орендувати доменне ім'я у <strong>реєстратора доменних імен</strong>.</li>
+</ul>
+
+<p>Багато професійних веб-сайтів виходять онлайн таким способом. </p>
+
+<p>На додачу, вам знадобиться програма {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (див. <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a>), щоб передавати ваші файли на сервер. Є багато різних програм FTP, але загалом для користування вам потрібно залогінитися на ваш веб-сервер (реєстраційні данні, наприклад, ім'я користувача, пароль, ім'я хоста, надаються хостинговою компанією). Потім програма покаже ваші локальні файли і файли на веб-сервері у двох вікнах, так що ви зможете переносити файли туди і назад:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Поради_з_пошуку_хостингу_і_доменів">Поради з пошуку хостингу і доменів</h4>
+
+<ul>
+ <li>Ми не рекламуємо окремі комерційні хостингові компанії чи реєстратори доменних імен. Щоб знайти хостингові компанії і реєстратори, просто введіть  "web hosting" і "domain names" в пошуковику. У всіх реєстраторах можна перевірити, чи потрібне вам доменне ім'я вільне, чи вже зареєстроване.</li>
+ <li>Ваш домашній чи робочий інтернет-провайдер ({{Glossary("ISP", "internet service provider")}}) може пропонувати обмежений хостинг для малих веб-сайтів. Кількість доступних опцій буде невелика, але їх може бути достатньо для ваших перших пробних сайтів — запитайте вашого провайдера!</li>
+ <li>Є кілька безкоштовних сервісів, таких як <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a> та <a href="https://wordpress.com/">WordPress</a>. Їх може бути цілком достатньо для перших експериментів. Безкоштовні сервіси не вимагають програм FTP — ви можете просто перетягувати файли на сайт сервісу. </li>
+ <li>Іноді компанії пропонують і хостинг, і реєстрацію імені одним пакетом.</li>
+</ul>
+
+<h3 id="Онлайн-інструменти_GitHub_і_Google_App_Engine">Онлайн-інструменти GitHub і Google App Engine</h3>
+
+<p>Деякі інструменти дозволяють вам публікувати ваш сайт онлайн:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> — це сайт "суспільного кодингу". Він дозволяє вам завантажити свій код для зберігання в системі контролю версій <a href="http://git-scm.com/">Git</a><strong>. </strong>Також ви можете долучатися до створення різних проектів. Це система open-source, тобто будь-хто будь-де може знайти ваш код, використати його, вчитися по ньому чи покращити його. GitHub має дуже корисну функцію <a href="https://pages.github.com/">GitHub Pages</a>, яка дозволяє переглядати код онлайн.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> — це потужна платформа, яка дозволяє вам будувати і запускати додатки, використовуючи інфраструктуру Google. Цей сервіс підходить і для створення складних веб-додатків, і для хостингу статичного веб-сайту. Дивіться статтю <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> для детальнішої інформації.</li>
+</ul>
+
+<p>На відміну від більшості хостингів, такі інструменти переважно безкоштовні, але з обмеженою кількістю функцій. </p>
+
+<h3 id="Веб-середовища_розробки_(IDE)_такі_як_Thimble">Веб-середовища розробки (IDE), такі як Thimble</h3>
+
+<p>Є кілька веб-додатків, які відтворюють середовище веб-розробки онлайн, дозволяючи писати HTML, CSS і JavaScript і відображаючи оброблений результат — і все це у вкладці браузера. Ці інструменти прості у користуванні, чудово підходять для навчання і є безкоштовними (принаймні базові функції), крім того, вони хостять вашу сторінку за її унікальною адресою. Однак, базові функції доволі обмежені, і такі сервіси зазвичай не надають місця для зберігання матеріалів сайту (наприклад, зображень).</p>
+
+<p>Спробуйте покористуватися сервісами нижче і виберіть, який підходить вам найбільше:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Публікація_через_GitHub">Публікація через GitHub</h2>
+
+<p>Тепер поговоримо про те, як легко опублікувати ваш сайт за допомогою GitHub Pages.</p>
+
+<ol>
+ <li>По-перше, зареєструйтеся на <a href="https://github.com/">GitHub</a> і підтвердіть вашу електронну адресу.</li>
+ <li>Далі, <a href="https://github.com/new">створіть репозиторій</a>, у якому будуть зберігатися фаші файли.</li>
+ <li>На цій сторінці, у полі <em>Repository name </em>введіть <em>username</em>.github.io, де <em>username</em> це ваше ім'я користувача. Наприклад, наш друг bobsmith ввів би <em>bobsmith.github.io</em>.<br>
+  Також поставте "галочку" в полі <em>Initialize this repository with a README</em> і потім клікніть <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Після цього, перетягніть файли вашого сайту в репозиторій і клікніть <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Примітка</strong>: переконайтеся, що ваша папка має файл <em>index.html</em>.</p>
+  </div>
+ </li>
+ <li>
+  <p>Тепер у браузері перейдіть за адресою <em>username</em>.github.io, щоб побачити ваш сайт онлайн. Наприклад, користувач з іменем <em>chrisdavidmills</em> має перейти на <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Примітка</strong>: публікація вашого сайту онлайн може зайняти кілька хвилин. Якщо ви не побачите його відразу, почекайте кілька хвилин і спробуйте знову. </p>
+  </div>
+ </li>
+</ol>
+
+<p>Щоб дізнатися більше, дивіться <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Додаткові_матеріали">Додаткові матеріали</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: гарний туторіал Codecademy, який показує деякі додаткові техніки. </li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> від Scott Murray пропонує кілька корисних ідей щодо доступних сервісів. </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..3a64823681
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,118 @@
+---
+title: Який вигляд матиме ваш сайт?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Вміст
+  - Дизайн
+  - Навчання
+  - Початківець
+  - матеріали
+  - планування
+  - шрифти
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>В <em>Який вигляд матиме ваш сайт?</em> ми розглянемо, яку попередню планувальну та дизайнерську роботу потрібно зробити до того, як ви почнете писати код. Яку інформацію надаватиме сайт, які шрифти та кольори використати та що фактично робитиме веб-сторінка. </p>
+</div>
+
+<h2 id="Спершу_планування">Спершу планування</h2>
+
+<p>Перш, ніж щось робити, потрібні ідеї. Що саме ваш сайт має робити? Він може що завгодно, але для першого разу краще обрати щось простіше. Почнемо з простої веб-сторінки зі заголовком, зображенням і кількома абзацами. </p>
+
+<p>Для початку дайте відповідь на запитання:</p>
+
+<ol>
+ <li><strong>Про що ваш сайт? </strong>Ви любите собак, Нью-Йорк, Пекмена?</li>
+ <li><strong>Яку інформацію по темі ви маєте надати? </strong>Напишіть заголовок і кілька абзаців і подумайте щодо зображення для них. </li>
+ <li><strong>Який вигляд матиме ваш сайт</strong> у загальних простих термінах? Який колір тла? Які шрифти підійдуть: ділові, коміксні, грубі та крикливі, прості?</li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка</strong>: складні проекти вимагають детальної документації, включно з вказаними конкретно кольорами, шрифтами, відстанями між частинами контенту, стилем тексту тощо. Іноді це називається посібником зі стилю чи бренд-буком.</p>
+</div>
+
+<h2 id="Ескіз_вашого_дизайну">Ескіз вашого дизайну</h2>
+
+<p>Візьміть олівець і папір та приблизно замалюйте  вигляд вашого сайту. Для простої сторінки не варто малювати багато, але вам потрібно виробити звичку це робити. Це справді допомагає — вам не потрібно бути Ван Гогом!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Примітка</strong>: навіть у випадку справжніх складних сайтів команда дизайнерів починає з попередніх ескізів на папері, а вже потім робить цифрові макети у графічному редакторі чи онлайн-сервісах. </p>
+
+<p>Команди веб-розробників зазвичають мають графічного дизайнера і дизайнера по {{Glossary("ДК", "досвіду користування")}}. Графічні дизайнери відповідають за візуальну складову сайту. Дизайнери по досвіду користування — за те, як відвідувачі будуть користовуватись сайтом та взаємодіяти з ним. </p>
+</div>
+
+<h2 id="Вибір_матеріалів">Вибір матеріалів</h2>
+
+<p>На цьому етапі починіть працювати над вмістом, який потім з'явиться на вашій веб-сторінці.</p>
+
+<h3 id="Текст">Текст</h3>
+
+<p>Попередньо ви вже маєте свої тексти та назви. Тримайте їх напоготові. </p>
+
+<h3 id="Кольорова_тема">Кольорова тема</h3>
+
+<p>Щоб вибрати колір, який вам подобається, скористайтеся <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Color Picker</a>. Коли ви клацнете по кольору, ви побачите незвичну комбінацію з шести символів, на зразок <code>#660066</code>. Це — <em>hex-код </em>(від hexadecimal — шістнадцяткова системи числення), що відповідає вибраному кольору. Збережіть десь.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Зображення">Зображення</h3>
+
+<p>Щоб вибрати зображення, пошукайте щось на <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a>.</p>
+
+<ol>
+ <li>Коли ви знайдете потрібне, то кляцніть по зображенню. </li>
+ <li>Натисніть кнопку «<em>Переглянути зображення»</em>.</li>
+ <li>На наступній сторінці, правою кнопкою миші кляцніть по зображенню, виберіть «Зберегти як...» і  десь його збережіть. Або скопіюйте веб-адресу зображення, щоб скористатись потім.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>Примітка</strong>: більшість зображень у мережі, включно з Google Images, захищені авторським правом. Щоб не порушити його, скористайтеся фільтром прав: 1) клацніть по <strong>Інструменти</strong>, а потім по 2) <strong>Права на використання</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="Шрифт">Шрифт</h3>
+
+<p>Вибір шрифту:</p>
+
+<ol>
+ <li>Щоб знайти шрифт, який вам подобається, зайдіть на <a href="https://fonts.google.com/">Google Fonts</a> і погортайте сторінку. Також можете скористатися фільтром справа.</li>
+ <li>Натисніть значок "плюс" (Select this font) поруч із потрібним шрифтом.</li>
+ <li>Натисніть кнопку «* Family Selected» на панелі в низу сторінки («*» залежить від кількості вибраних шрифтів).</li>
+ <li>У спливаючому вікні побачите рядки коду. Можете скопіювати їх, щоб зберегти на потім. </li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="У_цьому_розділі">У цьому розділі</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/uk/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a></li>
+ <li id="What_will_your_website_look_like"><a href="/uk/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Який вигляд матиме ваш сайт?</a></li>
+ <li id="Dealing_with_files"><a href="/uk/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></li>
+ <li id="HTML_basics"><a href="/uk/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a></li>
+ <li id="CSS_basics"><a href="/uk/Learn/Getting_started_with_the_web/CSS_basics">Основи CSS</a></li>
+ <li id="JavaScript_basics"><a href="/uk/Learn/Getting_started_with_the_web/JavaScript_basics">Основи JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/uk/Learn/Getting_started_with_the_web/Publishing_your_website">Оприлюднення сайту</a></li>
+ <li id="How_the_web_works"><a href="/uk/Learn/Getting_started_with_the_web/How_the_Web_works">Як працює мережа</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/learn/getting_started_with_the_web/інтернет_та_веб-стандарти/index.html b/files/uk/learn/getting_started_with_the_web/інтернет_та_веб-стандарти/index.html
new file mode 100644
index 0000000000..c25cffdea8
--- /dev/null
+++ b/files/uk/learn/getting_started_with_the_web/інтернет_та_веб-стандарти/index.html
@@ -0,0 +1,164 @@
+---
+title: Інтернет та веб-стандарти
+slug: Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.</p>
+
+<h2 dir="ltr" id="Brief_history_of_the_web">Brief history of the web</h2>
+
+<p dir="ltr">We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)</p>
+
+<p dir="ltr">In the late 1960s, the US military developed a communication network called <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. This can be considered a forerunner of the Web, as it worked on <a href="https://en.wikipedia.org/wiki/Packet_switching">packet switching</a>, and featured the first implementation of the <a href="https://en.wikipedia.org/wiki/Internet_protocol_suite">TCP/IP</a> protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.</p>
+
+<p dir="ltr">In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?</p>
+
+<p dir="ltr">Fast forward to 1989, and TimBL wrote <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> and HyperText and CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.</p>
+
+<p dir="ltr">By late 1990, TimBL had created all the things needed to run the first version of the web — <a href="/en-US/docs/Web/HTTP">HTTP</a>, <a href="/en-US/docs/Web/HTML">HTML</a>, the first web browser, which was called <a href="https://en.wikipedia.org/wiki/WorldWideWeb">WorldWideWeb</a>, an HTTP server, and some web pages to look at.</p>
+
+<p dir="ltr">In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but I did promise you a brief summary.</p>
+
+<p dir="ltr">One last significant data point to share is that in 1994, TimBL founded the <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as <a href="/en-US/docs/Web/CSS">CSS</a> and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, and the web started to look more like the web we know today.</p>
+
+<h2 dir="ltr" id="Web_standards">Web standards</h2>
+
+<p dir="ltr"><strong>Web standards</strong> are the technologies we use to build web sites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).</p>
+
+<p dir="ltr">For example, the <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.</p>
+
+<p dir="ltr">Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the <a href="https://whatwg.org/">WHATWG</a> (who were responsible for the modernization of the HTML language), <a href="https://www.ecma-international.org/">ECMA</a> (who publish the standard for ECMAScript, which JavaScript is based on), <a href="https://www.khronos.org/">Khronos</a> (who publish technologies for 3D graphics, such as WebGL), and others.</p>
+
+<h3 dir="ltr" id="Open_standards">"Open" standards</h3>
+
+<p dir="ltr">One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.</p>
+
+<p dir="ltr">Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.</p>
+
+<p dir="ltr">This allows the web to remain a freely-available public resource.</p>
+
+<h3 dir="ltr" id="Dont_break_the_web">Don't break the web</h3>
+
+<p dir="ltr">Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.</p>
+
+<h2 id="Being_a_web_developer_is_good">Being a web developer is good</h2>
+
+<p>The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?</p>
+
+<p>It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.</p>
+
+<p><em>The only constant is change.</em></p>
+
+<p>Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.</p>
+
+<p>You're a digital creative now. Enjoy the experience, and the potential for earning a living.</p>
+
+<h2 id="Overview_of_modern_web_technologies">Overview of modern web technologies</h2>
+
+<p>There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a>.</p>
+
+<h3 id="Browsers">Browsers</h3>
+
+<p>You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p>
+
+<pre class="notranslate">"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]</pre>
+
+<p>The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.</p>
+
+<h3 id="HTML_CSS_and_JavaScript">HTML, CSS, and JavaScript</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> are the main three technologies you'll use to build a website:</p>
+
+<ul>
+ <li>
+  <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+
+&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+
+  <p>If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.</p>
+ </li>
+ <li>
+  <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'We changed the text!';</pre>
+
+  <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p>
+ </li>
+</ul>
+
+<h3 id="Tooling">Tooling</h3>
+
+<p>Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> inside modern browsers that can be used to debug your code.</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testing tools</a> that can be used to run tests to show whether your code is behaving as you intended it to.</li>
+ <li>Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.</li>
+ <li>So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.</li>
+ <li>Minifiers, which remove all the whitespace from your code files to make it so that they  are smaller and therefore download from the server more quickly.</li>
+</ul>
+
+<h3 id="Server-side_languages_and_frameworks">Server-side languages and frameworks</h3>
+
+<p>HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.</p>
+
+<p>There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.</p>
+
+<p>Example server-side languages include ASP.NET, Python, PHP, and NodeJS.</p>
+
+<h2 id="Web_best_practices">Web best practices</h2>
+
+<p>We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.</p>
+
+<p>When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:</p>
+
+<ul>
+ <li>User 1 might be looking at it on an iPhone, with a small, narrow screen.</li>
+ <li>User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.</li>
+ <li>User 3 might be blind, and using a screenreader to read the web page out to them.</li>
+ <li>User 4 might be using a really old desktop machine that can't run modern browsers.</li>
+</ul>
+
+<p>Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.</p>
+
+<p>You'll come across the below concepts at some point in your studies.</p>
+
+<ul>
+ <li><strong>Cross-browser compatibility</strong> is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.</li>
+ <li><strong>Responsive web design</strong> is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.</li>
+ <li><strong>Performance</strong> means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.</li>
+ <li><strong>Accessibility</strong> means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?</li>
+ <li><strong>Internationalization</strong> means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).</li>
+ <li><strong>Privacy &amp; Security</strong>. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.</li>
+</ul>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web">History of the World Wide Web</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the internet work?</a></li>
+</ul>
diff --git a/files/uk/learn/how_to_contribute/index.html b/files/uk/learn/how_to_contribute/index.html
new file mode 100644
index 0000000000..9d73e3f192
--- /dev/null
+++ b/files/uk/learn/how_to_contribute/index.html
@@ -0,0 +1,83 @@
+---
+title: Як зробити внесок до навчальної бази MDN?
+slug: Learn/How_to_contribute
+translation_of: Learn/How_to_contribute
+---
+<div>{{LearnSidebar}}</div>
+
+<div>Якщо ви тут вперше або після довгих пошуків, це можливо тому що ви зацікавлені зробити власний внесок до області навчання MDN. Це гарні новини!</div>
+
+<p><span class="seoSummary">На цій сторінці ви знайдете все що вам потрібно для того щоб почати допомагати удосконалювати навчаний контент MDN. Є багато речей, які ви можете робити, залежно від кількості наявного часу та на якому етапі ви знаходитесь e <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">початківець</a>, <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">веб розробник</a>, або <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">вчитель</a>.</span></p>
+
+<div class="note">
+<p><strong>Примітка</strong>: Ви можете знайти мануал по написанню нової навчальної статті на сторінці <a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Як написати статтю, щоб допомогти людям вивчити Веб</a>.</p>
+</div>
+
+<h2 id="Знайдіть_конкретні_завдання">Знайдіть конкретні завдання</h2>
+
+<p><strong>Поширеним спосіб, яким люди роблять внески до навчальної бази є читання стеттей, виправлення друкарських помилок та пропозиція покращень. Ми також відаємо додавання прикладів до нашого <a href="https://github.com/mdn/learning-area/">GitHub сховища</a>. Зв'яжіться з нами якщо ви хочете запитати що ще потрібно зробити. </strong></p>
+
+<p>Додавання внесків це чудовий спосіб розважитися під час вивчення нових речей. Якщо ви коли-небудь відчуваєте себе загубленим або маєте запитання, не соромтесь звернутися до нас в <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Навчальній темі для дискусій</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (see at the bottom of this page for details). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> is the topic driver for the Learning Area — you could also try pinging him directly.</p>
+
+<p>The following sections provide some general ideas of the types of tasks you can do.</p>
+
+<h2 id="Im_a_beginner">I'm a beginner</h2>
+
+<p>That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.</p>
+
+<p>Here are some suggested ways you can contribute:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Add tags to our articles</a> (<em>5 min</em>)</dt>
+ <dd>Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">glossary entries</a> and <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">learning articles</a> without any tags to get started.</dd>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt>
+ <dd>As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, please bring it to our attention on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt>
+ <dd>This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.</dd>
+</dl>
+
+<h2 id="Im_a_web_developer">I'm a web developer</h2>
+
+<p>Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's often more important to be understandable than to be overly precise.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>5 min</em>)</dt>
+ <dd>As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>20 minutes</em>)</dt>
+ <dd>Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and you're good to go.</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours or more</em>)</dt>
+ <dd>MDN is lacking simple straightforward articles about using web technologies (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, code samples or interactive learning tools</a> (<em>? hours</em>)</dt>
+ <dd>All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with <a href="http://jsfiddle.net" rel="external">JSFiddle</a> or similar, to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd>
+</dl>
+
+<h2 id="Im_a_teacher">I'm a teacher</h2>
+
+<p>MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Read and review a glossary entry</a> (<em>15 min</em>)</dt>
+ <dd>Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">our mailing list</a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Write a new glossary entry</a> (<em>1 hour</em>)</dt>
+ <dd>Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a> which need your attention. Pick one and go for it.</dd>
+ <dt><a href="/en-US/docs/tag/needsSchema">Add illustrations and/or schematics to articles</a> (<em>1 hour</em>)</dt>
+ <dd>As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the <a href="/en-US/docs/tag/needsSchema">articles that lack illustrative content</a> and pick one you'd like to create graphics for.</dd>
+ <dt><a href="/en-US/Learn/Index">Read and review a learning article</a> (<em>2 hours</em>)</dt>
+ <dd>This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Write a new learning article</a> (<em>4 hours</em>)</dt>
+ <dd>We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create exercises, <abbr title="Multiple Choice Tests">quizzes</abbr> or interactive learning tools</a> (<em>? hours</em>)</dt>
+ <dd>All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Unleash your creativity!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Create learning pathways</a> (<em>? hours</em>)</dt>
+ <dd>In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Community">Join the MDN Community</a></li>
+</ul>
diff --git a/files/uk/learn/html/forms/index.html b/files/uk/learn/html/forms/index.html
new file mode 100644
index 0000000000..be1e8bd595
--- /dev/null
+++ b/files/uk/learn/html/forms/index.html
@@ -0,0 +1,77 @@
+---
+title: Веб-форми
+slug: Learn/HTML/Forms
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Цей модуль містить низку статей, що допоможуть Вам освоїти форми в  HTML. HTML форми  дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал.  В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перед початком цього модуля Вам необхідно щонайменше пройти <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Основні_інструкції">Основні інструкції</h2>
+
+<p>В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.</p>
+
+<p><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша перша HTML форма</a></p>
+
+<p>Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML  форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS  і відправлення даних на сервер.</p>
+
+<p><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Як структурувати HTML форму</a></p>
+
+<p>Спираючись на основи, тепер ми більш детально поглянемо на елементи, які використовуються для забезпечення структури і значення різних частин форми.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Рідні віджети форми</a></dt>
+ <dt></dt>
+ <dt>Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.</dt>
+ <dd></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Надсилання даних форми</a></dt>
+ <dd>В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? <span id="result_box" lang="uk"><span>Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.</span></span></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Підтвердження даних форми</a></dt>
+ <dd>Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.</dd>
+</dl>
+
+<h2 id="Розширені_інструкції">Розширені інструкції</h2>
+
+<p>Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Як створювати користувацькі віджети форм</a></dt>
+ <dd>Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Надсилання форми використовуючи JavaScript</a></dt>
+ <dd>Ця стання покаже Вам шляхиThis article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML5_updates">HTML5 form updates</a></dt>
+ <dd>This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.</dd>
+</dl>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<p>These guides to styling forms with CSS really belong in the <a href="/en-US/docs/Learn/CSS">CSS</a> Learning Area topic, but we are keeping them here for now until we find the time to move them.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>TBD</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+</ul>
diff --git a/files/uk/learn/html/forms/your_first_form/index.html b/files/uk/learn/html/forms/your_first_form/index.html
new file mode 100644
index 0000000000..e34ac6a346
--- /dev/null
+++ b/files/uk/learn/html/forms/your_first_form/index.html
@@ -0,0 +1,298 @@
+---
+title: Your first form
+slug: Learn/HTML/Forms/Your_first_form
+translation_of: Learn/Forms/Your_first_form
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>
+
+<p class="summary">Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Вимоги:</th>
+   <td>Загальна комп'ютерна грамотність, і базове <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">розуміння HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Що_таке_інтернет-форми">Що таке інтернет-форми?</h2>
+
+<p><strong>Web forms</strong> are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a> later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).</p>
+
+<p>A<strong> </strong>web form's HTML is made up of one or more <strong>form controls</strong> (sometimes called <strong>widgets</strong>), plus some additional elements to help structure the overall form — they are often referred to as <strong>HTML forms</strong>. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.</p>
+
+<p>Form controls can also be programmed to enforce specific formats or values to be entered (<strong>form validation</strong>), and paired with text labels that describe their purpose to both sighted and blind users.</p>
+
+<h2 id="Designing_your_form">Designing your form</h2>
+
+<p>Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.</p>
+
+<p>Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:</p>
+
+<ul>
+ <li>Smashing Magazine has some <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>, including an older but still relevant <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> article.</li>
+ <li>UXMatters is also a very thoughtful resource with good advice from <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> to complex concerns such as <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li>
+</ul>
+
+<p>In this article, we'll build a simple contact form. Let's make a rough sketch.</p>
+
+<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>
+
+<p>Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.</p>
+
+<h2 id="Active_learning_Implementing_our_form_HTML">Active learning: Implementing our form HTML</h2>
+
+<p>Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.</p>
+
+<p>Before you go any further, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a> — you'll enter your form HTML into here.</p>
+
+<h3 id="The_HTMLelementform_element">The {{HTMLelement("form")}} element</h3>
+
+<p>All forms start with a {{HTMLelement("form")}} element, like this:</p>
+
+<pre class="brush:html;">&lt;form action="/my-handling-form-page" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes:</p>
+
+<ul>
+ <li>The <code>action</code> attribute defines the location (URL) where the form's collected data should be sent when it is submitted.</li>
+ <li>The <code>method</code> attribute defines which HTTP method to send the data with (usually <code>get</code> or <code>post</code>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: We'll look at how those attributes work in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> article later on.</p>
+</div>
+
+<p>For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.</p>
+
+<h3 id="The_HTMLelementlabel_HTMLelementinput_and_HTMLelementtextarea_elements">The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements</h3>
+
+<p>Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:</p>
+
+<ul>
+ <li>The input field for the name is a {{HTMLelement("input/text", "single-line text field")}}.</li>
+ <li>The input field for the e-mail is an {{HTMLelement("input/email", "input of type email")}}: a single-line text field that accepts only e-mail addresses.</li>
+ <li>The input field for the message is a {{HTMLelement("textarea")}}; a multiline text field.</li>
+</ul>
+
+<p>In terms of HTML code we need something like the following to implement these form widgets:</p>
+
+<pre class="brush:html;" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_mail"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<p>Update your form code to look like the above.</p>
+
+<p>The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the<a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a>attribute on all {{HTMLelement("label")}} elements, which takes as its value the <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> of the form control with which it is associated — this is how you associate a form with its label.</p>
+
+<p>There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in <a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a>.</p>
+
+<p>On the {{HTMLelement("input")}} element, the most important attribute is the <code>type</code> attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a> article later on.</p>
+
+<ul>
+ <li>In our simple example, we use the value {{HTMLelement("input/text")}} for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.</li>
+ <li>For the second input, we use the value {{HTMLelement("input/email")}}, which defines a single-line text field that only accepts a well-formed e-mail address. This turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. It also causes a more appropriate keyboard layout for entering email addresses (e.g. with an @ symbol by default) to appear on devices with dynamic keyboards, like smartphones. You'll find out more about form validation in the <a href="/en-US/docs/Learn/Forms/Form_validation">client-side form validation</a> article later on.</li>
+</ul>
+
+<p>Last but not least, note the syntax of <code>&lt;input&gt;</code> vs. <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. This is one of the oddities of HTML. The <code>&lt;input&gt;</code> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed it with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> attribute like this:</p>
+
+<pre class="brush:html;">&lt;input type="text" value="by default this element is filled with this text"&gt;</pre>
+
+<p>On the other hand,  if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:</p>
+
+<pre class="brush:html;">&lt;textarea&gt;
+by default this element is filled with this text
+&lt;/textarea&gt;</pre>
+
+<h3 id="The_HTMLelementbutton_element">The {{HTMLelement("button")}} element</h3>
+
+<p>The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing <code>&lt;/form&gt;</code> tag:</p>
+
+<pre class="brush:html;">&lt;li class="button"&gt;
+  &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+&lt;/li&gt;</pre>
+
+<p>The {{htmlelement("button")}} element also accepts a <code>type</code> attribute — this accepts one of three values: <code>submit</code>, <code>reset</code>, or <code>button</code>.</p>
+
+<ul>
+ <li>A click on a <code>submit</code> button (the default value) sends the form's data to the web page defined by the <code>action</code> attribute of the {{HTMLelement("form")}} element.</li>
+ <li>A click on a <code>reset</code> button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include one.</li>
+ <li>A click on a <code>button</code> button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with JavaScript.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can also use the {{HTMLElement("input")}} element with the corresponding <code>type</code> to produce a button, for example <code>&lt;input type="submit"&gt;</code>. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.</p>
+</div>
+
+<h2 id="Basic_form_styling">Basic form styling</h2>
+
+<p>Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you don't think you've got the HTML code right, try comparing it with our finished example — see <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">also see it live</a>).</p>
+</div>
+
+<p>Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.</p>
+
+<p>First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:</p>
+
+<pre class="brush: html">&lt;style&gt;
+
+&lt;/style&gt;</pre>
+
+<p>Inside the <code>style</code> tags, add the following CSS:</p>
+
+<pre class="brush:css;">form {
+  /* Center the form on the page */
+  margin: 0 auto;
+  width: 400px;
+  /* Form outline */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Uniform size &amp; alignment */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* To make sure that all text fields have the same font settings
+     By default, textareas have a monospace font */
+  font: 1em sans-serif;
+
+  /* Uniform text field size */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Match form field borders */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Additional highlight for focused elements */
+  border-color: #000;
+}
+
+textarea {
+  /* Align multiline text fields with their labels */
+  vertical-align: top;
+
+  /* Provide space to type some text */
+  height: 5em;
+}
+
+.button {
+  /* Align buttons with the text fields */
+  padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+  /* This extra margin represent roughly the same space as the space
+     between the labels and their text fields */
+  margin-left: .5em;
+}</pre>
+
+<p>Save and reload, and you'll see that your form should look much less ugly.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our version on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">also see it live</a>).</p>
+</div>
+
+<h2 id="Sending_form_data_to_your_web_server">Sending form data to your web server</h2>
+
+<p>The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes.</p>
+
+<p>We provide a <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a> to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.</p>
+
+<p>To name the data in a form you need to use the <code>name</code> attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:</p>
+
+<pre class="brush:html;">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+
+  ...
+</pre>
+
+<p>In our example, the form will send 3 pieces of data named "<code>user_name</code>", "<code>user_email</code>", and "<code>user_message</code>". That data will be sent to the URL "<code>/my-handling-form-page</code>" using the <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> method.</p>
+
+<p>On the server side, the script at the URL "<code>/my-handling-form-page</code>" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending form data</span></a> article later on.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've built your first web form. It looks like this live:</p>
+
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>
+
+<p>That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.</p>
+
+<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/uk/learn/html/index.html b/files/uk/learn/html/index.html
new file mode 100644
index 0000000000..708f04d792
--- /dev/null
+++ b/files/uk/learn/html/index.html
@@ -0,0 +1,54 @@
+---
+title: HTML
+slug: Learn/HTML
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Щоб створювати сайти, спершу слід вивчити {{Glossary('HTML')}} — це фундаментальна технологія, за допомогою якої створюється структура веб-сторінки. HTML використовується, щоб вказати тип вмісту на сторінці: абзац, список, заголовок, посилання, зображення, мультимедіа-плеєр, формуляр або один з багатьох інших елементів.</p>
+
+<h2 id="Шлях_навчання">Шлях навчання</h2>
+
+<p>Найкраще розпочати вивчення веб-розробки з HTML. Почніть зі <a href="/en-US/docs/Web/Guide/HTML/Introduction">Вступу до HTML</a>. Після цього можна розпочати вивчення більш складних тем, наприклад:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a> і його використання для стилізації HTML (наприклад, зміна шрифту та його розміру, додавання рамок та тіней, розбиття сторінки на декілька колонок, додавання анімації та інших візуальних ефектів.)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> та його викорристання  для додавання динамічних функцій веб-сторінкам (наприклад, визначити місце перебування користувача та відмітити його на мапі, додати до інтерфейсу елементи, які з'являються/зникають при натисненні на них, або ж зберегти дані користувача на його комп'ютері та багато іншого.)</li>
+</ul>
+
+<p>Для початку навчання необхідно мати щонайменше базові знання комп'ютера та досвід в користуванні інтернетом (перегляд сайтів, відео та аудіо). Також потрібно мати основні робочі інструменти описані в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a> та знати, як створювати та керувати файлами, це описано в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a>. Ці два розділи знаходяться в модулі для початківців <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>.</p>
+
+<p>Перед вивченням рекомендується ознайомится зі статтею <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>, але це необов'язково. Багато матеріалу зі статті <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a> більш детально охоплює модуль <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>
+
+<h2 id="Модулі">Модулі</h2>
+
+<p>Ця тема містить модулі, які рознашовані в порядку вивчення. Слід розпочати навчання від першого з них:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a></dt>
+ <dd>Цей модуль надає базові знання для подальщої роботи. Він знайомить з важливими поняттями синтаксису та вчить застосовувати код HTML до тексту, створювати посилання, та створювати структуру сторінки за допомогою HTML.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a></dt>
+ <dd>Цей модуль навчить використовувати HTML для вставки мультимедіа-файлів на вашу сторінку. Ви навчитеся вставляти на вашу сторінку зображення, відео, аудіо та навіть цілі сторінки.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables">Таблиці HTML</a></dt>
+ <dd>Відображення табличних даних на сторінці зрозумілим, {{glossary("Accessibility", "доступним")}} шляхом, може стати викликом. Цей модуль охоплює основи розмітки таблиць, а також більш складні понняття, наприклад, додавання заголовків колонок.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">Формуляри HTML</a></dt>
+ <dd>Формуляри є дуже важливою частиною Web — вони забезпечують переважну частину функціональності для взаємодії з веб-сайтом, наприклад, реєстрація чи вхід, залишення коментаря, покупка продуктів та інше. Цей модуль навчить вас створювати формуляри, якими користується клієнт.</dd>
+</dl>
+
+<h2 id="Вирішення_основних_проблем_HTML">Вирішення основних проблем HTML</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Howto">Вирішення основних проблем HTML</a> містить посилання на секції, в яких пояснюється як використовувати HTML для вирішення основних проблем пристворенні веб-сторінки: робота з заголовками, додавання зображень чи відео, підкреслення вмісту, ствонення простого формуляру тощо.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt>     </dt>
+ <dt>     <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Веб форми</a></dt>
+ <dd>Цей модуль містить низку статей, які допоможуть вам засвоїти основи веб-форм. Веб-форми - це дуже потужний інструмент для взаємодії з користувачами - найчастіше вони використовуються для збору даних від користувачів або дозволяють їм контролювати користувальницький інтерфейс. Однак з історичних та технічних причин не завжди очевидно, як використати їх на повний потенціал. Ми охопимо всі основні аспекти веб-форм, включаючи розміщення їх структури HTML, стилі управління формами, перевірку даних форми та подання даних на сервер.</dd>
+ <dt></dt>
+ <dt>     <a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> на MDN</dt>
+ <dd>Основа документації HTML на MDN. Вона містить детальні описи елементу (тега) та його атрибути — якщо ви хочете знати, які атрибути та значення може мати елемент, вам варто ознайомитися з цим розділом.</dd>
+</dl>
+</div>
diff --git a/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..4d333ac64a
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,322 @@
+---
+title: Створення гіперпосилань
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Гіперпосилання дійсно важливі — це те що робить Інтернет <em>інтернетом</em>. Ця стаття показує необхідний синтаксис для створення гіперпосилання а також практику їхнього використання. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Базове знання HTML (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>). Форматування тексту (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Вивчити як користуватись гіперпосиланнями ефективно і з'єднювати декілька файлів разом.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Що_таке_гіперпосилання">Що таке гіперпосилання?</h2>
+
+<p>Гіперпосилання це одне з найбільш вражаючих інновацій, що Інтернет може нам запропонувати. Хоча, вони були ще з самогу початку Інтернету, але вони це те що робить Інтернет <em>Інтернетом</em> — вони дозволяють зв'язати наші документи з будь-яким іншим документом (або іншим ресурсом), ми також можем зробити посилання на конкретні частини документу, і можемо зробити наші документи, (сайти, ресурси) доступними використовуючи просту адресу (на відміну від звичайних програм, які повинні буди встановлені і налаштовані). Практично будь-який контент може бути перетворений в посилання. Клік на таке посилання переведе користувача на іншу веб-адресу ({{glossary("URL")}}).</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: URL може посилатись на HTML файли, текстові файли, зображення, текстові документи, відео і аудіо файли, та будь-які інші ресурси які можуть знаходитись в Інтернеті. Якщо браузер не знає як відобразити або опрацювати файл, він запитає у користувача чи він хоче відкрити файл (в такому випадку процес відкриття і обробки файлу передається до відповідної програми) або завантажити файл (в такому випадку користувач може повернутись до завантаженого файлу пізніше.)</p>
+</div>
+
+<p>Домашня сторінка BBC, для прикладу, містить велику кількість посилань нетільки на новини, але також на різні розділи сайту (навігація), сторінки логіну та реєстрації (інструменти користувача) та інші.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Anatomy_of_a_link">Anatomy of a link</h2>
+
+<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result:</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>
+
+<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3>
+
+<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p>
+</div>
+
+<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3>
+
+<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p>
+
+<ul>
+ <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li>
+ <li>Turn some of the content into links.</li>
+ <li>Include title attributes.</li>
+</ul>
+
+<h3 id="Block_level_links">Block level links</h3>
+
+<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code>&lt;a&gt;&lt;/a&gt;</code> tags.</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
+  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p>
+</div>
+
+<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2>
+
+<p>To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.</p>
+
+<p>A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. For example Mozilla's English homepage is located at <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<p>URLs use paths to find files. Paths specify where in the filesystem the file you are interested in is located. Let's look at a simple example of a directory structure (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The <strong>root</strong> of this directory structure is called <code>creating-hyperlinks</code>. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an <code>index.html</code> file and a <code>contacts.html</code>. In a real website, <code>index.html</code> would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).</p>
+
+<p>There are also two directories inside our root — <code>pdfs</code> and <code>projects</code>. These each have a single file inside them — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p>
+
+<ul>
+ <li>
+  <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
+Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Document_fragments">Document fragments</h3>
+
+<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p>
+
+<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>
+
+<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p>
+
+<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p>
+
+<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>
+
+<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3>
+
+<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p>
+
+<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p>
+
+<p>An absolute URL will always point to the same location, no matter where it is used.</p>
+
+<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p>
+
+<h2 id="Link_best_practices">Link best practices</h2>
+
+<p>There are some best practices to follow when writing links. Let's look at these now.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_clear_link_wording">Use clear link wording</h3>
+
+<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p>
+
+<ul>
+ <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li>
+ <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li>
+ <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li>
+</ul>
+
+<p>Let's look at a specific example:</p>
+
+<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Download Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Click here
+&lt;/a&gt;
+to download Firefox&lt;/p&gt;
+</pre>
+
+<p>Other tips:</p>
+
+<ul>
+ <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li>
+ <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li>
+ <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li>
+ <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li>
+</ul>
+
+<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3>
+
+<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p>
+
+<ul>
+ <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li>
+ <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li>
+</ul>
+
+<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3>
+
+<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p>
+
+<ul>
+ <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li>
+ <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li>
+</ul>
+
+<p>Let's look at some examples, to see what kind of text can be used here:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Download the sales report (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/" target="_blank"&gt;
+  Watch the video (stream opens in separate tab, HD quality)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Play the car game (requires Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3>
+
+<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=en-US"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Download Latest Firefox for Windows (64-bit) (English, US)
+&lt;/a&gt;</pre>
+
+<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2>
+
+<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p>
+
+<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>You should:</p>
+
+<ol>
+ <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li>
+ <li>Turn each page name into a link to that page.</li>
+ <li>Copy the navigation menu across to each page.</li>
+ <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li>
+</ol>
+
+<p>The finished example should end up looking something like this:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p>
+</div>
+
+<h2 id="E-mail_links">E-mail links</h2>
+
+<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p>
+
+<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
+</pre>
+
+<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
+
+<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p>
+
+<h3 id="Specifying_details">Specifying details</h3>
+
+<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>
+
+<p>Here's an example that includes a cc, bcc, subject and body:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
+  Send mail with cc, bcc, subject and body
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&amp;) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p>
+</div>
+
+<p>Here are a few other sample <code>mailto</code> URLs:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/uk/learn/html/introduction_to_html/debugging_html/index.html b/files/uk/learn/html/introduction_to_html/debugging_html/index.html
new file mode 100644
index 0000000000..1c6e107e7b
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/debugging_html/index.html
@@ -0,0 +1,186 @@
+---
+title: Дебаґінг HTML
+slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+tags:
+  - HTML
+  - Розмітка
+  - валідатор
+  - веб-сторінок
+  - виправлення
+  - дебаґінг
+  - для початківців
+  - кодинг
+  - перевірка
+  - помилок
+  - уроки
+  - як перевірити
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary"><span id="result_box" lang="uk"><span>Написати HTML добре, але що, якщо щось піде не так, і ви не можете з'ясувати, де помилка в коді?</span> <span>Ця стаття представить вам деякі інструменти, які допоможуть вам знайти та виправити помилки в HTML.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Знайомство з HTML, як наведено в прикладі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML</a> та <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td><span id="result_box" lang="uk"><span>Дізнатись основи використання інструментів налагодження (дебаґінга), щоб знайти проблеми в HTML.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Дебаґінг_не_страшний">Дебаґінг не страшний</h2>
+
+<p><span id="result_box" lang="uk"><span>Коли ви пишете код певного виду, все, як правило, добре, доки не настає страшний момент, коли виникла помилка - ви зробили щось не так, тому ваш код не працює - або взагалі, або не зовсім так, як ви хотіли.</span> <span>Наприклад, наведене нижче показує помилку при спробі </span></span> {{glossary("compile")}} <span lang="uk"><span> просту програму, написану на мові "Rust".</span></span></p>
+
+<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> <span id="result_box" lang="uk"><span>Тут повідомлення про помилку досить легко зрозуміти</span></span> — "неузгоджений подвійний ланцюг кодування". <span id="result_box" lang="uk"><span>Якщо ви подивитеся на цей список, можливо, ви побачите, як це зробити</span></span> <code>println!(Hello, world!");</code> <span id="result_box" lang="uk"><span>може логічно не вистачати подвійної цитати.</span> <span>Проте повідомлення про помилку можуть швидко ускладнюватися і менш легко інтерпретуватися, коли програми стають більшими, і навіть прості випадки можуть трохи налякати того, хто не знає про Руст.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Дебаґінг не повинен бути страшним - це ключ до комфортного написання і налагоджування будь-якої мови програмування або коду, знайомство як з мовою так і з інструментами.</span></span></p>
+
+<h2 id="HTML_та_дебаґінг">HTML та дебаґінг</h2>
+
+<p><span id="result_box" lang="uk"><span>HTML не так складно зрозуміти, як Rust.</span> <span>HTML не компілюється в іншу форму, перш ніж браузер проаналізує його та покаже результат</span></span> (він <em>інтерпретується</em>, а не <em>компілюється</em>). І синтаксис HTML {{glossary("element")}} набагато легше зрозуміти, ніж "справжню мову програмування", таку як Rust, {{glossary("JavaScript")}}, або {{glossary("Python")}}. Спосіб, за допомогою якого веб-браузери аналізують HTML є набагато більш <strong>дозвільним, </strong>ніж мови програмування, що є і добре, і погано одночасно.</p>
+
+<h3 id="Дозвільний_код">Дозвільний код</h3>
+
+<p><span id="result_box" lang="uk"><span>Отже, що ми маємо на увазі під дозвільним?</span> <span>Ну, звичайно, коли ви робите щось неправильне в коді, є два основних типи помилок, які ви зустрінете:</span></span></p>
+
+<ul>
+ <li><strong>Синтаксичні помилки</strong>: <span id="result_box" lang="uk"><span>Це орфографічні помилки у вашому коді, які фактично спричиняють непрацездатність програми, як-от помилка Rust, показана вище.</span> <span>Зазвичай їх можна легко виправити, якщо ви знайомі з синтаксисом мови та знаєте, що означає повідомлення про помилку.</span></span></li>
+ <li><strong>Логічні помилки</strong>: <span id="result_box" lang="uk"><span>Це помилки, коли синтаксис дійсно правильний, але код не є тим, що ви його намірили, а це означає, що програма працює неправильно.</span> <span>Ці помилки важче фіксувати, ніж синтаксичні помилки, тому що немає повідомлення про помилку, яка спрямовує вас до джерела помилки.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Сам по собі HTML не страждає від синтаксичних помилок, оскільки браузери розуміють його належним чином, що означає, що сторінка все одно відображатиметься, навіть якщо є синтаксичні помилки.</span> <span>Браузери мають вбудовані правила, які визначають, як інтерпретувати неправильно написану розмітку, тому ви все одно щось отримаєте, навіть якщо це не те, що ви очікували.</span> <span>Це, звичайно, може бути проблемою!</span></span></p>
+
+<div class="note">
+<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Розібратись в HTML легко, тому що коли веб-мережа була тільки створена, було вирішено, що надання користувачам можливостей публікувати свій вміст було важливішим, ніж переконатися, що синтаксис абсолютно правильний.</span> <span>Веб-мережа, ймовірно, не була б настільки популярною, як є сьогодні, якщо б вона була більш складною від самого початку.</span></span></p>
+</div>
+
+<h3 id="Активне_навчання_вивчення_допустимого_коду"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: вивчення допустимого коду</span></span></h3>
+
+<p><span class="short_text" id="result_box" lang="uk"><span>Настав час вивчити дозвільний характер HTML-коду.</span></span></p>
+
+<ol>
+ <li>По-перше, завантажте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> і збережіть його локально. Ця демоверсія спеціально написана, щоб мати деякі помилки <span id="result_box" lang="uk"><span>в ньому, щоб ми могли їх досліджувати (розмітка HTML, як наголошується, <strong>погано сформована</strong>, на відміну від <strong>добре сформованої</strong>)</span></span>.</li>
+ <li><span id="result_box" lang="uk"><span>Далі відкрийте його в браузері.</span> <span>Ви побачите щось подібне</span></span>:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
+ <li><span id="result_box" lang="uk"><span>Це відразу не виглядає чудово</span></span>; <span id="result_box" lang="uk"><span>давайте подивимося на вихідний код, щоб побачити, чи зможемо ми зрозуміти, чому (показано лише вміст body)</span></span>;
+  <pre class="brush: html">&lt;h1&gt;Приклади HTML дебаґінга&lt;/h1&gt;
+
+&lt;p&gt;<span class="short_text" id="result_box" lang="uk"><span>Що викликає помилки в HTML</span></span>?
+
+&lt;ul&gt;
+  &lt;li&gt;Незамкнені елементи: <span id="result_box" lang="uk"><span>Якщо елемент &lt;strong&gt; не закрито належним чином,
+      його ефект може поширюватися на ті області, які ви не мали наміру ним огортати.</span></span>
+
+  &lt;li&gt;<span id="result_box" lang="uk"><span>Погано вкладені елементи</span></span>:  <span id="result_box" lang="uk"><span>правильне вставлення елементів також дуже важливо
+      для правильного кодування</span></span>. &lt;strong&gt;strong &lt;em&gt;виділено strong?&lt;/strong&gt;
+      що це таке?&lt;/em&gt;
+
+  &lt;li&gt;Незакриті атрибути: <span id="result_box" lang="uk"><span>Інше поширене джерело HTML-проблем.</span>
+      <span>Давайте розглянемо приклад</span></span>: &lt;a href="https://www.mozilla.org/&gt;Посилання
+      на домашню сторінку Mozilla&lt;/a&gt;
+&lt;/ul&gt;</pre>
+ </li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Давайте розглянемо проблеми:</span></span>
+  <ul>
+   <li>{{htmlelement("p","paragraph")}} та {{htmlelement("li","list item")}} елементи не мають закриваючих тегів. <span id="result_box" lang="uk"><span>Дивлячись на зображення вище, це, здається, не вплинуло на рендеринг розмітки надто погано, оскільки легко визначити, де повинен закінчуватися один елемент, а інший повинен починатися.</span></span></li>
+   <li>Перший {{htmlelement("strong")}} елемент не має закриваючого тега. <span id="result_box" lang="uk"><span>Це дещо ускладнює, оскільки важко сказати, де елемент повинен закінчуватися.</span> <span>Фактично, всю решту тексту було виділено.</span></span></li>
+   <li><span class="short_text" id="result_box" lang="uk"><span>Цей розділ погано вкладено</span></span>: <code>&lt;strong&gt;strong &lt;em&gt;виділено strong?&lt;/strong&gt; що це таке?&lt;/em&gt;</code>. Складно сказати, як це було інтерпретовано із-за попередньої проблеми.</li>
+   <li>{{htmlattrxref("href","a")}} <span id="result_box" lang="uk"><span>Значення атрибута має відсутні подвійні лапки закриття.</span> <span>Це, здається, викликало найбільшу проблему - посилання взагалі не відображається.</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="uk"><span>Тепер давайте подивимось на розмітку браузера, на відміну від розмітки в вихідному коді.</span> <span>Для цього ми можемо використовувати інструменти розробника веб-браузера.</span> <span>Якщо ви не знайомі з використанням інструментів розробника веб-браузера, перегляньте кілька хвилин</span></span> <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li>
+ <li><span id="result_box" lang="uk"><span>В інспекторі DOM ви можете дізнатись, як виглядає виділена розмітка</span></span>:<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
+ <li><span id="result_box" lang="uk"><span>Використовуючи інспектора DOM, давайте розглянемо наш код докладно, щоб побачити, як веб-браузер намагався виправити наші помилки HTML (ми зробили огляд у Firefox, інші сучасні браузери повинні дати той самий результат)</span></span>:
+  <ul>
+   <li><span id="result_box" lang="uk"><span>У параграфах та пунктах списку були додані закриті теги</span></span>.</li>
+   <li><span id="result_box" lang="uk"><span>Не зрозуміло, де слід закрити перший елемент </span></span><code>&lt;strong&gt;</code>, <span id="result_box" lang="uk"><span>тому браузер обгорнув кожен окремий блок тексту своїм тегом strong, аж донизу документа!</span></span></li>
+   <li><span id="result_box" lang="uk"><span>Неправильне вкладення було виправлено браузером, як це</span></span>:
+    <pre class="brush: html">&lt;strong&gt;strong
+  &lt;em&gt;виділено strong?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; що це таке?&lt;/em&gt;</pre>
+   </li>
+   <li><span id="result_box" lang="uk"><span>Посилання з відсутніми подвійними лапками повністю вилучено.</span> <span>Останній елемент списку виглядає так</span></span> :
+    <pre class="brush: html">&lt;li&gt;
+  &lt;strong&gt;Незакриті атрибути: <span class="short_text" id="result_box" lang="uk"><span>Інше поширене джерело проблем з HTML</span></span>.
+  Давайте подивимось на приклад: &lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="Валідація_HTML">Валідація HTML</h3>
+
+<p><span id="result_box" lang="uk"><span>Таким чином, ви можете побачити з наведеного вище прикладу, що ви дійсно хочете, щоб ваш HTML був добре сформований!</span> <span>Але як?</span> <span>У невеликому прикладі, подібному до вищенаведенного, легко пройти по строках та знайти помилки, а як при величезному, складному HTML-документі?</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Найкраща стратегія полягає в тому, щоб запустити HTML-сторінку за допомогою</span></span> <a href="https://validator.w3.org/">Markup Validation Service</a> — <span id="result_box" lang="uk"><span>сервісу, що створений та підтримується W3C, організацією, яка стежить за специфікаціями, що визначають HTML, CSS та інші веб-технології.</span> <span>Ця веб-сторінка приймає HTML-документ у вигляді входу, проходить через нього і дає вам звіт, в якому показує, що неправильно з вашим HTML</span></span>.</p>
+
+<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+
+<p><span id="result_box" lang="uk"><span>Щоб вказати HTML для перевірки, ви можете надати цьому сервісу адресу свого сайту, завантажити файл HTML або безпосередньо ввести якийсь HTML-код</span></span>.</p>
+
+<h3 id="Активне_навчання_перевірка_документа_HTML"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка документа HTML</span></span></h3>
+
+<p><span class="short_text" id="result_box" lang="uk"><span>Давайте спробуємо це з нашим</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p>
+
+<ol>
+ <li>По-перше, завантажте <a href="https://validator.w3.org/">Markup Validation Service</a> в одній із вкладок браузера, якщо вона ще не відкрита.</li>
+ <li>Перейдіть на вкладку <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> (Перевірити за прямим введенням).</li>
+ <li><span id="result_box" lang="uk"><span>Скопіюйте весь приклад коду документу (а не тільки body) і вставте його у велику область тексту, показану в </span></span> Markup Validation Service.</li>
+ <li>Натисніть кнопку <em>Check (Перевірити)</em>.</li>
+</ol>
+
+<p><span class="short_text" id="result_box" lang="uk"><span>В результаті з'явиться список помилок та інша інформація</span></span>.</p>
+
+<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+
+<h4 id="Інтерпретація_повідомлень_про_помилки"><span class="short_text" id="result_box" lang="uk"><span>Інтерпретація повідомлень про помилки</span></span></h4>
+
+<p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p>
+
+<ul>
+ <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li>
+ <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li>
+ <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li>
+ <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li>
+ <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span>
+  <pre>приклад: &lt;a href="https://www.mozilla.org/&gt;Посилання на домашню сторінку Mozilla&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p>
+ </li>
+ <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li>
+ <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li>
+ <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li>
+ <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li>
+ <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span>
+  <pre>приклад: &lt;a href="https://www.mozilla.org/&gt;Посилання на домашню сторінк</pre>
+ </li>
+ <li>
+  <div class="note">
+  <p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Атрибут, який не містить замикаючих </span></span><span lang="uk"><span>лап</span></span>о́<span lang="uk"><span>к, може призвести до відкритого елемента, оскільки решту документа інтерпретують як вміст атрибута.</span></span></p>
+  </div>
+ </li>
+ <li>"Незакритий елемент <code>ul</code>": Це не дуже корисно, як {{htmlelement("ul")}} елемент є закритим правильно. <span class="short_text" id="result_box" lang="uk"><span>Ця помилка виникає через те, що</span></span> {{htmlelement("a")}} елемент є незакритим, через відсутність кінцевих лапо́к.</li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Якщо ви не можете з'ясувати, що означає кожне повідомлення про помилку, не хвилюйтеся - хороша ідея - спробувати одночасно виправити кілька помилок.</span> <span>Потім спробуйте повторно підтвердити свій HTML, щоб показати, які помилки залишаються.</span> <span>Іноді виправлення попередньої помилки також позбуває інших повідомлень про помилку - деякі помилки часто можуть бути викликані однією проблемою, що тягне інші, як ефект доміно.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Ви будете знати, коли всі ваші помилки виправлені, коли ви побачите наступний банер у вашому виводі:</span></span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<p><span id="result_box" lang="uk"><span>Тобто, "Документ перевірений відповідно до зазначених схем та додаткових обмежень, перевірених валідатором</span></span>".</p>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><span id="result_box" lang="uk"><span>Отже, у нас є вступ до дебаґінга в HTML, який повинен надати вам деякі корисні навички, щоб розраховувати, коли ви почнете налагоджувати CSS, JavaScript та інші типи коду пізніше в своїй кар'єрі.</span> <span>Це також означає завершення вивчення статей "Введення в модулі HTML" - тепер ви можете продовжувати тестування самостійно з нашими оцінками: перший з них за посиланням нижче.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/uk/learn/html/introduction_to_html/getting_started/index.html b/files/uk/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..d1250c915c
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,522 @@
+---
+title: Початок роботи з HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+tags:
+  - HTML
+  - Мова
+  - Основи
+  - Розмітка
+  - атрибути
+  - веб-сторінки
+  - для початківців
+  - елементи
+  - лапки
+  - символи
+  - теги
+  - українською мовою
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">У цій статті ми пояснимо найбільш базові поняття HTML — що таке елементи, атрибути та інші терміни, які ви могли чути, і яке завдання вони виконують. Ми покажемо, як побудований елемент HTML і з чого складається типова HTML-сторінка, а також пояснимо інші особливості мови. В процесі навчання ми будемо трохи бавитися з кодом, щоб вам було цікаво!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Базове знання комп'ютера, <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">встановлене основне програмне забезпечення</a>, базове розуміння <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">роботи з файлами</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Що_таке_HTML">Що таке HTML?</h2>
+
+<p>{{glossary("HTML")}} (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це <em>мова розмітки</em>, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії {{glossary("Element", "елементів")}}, які ви використовуєте для того, щоб вкласти, загорнути чи <em>розмітити</em> частини сторінки, щоб вони мали певний вигляд. {{glossary("Tag", "Теги")}} можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту:</p>
+
+<p><code>Мій кіт дуже сердитий</code></p>
+
+<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу ({{htmlelement("p")}}):</p>
+
+<pre class="brush: html">&lt;p&gt;Мій кіт дуже сердитий&lt;/p&gt;</pre>
+
+<h2 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h2>
+
+<p>Погляньмо на елемент "параграф" детальніше. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Основні частини елементу такі:</p>
+
+<ol>
+ <li><strong>Початковий тег:</strong> містить назву елементу (в цьому випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li>
+ <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у цьому випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li>
+ <li><strong>Вміст:</strong> вміст елементу, у цьому випадку — просто текст. </li>
+ <li><strong>Елемент:</strong> початковий тег разом із кінцевим тегом та вмістом між ними складають елемент.</li>
+</ol>
+
+<h3 id="Активне_навчання_створення_вашого_першого_HTML-елементу">Активне навчання: створення вашого першого HTML-елементу</h3>
+
+<p>Відредагуйте рядок нижче у полі <em>Input, </em> загорнувши його тегами <code>&lt;em&gt; </code>та <code>&lt;/em&gt;</code> (поставте <code>&lt;em&gt;</code> на початку, щоб <em>відкрити елемент</em>, та <code>&lt;/em&gt;</code> в кінці, щоб <em>закрити елемент</em>) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі <em>Output</em>.</p>
+
+<p>Якщо ви зробите помилку, ви можете завжди скинути редагування кнопкою <em>Reset</em>. Якщо ви справді застрягнете, натисніть кнопку <em>Show solution</em>, щоб побачити відповідь.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;This is my text.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 2em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;em&gt;This is my text.&lt;/em&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>
+
+<h3 id="Вкладені_елементи">Вкладені елементи</h3>
+
+<p>Ви можете вкладати одні елементи всередину інших. Це називаєте <strong>вкладенням</strong>. Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p>
+
+<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент &lt;strong&gt;, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p>
+
+<h3 id="Блокові_та_рядкові_елементи">Блокові та рядкові елементи</h3>
+
+<p>Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.</p>
+
+<ul>
+ <li>Блокові елементи утворюють блок на сторінці — вони розміщуються з нового рядка, незалежно від того, який елемент був перед ними, і кожен наступний після них елемент також буде розміщуватися у новому рядку. Блокові елементи найчастіше є структурними складовими сторінки, які представляють, наприклад, параграфи (абзаци), списки, меню навігації тощо. Блокові елементи не можуть вкладатися в рядковий елемент, але можуть вкладатися в інший блоковий елемент.</li>
+ <li>Рядкові елементи розміщують в блокових елементах і вони займають лише невеликі частини документу, а не цілі параграфи чи інші блоки. Рядковому елементу не потрібно починатися з нового рядка, зазвичай їх розміщують всередині параграфів, наприклад, посилання {{htmlelement("a")}} чи виділення {{htmlelement("em")}} та {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Візьміть такий приклад:</p>
+
+<pre><code>&lt;em&gt;перший&lt;/em&gt;&lt;em&gt;другий&lt;/em&gt;&lt;em&gt;третій&lt;/em&gt;
+
+&lt;p&gt;четвертий&lt;/p&gt;&lt;p&gt;п'ятий&lt;/p&gt;&lt;p&gt;шостий&lt;/p&gt;</code></pre>
+
+<p>{{htmlelement("em")}} є рядковим елементом, тому перші три елементи розміщують в одному рядку, без відстаней між ними. Натомість {{htmlelement("p")}} є блоковим елементом, він розміщується з нового рядка і має відстані над і під ним (ці відстані визначаються у стиляхt <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, які браузер за замовчанням застосовує до параграфів).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: HTML5 пропонує інший підхід до визначення категорій елементів (див. <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. </p>
+</div>
+
+<div class="note">
+<p><strong>Примітка</strong>: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> та <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
+</div>
+
+<h3 id="Порожні_елементи">Порожні елементи</h3>
+
+<p>Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, {{htmlelement("img")}}, який вставляє зображення на те місце, куди він поставлений:</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>Такий вигляд він має на сторінці:</p>
+
+<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p>
+
+<h2 id="Атрибути">Атрибути</h2>
+
+<p>Елементи також можуть мати атрибути, які мають такий вигляд: </p>
+
+<p><img alt='&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє надати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.</p>
+
+<p>Атрибут завжди повинен мати:</p>
+
+<ol>
+ <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li>
+ <li>Ім'я атрибута, за яким іде знак дорівнює.</li>
+ <li>Значення атрибута, загорнене в прямі лапки.</li>
+</ol>
+
+<h3 id="Активне_навчання_додавання_атрибута_до_елемента">Активне навчання: додавання атрибута до елемента</h3>
+
+<p>Поглянемо на інший елемент — {{htmlelement("a")}} (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: </p>
+
+<ul>
+ <li><code>href</code>: значення цього атрибута визначає веб-адресу, куди саме буде вести посилання. Наприклад, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: цей атрибут містить додаткову інформацію про посилання, а саме назву сторінки, на яку веде посилання. Наприклад, <code>title="The Mozilla homepage"</code>. Ця назва буде з'являтися у вигляді підказки при наведенні курсором на посилання. </li>
+ <li><code>target</code>: цей атрибут визначає контекст переглядання сторінки в браузері. Наприклад, <code>target="_blank"</code> відобразить посилання в новій вкладці. Якщо ви хочете відкривати посилання в тій самій вкладці, просто опустіть цей атрибут.</li>
+</ul>
+
+<p>Відредагуйте рядок нижче в полі <em>Input,</em>так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <code>&lt;a&gt;</code>, потім атрибути <code>href</code> і <code>title</code>. Насамкінець вкажіть значення атрибута <code>target, </code>так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі <em>Output</em>. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті <code>href</code> element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. </p>
+
+<p>Ви завжди можете скинути всі зміни кнопкою <em>Reset</em>. Також ви можете подивитися відповідь, натиснувши кнопку <em>Show solution</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&amp;lt;p&amp;gt;A link to my favourite website.&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 2em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;p&gt;A link to my &lt;a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank"&gt;favourite website&lt;/a&gt;.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p>
+
+<h3 id="Булеві_атрибути">Булеві атрибути</h3>
+
+<p>Іноді ви можете побачити в коді лише назву атрибута, без вказаного значення. Це цілком нормальні атрибути, вони називаються булевими. Вони мають лише одне значення, зазвичай таке ж саме, як і назва самого атрибута. Для прикладу візьмемо атрибут {{htmlattrxref("disabled", "input")}}, який робить поля форми неактивними (засіреними), щоб користувачі не могли їх заповнити. </p>
+
+<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): </p>
+
+<pre class="brush: html">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Обидва записи дадуть такий результат: </p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p>
+
+<h3 id="Опускання_лапок_навколо_значень_атрибутів">Опускання лапок навколо значень атрибутів</h3>
+
+<p>Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут <code>href</code> так:</p>
+
+<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;favourite website&lt;/a&gt;</pre>
+
+<p>Однак, якщо ми додамо другий атрибут <code>title</code>, розмітка порушиться:</p>
+
+<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;favourite website&lt;/a&gt;</pre>
+
+<p>Таку розмітку браузер розуміє неправильно, вважаючи, що <code>title</code> — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, <code>Mozilla </code>і <code>homepage</code>. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. </p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}</p>
+
+<p>Ми радимо завжди писати атрибути в лапках, це дозволяє уникнути багатьох проблем і робить код більш читабельним. </p>
+
+<h3 id="Лапки_подвійні_чи_одинарні">Лапки подвійні чи одинарні?</h3>
+
+<p>У цій статті всі значення атрибутів загорнені в звичайні прямі лапки. Проте іноді ви можете побачити, що значення загортається прямими апострофами на початку і в кінці (одинарні лапки). Вживання перших і других в HTML є питанням смаку, ви можете сміливо використовувати ті лапки, які зручно. Обидва записи будуть рівноцінними.</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:</p>
+
+<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.</p>
+
+<h2 id="Анатомія_HTML-документу">Анатомія HTML-документу</h2>
+
+<p>Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Тут ми маємо:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, <span id="result_box" lang="uk"><span>що може означати автоматичну перевірку помилок та інші</span> <span>корисні речі.</span> <span>Доктайп приблизно такий вигляд</span></span>:
+
+  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  <span id="result_box" lang="uk"><span>Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював</span></span> . <code>&lt;!DOCTYPE html&gt;</code> <span id="result_box" lang="uk"><span>це найкоротший рядок символів, який вважається валідним доктайпом;</span> <span>це все, що вам дійсно потрібно знати</span></span>.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) <span id="result_box" lang="uk"><span>на всій сторінці, іноді його називають кореневим (root) елементом.</span></span></li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: Елемент {{htmlelement("head")}}. <span id="result_box" lang="uk"><span>Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки.</span> <span>Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо.</span> <span>Ви дізнаєтеся більше про це в наступній статті цієї серії.</span></span></li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: <span id="result_box" lang="uk"><span>Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей.</span> <span>По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу.</span> <span>Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.</span></span></li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: Елемент {{htmlelement("title")}}. <span id="result_box" lang="uk"><span>Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.</span></span></li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: Елемент {{htmlelement("body")}}. <span id="result_box" lang="uk"><span>Цей елемент містить <em>весь</em> контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, чи це є текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.</span></span></li>
+</ol>
+
+<h3 id="Активне_навчання_додавання_деяких_функцій_у_документ_HTML"><span id="result_box" lang="uk"><span>Активне навчання: додавання деяких функцій у документ HTML</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:</span></span></p>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Скопіюйте наведений вище приклад HTML сторінки</span></span>.</li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Створіть новий файл у текстовому редакторі</span></span>.</li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Вставте код у новий текстовий файл</span></span>.</li>
+ <li>Збережіть файл як <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка</strong>: Ви також можете знайти цей основний HTML шаблон на <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p><span id="result_box" lang="uk"><span>Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як має вигляд відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат.</span> <span>Спочатку це матиме такий вигляд:</span></span></p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;"> <span id="result_box" lang="uk"><span>В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора </span></span>в цьому прикладі <span lang="uk"><span>показано лише зміст елемента</span></span> {{htmlelement("body")}}) Спробуйте зробити наступне:</p>
+
+<ul>
+ <li>За відкритим тегом елемента {{htmlelement("body")}} додайте головний заголовок для документу. Він повинен бути загорнутий поміж відкриваючого тега <code>&lt;h1&gt;</code> і закриваючого тега <code>&lt;/h1&gt;</code>.</li>
+ <li><span id="result_box" lang="uk"><span>Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.</span></span></li>
+ <li><span id="result_box" lang="uk"><span>Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег </span></span><code>&lt;strong&gt;</code> і закриваючий тег <code>&lt;/strong&gt;</code>.</li>
+ <li>Додайте посилання до свого абзацу, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">це було описано раніше в статті</a>.</li>
+ <li>Додайте зображення в свій документ перед абзацем, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">це було описано раніше в статті</a>. Ви можете вважати себе крутим хакером, якщо зможете використати іншу картинку (з власного комп'ютера або з Інтернету).</li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки </span></span><em>Reset</em>. <span id="result_box" lang="uk"><span>Якщо ви дійсно заплутались, натисніть кнопку</span></span> <em>Show solution</em>, щоб побачити відповідь.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+img {
+  max-width: 100%;
+}
+
+.output {
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\
+ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\
+ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\
+&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p>
+
+<h3 id="Пробіли_в_HTML">Пробіли в HTML</h3>
+
+<p><span id="result_box" lang="uk"><span>У наведених вище прикладах, мабуть, ви помітили, що багато пробілів в коді - це взагалі не обов'язково;</span> <span>два наступні фрагменти коду є еквівалентними</span></span>:</p>
+
+<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Незалежно від того, скільки пустого місця ви використовуєте (яке може містити пробіл, а також відступи рядків), HTML-аналізатор зменшує кожен з них до одного пробілу під час відтворення коду.</span> <span>Тож навіщо використовувати так багато пробілів?</span> <span>Відповідь - зручність читання - набагато легше зрозуміти, що відбувається у вашому коді, якщо у вас це чудово відформатовано, а не просто зібрано разом у великий хаос.</span> <span>У нашому HTML-коді кожен вкладений елемент має два пробіли, ніж той, в якому він розміщений всередині.</span> <span>Ви самі визначаєте стиль форматування, який ви використовуєте (скільки пробілів для кожного рівня відступу, наприклад), але ви повинні розглянути можливість використання якогось форматування.</span></span></p>
+
+<h2 id="Посилання_на_обєкт_включаючи_спеціальні_символи_в_HTML"><span id="result_box" lang="uk"><span>Посилання на об'єкт: включаючи спеціальні символи в HTML</span></span></h2>
+
+<p>В HTML символи <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> та <code>&amp;</code> є спеціальними символами. <span id="result_box" lang="uk"><span>Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд</span> <span>або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах.</span> <span>Кожне посилання символів починається з амперсанда (&amp;), а закінчується двокрапкою (;).</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Буквений символ</th>
+   <th scope="col">Еквівалентне написання символів</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:</span></span></p>
+
+<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер <span id="result_box" lang="uk"><span>вважає, що другий елемент </span></span><code>&lt;p&gt;</code><span lang="uk"><span> починає новий абзац.</span> <span>Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.</span></span></p>
+
+<p>{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
+</div>
+
+<h2 id="Коментарі_HTML">Коментарі HTML</h2>
+
+<p><span id="result_box" lang="uk"><span>В HTML, як і у більшості мов програмування, існує механізм, доступний для написання коментарів у коді - коментарі браузером ігноруються і невидимі для користувача, їхня мета полягає у тому, щоб дозволити вам додавати коментарі до коду, щоб пояснити, як ваш</span> <span>код працює, що роблять різні частини коду тощо. Це може бути дуже корисним, якщо ви повернетеся до свого коду, над яким ви не працювали, наприклад, протягом шести місяців, і не пам'ятаєте, що ви робили, або якщо над вашим кодом ще хтось працював</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами</span></span> <code>&lt;!--</code> та <code>--&gt;</code>, наприклад:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Як ви можете побачити, перший абзац відображається на сторінці, а другий - ні.</span></span></p>
+
+<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p>
+
+<h2 id="Підсумок">Підсумок</h2>
+
+<p><span id="result_box" lang="uk"><span>Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML!</span> <span>На цьому етапі ви повинні розуміти, як має вигляд мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів.</span> <span>Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML.</span> <span>Залишайтеся на зв'язку!</span></span></p>
+
+<div class="note">
+<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або</span></span> <a href="/en-US/docs/Learn/CSS">CSS</a>. <span id="result_box" lang="uk"><span>CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь</span></span>.</p>
+</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
diff --git a/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..7387e08725
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,953 @@
+---
+title: HTML text fundamentals
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Одне з головних завдань HTML полягає в тому, щоб надати текстову структуру та смислове значення (також відоме як {{glossary("семантика")}}) таким чином, щоб браузер міг відобразити зміст на сторінці коректно. У цій статті пояснюється, у який спосіб можна використовувати {{glossary("HTML")}}, щоб структурувати текст на сторінці, додавши заголовки та параграфи, підкреслюючи слова, створюючи списки та інше.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Передумови</span></span>:</th>
+   <td><span class="tlid-translation translation" lang="uk"><span title="">Базове знайомство з HTML, як описано в</span></span> <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Мета</span></span>:</th>
+   <td><span class="tlid-translation translation" lang="uk"><span title="">Дізнайтеся, як позначити основну сторінку тексту, щоб надати йому структуру та зміст - включаючи абзаци, заголовки, списки, акцент та цитати.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Основа_заголовки_та_абзаци"><span class="tlid-translation translation" lang="uk"><span title="">Основа: заголовки та абзаци</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Найбільш структурований текст складається з заголовків і параграфів, незалежно від того, чи читаєте ви історію, газету, підручник з коледжу, журнал тощо.</span></span></p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Структурований вміст полегшує та покращує досвід читання.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML кожен абзац повинен бути загорнутий у елемент {{htmlelement ("p")}}, так:</span></span></p>
+
+<pre class="brush: html">&lt;p&gt;<span class="tlid-translation translation" lang="uk"><span class="alt-edited">Я абзац,о так, це я.</span></span>&lt;/p&gt;</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен заголовок має бути загорнутий в елемент заголовка:</span></span></p>
+
+<pre class="brush: html">&lt;h1&gt;<span class="tlid-translation translation" lang="uk"><span title="">Я назва цієї історії.</span></span>&lt;/h1&gt;</pre>
+
+<p>Є шість елементів заголовку — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, та {{htmlelement("h6")}}. <span class="tlid-translation translation" lang="uk"><span title="">Кожен елемент представляє інший рівень вмісту документа;</span></span><code>&lt;h1&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">являє собою основний заголовок</span></span>, <code>&lt;h2&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">представляє підзаголовки</span></span>, <code>&lt;h3&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">представляє наступні підзаголовки тощо.</span></span></p>
+
+<h3 id="Впровадження_структурної_ієрархії"><span class="tlid-translation translation" lang="uk"><span title="">Впровадження структурної ієрархії</span></span></h3>
+
+<p>Наприклад, у історії &lt;h1&gt; буде представляти назву історії, &lt;h2&gt; s представлятиме назву кожного розділу, а &lt;h3&gt; представлятиме підрозділи кожного розділу тощо.</p>
+
+<pre class="brush: html">&lt;h1&gt;Нищівна свердловина&lt;/h1&gt;
+
+&lt;p&gt;<span class="tlid-translation translation" lang="uk"><span title="">Кріс Міллс</span></span>&lt;/p&gt;
+
+&lt;h2&gt;Розділ 1: Темна ніч&lt;/h2&gt;
+
+&lt;p&gt;<span class="tlid-translation translation" lang="uk"><span title="">Це була темна ніч.</span> <span title="">Десь, сова вигукувала.</span> <span title="">Дощ обрушився на ...</span></span>&lt;/p&gt;
+
+&lt;h2&gt;Розділ 2: <span class="tlid-translation translation" lang="uk"><span title="">Вічна тиша</span></span>&lt;/h2&gt;
+
+&lt;p&gt;<span class="tlid-translation translation" lang="uk"><span title="">Наш головний герой міг не стільки шепотом вийти з тіньової фігури ...</span></span>&lt;/p&gt;
+
+&lt;h3&gt;<span class="tlid-translation translation" lang="uk"><span title="">Привид говорить</span></span>&lt;/h3&gt;
+
+&lt;p&gt;Минуло ще кілька годин, коли раптово, побачивши привида, випрямився і вигукнув: «Будь ласка, помилуй мою душу!"&lt;/p&gt;</pre>
+
+<p>Це дійсно залежить від вас, які саме елементи ви використовуєте, тоді ієрархія має сенс. Вам просто потрібно мати на увазі кілька найкращих практик, коли ви створюєте такі структури:</p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Бажано просто використовувати один</span></span><code>&lt;h1&gt;</code> на сторінці — це заголовок верхнього рівня, а всі інші знаходяться нижче нього в ієрархії.</li>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Переконайтеся, що ви використовуєте заголовки в правильному порядку в ієрархії.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Не використовуйте</span></span> <code>&lt;h3&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">для представлення підзаголовків, за якими йде</span></span><code>&lt;h2&gt;</code> для представлення підзаголовка - це не має сенсу і призведе до дивних результатів.</li>
+ <li>З доступних шести заголовків вам слід прагнути використовувати не більше трьох  на сторінці, якщо ви відчуваєте, що це необхідно. Документи з багатьма рівнями (тобто глибока ієрархія заголовків) стають громіздкими і важкими для навігації. У таких випадках бажано поширювати вміст на кілька сторінок, якщо це можливо.</li>
+</ul>
+
+<h3 id="Чому_нам_потрібна_структура"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна структура?</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб відповісти на це запитання, давайте подивимося на text-start.html - початкову точку нашого запущеного прикладу для цієї статті (хороший рецепт хумусу).</span> <span title="">це потрібно для вправ пізніше.</span> <span title="">В даний час у цьому документі міститься кілька фрагментів вмісту - вони не позначені жодним чином, але розділені проривами рядків (Enter / Return натиснуто, щоб перейти до наступного рядка).</span></span></p>
+
+<p>Однак, коли ви відкриваєте документ у вашому браузері, ви побачите, що текст з'являється суцільним шматком!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Це пояснюється тим, що немає елементів, які б давали структуру контенту, тому браузер не знає, що є заголовок а що є абзацом. Крім того:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Користувачі, які переглядають веб-сторінку, намагаються швидко сканувати, щоб знайти відповідний вміст, часто просто читаючи заголовки (звичайно</span></span> <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">витрачати дуже короткий час на веб-сторінці</a>). <span class="tlid-translation translation" lang="uk"><span title="">Якщо вони не бачать нічого корисного протягом декількох секунд, вони, швидше за все, будуть розчаровані і підуть в інше місце.</span></span></li>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Пошукові системи, які індексують вашу сторінку, розглядають вміст заголовків як важливі ключові слова для впливу на рейтинги пошуку на сторінці.</span> <span title="">Без заголовків ваша сторінка буде працювати слабко</span></span> {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Люди із серйозними порушеннями зору часто не читають веб-сторінки;</span> <span title="">вони слухають їх.</span> <span title="">Це робиться за допомогою програмного забезпечення, що називається </span></span> <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Це програмне забезпечення надає способи отримати швидкий доступ до заданого текстового вмісту. Серед різних методів, які вони використовують, вони надають план документа, читаючи заголовки, дозволяючи користувачам швидко знайти потрібну інформацію. Якщо заголовки не доступні, вони будуть змушені слухати весь документ, прочитаний вголос.</li>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">Щоб відтворити вміст за допомогою</span></span> {{glossary("CSS")}}, <span class="tlid-translation translation" lang="uk"><span title="">або зробити з нею цікаві речі</span></span>{{glossary("JavaScript")}}, потрібно мати елементи, які відокремлюють відповідний вміст, тому CSS / JavaScript може бути ефективним рішенням.</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Тому нам необхідно надати нашому контенту структурну розмітку.</span></span></p>
+
+<h3 id="Активне_навчання_Надання_нашої_структури_змісту">Активне навчання: Надання нашої структури змісту</h3>
+
+<p>Давайте розглянемо живой приклад. У наведеному нижче прикладі додайте елементи до вихідного тексту у полі Введення так, щоб він з'являвся у вигляді заголовка та двох абзаців у полі Вивід.</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки скидання.</span> <span title="">Якщо ви застрягли, натисніть кнопку Показати рішення, щоб побачити відповідь.</span></span></p>
+
+<div class="hidden">
+<h6 id="Відтворюваний_код"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6>
+
+<pre class="brush: html">&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span>&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span>&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;<span class="tlid-translation translation" lang="uk"><span title="">Натисніть Esc, щоб перемістити фокус в сторону від області кодування (вкладка вставляє символ табуляції).</span></span>&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;<span class="tlid-translation translation" lang="uk"><span class="alt-edited">Моя коротка історія. Я поліцейський, і мене звуть Тріш.</span></span>
+
+<span class="tlid-translation translation" lang="uk"><span title="">Мої ноги зроблені з картону, і я одружений на рибі</span></span>.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// клавіша зупинки табуляції в текстовій області
+// замість цього напишіть tab в позиції каретки
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// <span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span>
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Чому_нам_потрібна_семантика"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна семантика?</span></span></h3>
+
+<p>Семантика  всюди навколо нас - ми покладаємося на попередній досвід, щоб розповісти вам, що таке функція повсякденних об'єктів; коли ми щось бачимо, ми знаємо, якою буде її функція. Так, наприклад, ми очікуємо, що червоний світлофор означає "зупинка", а зелений світлофор означає "іти". Речі можуть бути дуже складними дуже швидко, якщо застосовується неправильна семантика (чи будь-яка країна використовує червоний, щоб означати "йти"?</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд.</span> <span title="">У цьому контексті елемент {{htmlelement ("h1")}} також є семантичним елементом, який надає тексту, який він обертає навколо ролі (або значення) "заголовка верхнього рівня на вашій сторінці".</span></span></p>
+
+<pre class="brush: html">&lt;h1&gt;<span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня</span></span>&lt;/h1&gt;</pre>
+
+<p>За замовчуванням браузер надасть йому великий розмір шрифту для того, щоб він виглядав як заголовок (хоча ви могли б такий стиль текста, могли отримати, використовуючи CSS). Більш важливо, що його семантичне значення буде використовуватися кількома способами, наприклад, пошуковими системами та програмами для читання з екрана (як згадано вище).</p>
+
+<p>З іншого боку, ви можете зробити будь-який елемент схожим на елемент верхнього рівня. Розгляньте наступне:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;<span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня?</span></span>&lt;/span&gt;</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Це елемент {{htmlelement ("span")}}.</span> <span title="">Вона не має семантики.</span> <span title="">Ви використовуєте його, щоб загорнути вміст, коли ви хочете застосувати до нього CSS (або зробити щось із цим за допомогою JavaScript), не надаючи йому жодного додаткового сенсу (про це пізніше ви знайдете в курсі.) Ми застосували деякі</span> <span title="">CSS, щоб він виглядав як заголовок верхнього рівня, але оскільки він не має семантичного значення, він не отримає жодної з додаткових переваг, описаних вище.</span> <span title="">Це гарна ідея використовувати відповідний елемент HTML для завдання.</span></span></p>
+
+<h2 id="Списки"><span class="tlid-translation translation" lang="uk"><span title="">Списки</span></span></h2>
+
+<p>Тепер звернемо увагу до списків. Списки знаходяться в усьому нашому житті - від списку покупок до списку напрямків, які ви підсвідомо дотримуєтеся, щоб дістатися до вашого будинку щодня, до списків інструкцій, які ви дотримуєтеся в цих підручниках! Списки знаходяться всюди в Інтернеті, і ми маємо три різні типи, про які потрібно знати.</p>
+
+<h3 id="Невпорядкований"><span class="tlid-translation translation" lang="uk"><span title="">Невпорядкований</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Невпорядковані списки використовуються для позначення списків пунктів, для яких не має значення порядок позицій - візьмемо, наприклад, список покупок.</span></span></p>
+
+<pre>молоко
+<span class="tlid-translation translation" lang="uk"><span title="">яйця</span></span>
+хліб
+<span class="tlid-translation translation" lang="uk"><span title="">гумус</span></span></pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен невпорядкований список починається з елемента {{htmlelement ("ul")}}, який обертається навколо всіх елементів списку:</span></span></p>
+
+<pre class="brush: html">&lt;ul&gt;
+молоко
+яйцчя
+хліб
+гумус
+&lt;/ul&gt;</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Останнім кроком є перенесення кожного елемента списку в елемент {{htmlelement ("li")}} (елемент списку):</span></span></p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;молоко&lt;/li&gt;
+  &lt;li&gt;яйцчя&lt;/li&gt;
+  &lt;li&gt;хліб&lt;/li&gt;
+  &lt;li&gt;гумус&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Активне_навчання_розмітка_невпорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка невпорядкованого списку</span></span></h4>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-невпорядкований список.</span></span></p>
+
+<div class="hidden">
+<h6 id="Відтворюваний_код_2"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6>
+
+<pre class="brush: html">&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span>&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span>&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+молоко
+яйця
+хліб
+гумус
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+//<span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span>
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Замовлено"><span class="tlid-translation translation" lang="uk"><span title="">Замовлено</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Упорядковані списки - це списки, в яких має значення порядок елементів - приведемо приклад набору напрямків:</span></span></p>
+
+<pre><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span>
+<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span>
+Ідіть прямо по перших двох роз'їздів
+<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span>
+Школа знаходиться справа від вас, 300 метрів вперед по дорозі</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Структура розмітки така ж, як і для невпорядкованих списків, за винятком того, що ви повинні обернути елементи списку в </span></span>елемент {{htmlelement("ol")}},<span class="tlid-translation translation" lang="uk"><span title=""> а не</span></span> <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span>&lt;/li&gt;
+  &lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span>&lt;/li&gt;
+  &lt;li&gt;Ідіть прямо по перших двох роз'їздів&lt;/li&gt;
+  &lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span>&lt;/li&gt;
+  &lt;li&gt;Школа знаходиться справа від вас, 300 метрів вперед по дорозі&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Активне_навчання_розмітка_впорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка впорядкованого списку</span></span></h4>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-список.</span></span></p>
+
+<div class="hidden">
+<h6 id="Відтворюваний_код_3"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6>
+
+<pre class="brush: html">&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span>&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span>&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Натисніть Esc <span class="tlid-translation translation" lang="uk"><span title="">для переміщення фокусу з області коду (Tab вставляє символ табуляції).</span></span>&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Drive to the end of the road
+<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span>
+Пройдіть прямо по перших двох роз'їздів
+<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span>
+Школа знаходиться справа від вас, 300 метрів вперед по дорозі&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span>&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Активне_навчання_Розмітка_сторінки_рецепта"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: Розмітка сторінки рецепта</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Таким чином, на даний момент у статті, у вас є вся інформація, необхідна для позначення нашого прикладу сторінки рецептів.</span> <span title="">Ви можете зберегти локальну копію нашої</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> <span class="tlid-translation translation" lang="uk"><span title="">запустіть файл і виконайте роботу там, або зробіть це в прикладі, що можна редагувати нижче.</span> <span title="">Можливо, це краще робити локально, оскільки ви зможете зберегти роботу, яку ви виконуєте, тоді як, якщо ви заповните її у редагований приклад, вона буде втрачена під час наступного відкриття сторінки.</span> <span title="">Обидва варіанти мають плюси і мінуси.</span></span></p>
+
+<div class="hidden">
+<h6 id="Відтворюваний_код_4"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6>
+
+<pre class="brush: html">&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span>&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span>&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;<span class="tlid-translation translation" lang="uk"><span class="alt-edited">Швидкий рецепт гумусу</span></span>
+
+  <span class="tlid-translation translation" lang="uk"><span class="alt-edited">Цей рецепт робиться швидко</span></span>, смачний гумус, <span class="tlid-translation translation" lang="uk"><span title="">без плутанини</span></span>. <span class="tlid-translation translation" lang="uk"><span title="">Він був адаптований з ряду різних рецептів, які я читав протягом багатьох років.</span></span>
+
+ Гумус - це смачна товста паста, яка широко використовується в стравах грецької та близькосхідної кухні. Це дуже смачно з салатом, м'ясом на грилі та хлібом Пітта.
+
+Інгредієнти
+  1 <span class="tlid-translation translation" lang="uk"><span title="">банку (400 г) гороху (квасолі)</span></span>
+  175g <span class="tlid-translation translation" lang="uk"><span title="">тахіні</span></span>
+  6 <span class="tlid-translation translation" lang="uk"><span title="">сушених помідорів</span></span>
+<span class="tlid-translation translation" lang="uk"><span title="">  Половина червоного перцю</span></span>
+  <span class="tlid-translation translation" lang="uk"><span title="">Щіпка кайенского перцю</span></span>
+  <span class="tlid-translation translation" lang="uk"><span title="">1 зубчик часнику</span></span>
+  Трохи оливкової олії
+
+  <span class="tlid-translation translation" lang="uk"><span title="">Інструкції</span></span>
+
+  Видаліть шкіру з часнику і грубо наріжте
+  Видаліть все насіння і стебло з перцю і грубо наріжте
+  <span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн</span></span>
+  Переробіть всі інгредієнти в пасту.
+  Якщо ви хочете грубий "кремезний" гумус, обробляйте його на короткий час
+  <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете гладкий хумус, обробляйте його довше</span></span>
+
+  <span class="tlid-translation translation" lang="uk"><span title="">Для іншого смаку, ви можете спробувати змішати в невеликій мірі лимон і коріандр, перець чилі, лайм і chipotle, harissa і м'ята, або шпинат і сир фета.</span> <span title="">Експериментуйте і подивіться, що працює для вас.</span></span>
+
+  <span class="tlid-translation translation" lang="uk"><span title="">Зберігання</span></span>
+
+  Завантажте готовий хумус в герметичний контейнер. Ви маєте можливість використовувати його протягом тижня після того, як ви його зробили. Якщо він починає шипувати, то обов'язково викиньте його.
+
+  Гумус підходить для заморожування; Ви повинні заморозити його і використовувати протягом декількох місяців.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> приклад на нашому github репозиторії.</p>
+
+<h3 id="Вкладені_списки"><span class="tlid-translation translation" lang="uk"><span title="">Вкладені списки</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Цілком нормально вкласти один список у інший.</span> <span title="">Ви, можливо, захочете, щоб деякі підпункти знаходились під  верхным рівнем.</span> <span title="">Візьмемо другий список з нашого прикладу рецептів:</span></span></p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Видаліть шкіру з часнику і грубо наріжте.&lt;/li&gt;
+  &lt;li&gt;Видаліть все насіння і стебло з перцю і грубо наріжте.&lt;/li&gt;
+  &lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span>&lt;/li&gt;
+  &lt;li&gt;Переробіть всі інгредієнти в пасту.&lt;/li&gt;
+  &lt;li&gt;Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.&lt;/li&gt;
+  &lt;li&gt;Якщо ви хочете гладкий гумус, переробляйте його довше.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки останні дві кулі дуже тісно пов'язані з тією, що була перед ними (вони читаються, як під-інструкції або варіанти, які підходять нижче цієї кулі), може мати сенс вкладати їх у свій власний невпорядкований список і розміщувати цей список всередині</span> <span title="">четверта куля.</span> <span title="">Це виглядатиме так:</span></span></p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Видаліть шкіру з часнику і грубо наріжте.&lt;/li&gt;
+  &lt;li&gt;Видаліть все насіння і стебло з перцю і грубо наріжте.&lt;/li&gt;
+  &lt;li&gt;<span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span>&lt;/li&gt;
+  &lt;li&gt;Переробіть всі інгредієнти в пасту.
+    &lt;ul&gt;
+      &lt;li&gt;Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.&lt;/li&gt;
+      &lt;li&gt;Якщо ви хочете гладкий гумус, переробляйте його довше.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте повернутися до попереднього активного прикладу навчання та оновити другий список, подібний до цього.</span></span>late</p>
+
+<h2 id="Акцент_і_важливість"><span class="tlid-translation translation" lang="uk"><span title="">Акцент і важливість</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">У людській мові ми часто підкреслюємо певні слова, щоб змінити зміст речення, і ми часто хочемо позначити певні слова як важливі або різні.</span> <span title="">HTML надає різні семантичні елементи, які дозволяють нам розмічати текстовий вміст з такими ефектами, і в цьому розділі ми розглянемо деякі з найбільш поширених.</span></span></p>
+
+<h3 id="Акцент"><span class="tlid-translation translation" lang="uk"><span title="">Акцент</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Коли ми хочемо додати акцент у розмовній мові, ми підкреслюємо певні слова, тонко змінюючи сенс того, що ми говоримо.</span> <span title="">Аналогічно, у письмовій мові ми схильні підкреслювати слова, виділяючи їх курсивом.</span> <span title="">Наприклад, наступні два речення мають різне значення.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Я радий, що ви не запізнилися.</span></span></p>
+
+<p>Я <em>радий</em>, що ви не <em>запізнилися</em>.</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Перше речення звуки справді полегшено, що людина не запізнився.</span> <span title="">Навпаки, другий звучить саркастично або пасивно-агресивно, висловлюючи досаду, що людина прибула трохи пізно.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML ми використовуємо елемент {{htmlelement ("em")}} (вираз) для позначення таких екземплярів.</span> <span title="">Окрім того, що документ є цікавішим для читання, вони розпізнаються читачами екрану та висловлюються іншим тоном голосу.</span> <span title="">Браузери за замовчуванням створюють цей стиль як курсив, але ви не повинні використовувати цей тег, щоб отримати стиль курсиву.</span> <span title="">Для цього потрібно використовувати елемент {{htmlelement ("span")}} і деякий CSS, або, можливо, елемент {{htmlelement ("i")}} (див. Нижче).</span></span></p>
+
+<pre class="brush: html">&lt;p&gt;Я &lt;em&gt;<span class="tlid-translation translation" lang="uk"><span title="">радий</span></span>&lt;/em&gt;, що ви не &lt;em&gt;<em>запізнилися</em>&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Велике_значення"><span class="tlid-translation translation" lang="uk"><span title="">Велике значення</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб підкреслити важливі слова, ми прагнемо підкреслити їх у розмовній мові і сміливо їх писати.</span> <span title="">Наприклад:</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Ця рідина</span></span> <strong>дуже токсична.</strong></p>
+
+<p>Я розраховую на вас. <strong>Не</strong> запізнюйтеся!</p>
+
+<p>У HTML ми використовуємо {{htmlelement("strong")}} (strong важливий) елемент для позначення таких випадків. Окрім того, що документ стане більш корисним, вони знову розпізнаються читачами екрану та говорять різним тоном голосу. За умовчанням у браузерах цей текст виділено напівжирним шрифтом, але ви не повинні використовувати цей тег лише для отримання жирного стилю. Для цього потрібно використати {{htmlelement("span")}} елемент і деякі CSS, або, можливо,елемент{{htmlelement("b")}} (дивись нижче.)</p>
+
+<pre class="brush: html">&lt;p&gt;Ця рідина є &lt;strong&gt;дуже токсичною&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Я розраховую на вас. &lt;strong&gt;Не &lt;/strong&gt; запізнюйтесь!&lt;/p&gt;</pre>
+
+<p><strong><strong>За бажанням можна вмонтовувати strong і акцентувати всередині один одного:</strong></strong></p>
+
+<pre class="brush: html">&lt;p&gt;Ця рідина є &lt;strong&gt;дуже токсичною&lt;/strong&gt; —
+якщо ви її вип'єте, &lt;strong&gt;Ви можете &lt;em&gt;померти&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Активне_навчання_Давайте_будемо_уважними!">Активне навчання: Давайте будемо уважними!</h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі активного навчання ми надали приклад, який можна редагувати.</span> <span title="">Усередині неї ми хотіли б, щоб ви спробували додати акцент і важливе значення словам, які ви вважаєте потрібними їм, просто щоб мати певну практику.</span></span></p>
+
+<div class="hidden">
+<h6 id="Відтворюваний_код_5"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6>
+
+<pre class="brush: html">&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span>&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span>&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Натисніть Esc <span class="tlid-translation translation" lang="uk"><span class="alt-edited">щоб перемістити фокус з області коду (Tab вставить символ табуляції)</span></span>.&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;
+&lt;p&gt;<span class="tlid-translation translation" lang="uk"><span title="">У неділю 9 січня 2010 року була банда готів</span>
+   <span title="">плямистий крадіжка декількох садових гномів з</span>
+   <span title="">торговий центр в центрі міста Мілуокі.</span> <span title="">Вони були</span>
+   <span title="">все носять зелені комбінезони і дурні капелюхи, і</span>
+   <span title="">здавалося, мав кит часу.</span> <span title="">Якщо хто</span>
+    <span title="">будь-яка інформація про цей інцидент, будь ласка</span>
+     <span title="">зараз звертайтеся до поліції.</span></span>&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Курсив_жирний_підкреслений_..."><span class="tlid-translation translation" lang="uk"><span title="">Курсив, жирний, підкреслений ...</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Елементи, які ми обговорювали до цих пір, мають чітко виражену семантику.</span> <span title="">Ситуація з </span></span>{{htmlelement("b")}}, {{htmlelement("i")}}, та {{htmlelement("u")}} <span class="tlid-translation translation" lang="uk"><span title="">дещо складніше. Вони прийшли так, щоб люди могли писати напівжирний, курсив або підкреслений текст в епоху, коли CSS все ще підтримувався погано або зовсім не підтримувався.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Такі елементи, які впливають лише на презентацію, а не на семантику, відомі як елементи презентації і більше не повинні використовуватися, оскільки, як ми бачили раніше, семантика настільки важлива для доступності, SEO та ін.</span></span></p>
+
+<p>HTML5 <span class="tlid-translation translation" lang="uk"><span title="">перевизначено</span></span> <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> та <code>&lt;u&gt;</code> <span class="tlid-translation translation" lang="uk"><span title="">з новими, дещо заплутаними, семантичними ролями.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Ось найкраще правило: скоріше за все доцільно використовувати &lt;b&gt;, &lt;i&gt; або &lt;u&gt;, щоб передати значення, яке традиційно передається жирним шрифтом, курсивом або підкресленням, за умови, що немає більш відповідного елемента.</span> <span title="">Тим не менш, завжди залишається критично важливим збереження мислення доступності.</span> <span title="">Концепція курсиву не дуже корисна людям, які використовують читання з екрану, або людям, які використовують систему письма, окрім латинського алфавіту.</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('i')}} використовується для передачі значення, яке традиційно передається курсивом: іноземні слова, таксономічне позначення, технічні терміни, думка ...</span></span></li>
+ <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...</span></span></li>
+</ul>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="uk"><span title="">Попередження про підкреслення: люди пов'язують підкреслення з гіперпосиланнями.</span> <span title="">Тому в Інтернеті краще підкреслити лише посилання.</span> <span title="">Використовуйте елемент &lt;u&gt;, якщо він семантично доречний, але розгляньте можливість використання CSS для зміни підкресленого підкреслення на щось більш доречне в Інтернеті.</span> <span title="">Наведений нижче приклад ілюструє, як це можна зробити.</span></span></p>
+</div>
+
+<pre class="brush: html">&lt;!-- <span class="tlid-translation translation" lang="uk"><span title="">наукові назви </span></span>--&gt;
+&lt;p&gt;
+  <span class="tlid-translation translation" lang="uk"><span title="">Рубінова колібрі (&lt;i&gt; Archilochus colubris &lt;/i&gt;)</span>
+   <span title="">є найбільш поширеним колібром у Східній Північній Америці.
+&lt;/p&gt;
+
+&lt;!-- <span class="tlid-translation translation" lang="uk"><span title="">іноземні слова</span></span> --&gt;
+&lt;p&gt;
+  <span class="tlid-translation translation" lang="uk"><span title="">Меню було морем екзотичних слів</span></span> &lt;i lang="uk-latn"&gt;ватрушка&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; та &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- відоме неправильне написання --&gt;
+&lt;p&gt;
+  Коли-небудь я дізнаюся, як це зробити &lt;u&gt;spel&lt;/u&gt; better.
+&lt;/p&gt;
+
+&lt;!-- Виділіть ключові слова в наборі інструкцій --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Фрагмент&lt;/b&gt; два шматки хліба з буханки.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Вставити&lt;/b&gt; шматочок томата і лист салату між шматочками хліба.
+  &lt;/li&gt;
+&lt;/ol&gt;
+</span></span>
+</pre>
+
+<h2 id="Підсумок"><strong>Підсумок</strong></h2>
+
+<p>Ось це зараз! Ця стаття повинна була дати вам гарне уявлення про те, як почати розмітку тексту в HTML, і познайомили вас з деякими з найважливіших елементів у цій області. Існує набагато більше семантичних елементів для висвітлення в цій області, і ми розглянемо набагато більше в нашій статті "Більше семантичних елементів", що пізніше буде в курсі. У наступній статті ми детально розглянемо, як <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> створювати гіперпосилання </a>, можливо, найважливіший елемент на Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="У_цьому_модулі"><strong>У цьому модулі</strong></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи тексту HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документа та веб-сайту</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Налагодження HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка літери</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">вмісту</a></li>
+</ul>
diff --git a/files/uk/learn/html/introduction_to_html/index.html b/files/uk/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..9b9ee8d4a6
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/index.html
@@ -0,0 +1,55 @@
+---
+title: Вступ до HTML
+slug: Learn/HTML/Introduction_to_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{glossary("HTML")}} є відносно простою мовою. Вона складається з <a href="https://developer.mozilla.org/uk/docs/Glossary/Element">елементів</a>, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a></em>, і розуміння того, як створювати і керувати файлами, як описано в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em> — обидві статті є частинами розділу <em><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з вебом</a></em>.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як  <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<p>Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></dt>
+ <dd>Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></dt>
+ <dd><a href="https://developer.mozilla.org/uk/docs/Glossary/Head">Head</a> в HTML-документі є частиною, яка <strong>не відображається</strong> в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як {{htmlelement("title")}}, посилання на {{glossary("CSS")}} (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML-тексту</a></dt>
+ <dd>Одним із основних завдань HTML є надання текстового значення (також відомого як <a href="https://developer.mozilla.org/uk/docs/Glossary/Semantics">семантика</a>), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></dt>
+ <dd>Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></dt>
+ <dd>В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML тексту</a>. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документу та веб-сайту</a></dt>
+ <dd>Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Відлагодження HTML</a></dt>
+ <dd>Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.</dd>
+</dl>
+
+<h2 id="Оцінки">Оцінки</h2>
+
+<p>Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка/Форматування листа</a></dt>
+ <dd>Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Структурування сторінки змісту</a></dt>
+ <dd>Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).</dd>
+</dl>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основи веб-грамотності 1</a></dt>
+ <dd>Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі <em>Вступ до HTML</em>. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.</dd>
+</dl>
diff --git a/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html b/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html
new file mode 100644
index 0000000000..63ac7a8cfa
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html
@@ -0,0 +1,276 @@
+---
+title: Що в head? Метадані в HTML
+slug: Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML
+tags:
+  - CSS
+  - HTML
+  - head
+  - Заголовок
+  - Мова
+  - Основи
+  - Розмітка
+  - веб-сторінки
+  - голова
+  - для початківців
+  - значки
+  - мета
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Елемент {{glossary("Head", "head")}} <span id="result_box" lang="uk"><span>документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки</span></span>. Він <span id="result_box" lang="uk"><span>містить таку інформацію, як назва сторінки </span></span>{{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на  власні іконки та інші метадані (<span id="result_box" lang="uk"><span>дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою</span></span>.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Знання основ HTML, як описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td><span id="result_box" lang="uk"><span>Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Що_таке_заголовок_(head)_HTML">Що таке заголовок (head) HTML?</h2>
+
+<p>Давайте перейдемо до простого <a href="/uk/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML документу, який ми розглянули в попередній статті</a>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — <span id="result_box" lang="uk"><span>на відміну від вмісту елемента</span></span> {{htmlelement("body")}} (<span id="result_box" lang="uk"><span>яке відображається на сторінці при завантаженні в браузері),</span> <span>вміст head не відображається на сторінці</span></span>. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. <span id="result_box" lang="uk"><span>У наведеному вище прикладі заголовок досить малий</span></span>:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;My test page&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою</span></span> <a href="/uk/docs/Learn/Discover_browser_developer_tools">інструментів розробника</a> перевірте вміст заголовку. <span id="result_box" lang="uk"><span>Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними.</span> <span>Давайте розпочнемо.</span></span></p>
+
+<h2 id="Додавання_назви_сторінки">Додавання назви сторінки</h2>
+
+<p><span id="result_box" lang="uk"><span>Ми вже бачили елемент</span></span> елемент {{htmlelement("title")}} в дії — він<span id="result_box" lang="uk"><span> може бути використаний для додавання назви (title) документа.</span> <span>Однак його можна зплутати з елементом</span></span> {{htmlelement("h1")}}, який <span id="result_box" lang="uk"><span>використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки.</span> <span>Але це різні речі!</span></span></p>
+
+<ul>
+ <li>Елемент {{htmlelement("h1")}} <span id="result_box" lang="uk"><span>з'являється на сторінці, коли завантажується в браузері - зазвичай його слід використовувати лише один раз на сторінці, щоб позначити заголовок вмісту сторінки (заголовок статті, заголовок новин або все, що підходить для змісту).</span></span></li>
+ <li>Елемент {{htmlelement("title")}} - <span id="result_box" lang="uk"><span>це метадані, які являють собою заголовок (назву) всього документа HTML (а не змісту документа</span></span>).</li>
+</ul>
+
+<h3 id="Активне_навчання_перевірка_простого_прикладу"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка простого прикладу</span></span></h3>
+
+<ol>
+ <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш</span></span> GitHub репозиторій та завантажили копію нашої <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html сторінки</a>. Для цього також
+
+  <ol>
+   <li><span id="result_box" lang="uk"><span>Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці</span></span>.</li>
+   <li>Натисніть кнопку "Raw" на сторінці, <span id="result_box" lang="uk"><span>яка призведе до появи вихідного коду на новій вкладці веб-браузера</span></span>. <span id="result_box" lang="uk"><span>Потім виберіть у меню вашого браузера</span></span>  <em>Файл &gt; Зберегти як...</em> <span id="result_box" lang="uk"><span>а потім виберіть місце для збереження файлу</span></span>.</li>
+  </ol>
+ </li>
+ <li><span id="result_box" lang="uk"><span>Тепер відкрийте файл у своєму веб-браузері.</span> <span>Ви повинні побачити щось подібне</span></span>:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Тепер повинно бути абсолютно зрозуміло, в чому різниця між </span></span><code>&lt;h1&gt;</code> та <code>&lt;title&gt;</code>!</p>
+ </li>
+ <li><span id="result_box" lang="uk"><span>Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері.</span> Поекспериментуйте з<span> кодом, змінюючи його!</span></span></li>
+</ol>
+
+<p>Зміст елементу <code>&lt;title&gt;</code> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки<em> &gt; Закласти цю сторінку </em>або значок зірки в адресному рядку в Firefox), ви побачите зміст <code>&lt;title&gt;</code> <span id="result_box" lang="uk"><span>заповнений як назва закладки.</span></span></p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Вміст <code>&lt;title&gt;</code> <span id="result_box" lang="uk"><span>також використовується в результатах пошуку, як ви побачите нижче</span></span>.</p>
+
+<h2 id="Метадані_елемент_&lt;meta>">Метадані: елемент &lt;meta&gt;</h2>
+
+<p><span id="result_box" lang="uk"><span>Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент</span></span> {{htmlelement("meta")}}. <span id="result_box" lang="uk"><span>Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані.</span> <span>Існує багато різних типів елементів</span></span> <code>&lt;meta&gt;</code> <span id="result_box" lang="uk"><span>які можуть бути включені в </span></span>&lt;head&gt; вашої сторінки, <span id="result_box" lang="uk"><span>але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати.</span> <span>Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.</span></span></p>
+
+<h3 id="Визначення_кодування_символів_документа"><span class="short_text" id="result_box" lang="uk"><span>Визначення кодування символів документа</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>У прикладі, показаному вище, цей рядок також включений</span></span>:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати.</span></span> <code>utf-8</code> <span id="result_box" lang="uk"><span>- це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови.</span> <span>Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову;</span> <span>тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте!</span> <span>Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:</span></span></p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Якщо ви встановите кодування символів, наприклад, </span></span><code>ISO-8859-1</code>,  (<span id="result_box" lang="uk"><span>набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:</span></span></p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<h3 id="Активне_навчання_експеримент_із_кодуванням_символів"><span id="result_box" lang="uk"><span>Активне навчання: експеримент із кодуванням символів</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі </span></span> <code>&lt;title&gt;</code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), <span class="short_text" id="result_box" lang="uk"><span>спробуйте змінити значення мета-кодування на</span></span> <code>ISO-8859-1</code>, <span id="result_box" lang="uk"><span>і додайте японську мову на свою сторінку.</span> <span>Це текст, який ми використовували</span></span> (до речі, там написано "рис гарячий"):</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Додавання_автора_та_опису"><span class="short_text" id="result_box" lang="uk"><span>Додавання автора та опису</span></span></h3>
+
+<p>Багато елементів <code>&lt;meta&gt;</code> містять атрибути <code>name</code> та <code>content</code>:</p>
+
+<ul>
+ <li><code>name</code> <span id="result_box" lang="uk"><span>вказує тип мета-елемента;</span> <span>який тип інформації він містить</span></span>.</li>
+ <li><code>content</code> вказує актуальний мета контент.</li>
+</ul>
+
+<p><span id="result_box" lang="uk"><span>Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки.</span> <span>Давайте подивимось на приклад:</span></span></p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="<span id="result_box" lang="ru"><span>Учбовий центр MDN спрямований на те,
+щоб надати всім новачкам в Інтернеті все, що їм необхідно знати,
+щоб приступити до розробки веб-сайтів і додатків.</span></span>"&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст.</span> <span>Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються </span></span><a href="/uk/docs/Glossary/SEO">Пошуковою оптимізацією</a>, або {{glossary("SEO")}}.)</p>
+
+<h3 id="Активне_навчання_використання_опису_в_пошукових_системах"><span id="result_box" lang="uk"><span>Активне навчання: використання опису в пошукових системах</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Опис також використовується на сторінках результатів пошуку.</span> <span>Давайте пройдемо вправу, щоб вивчити це</span></span>:</p>
+
+<ol>
+ <li>Перейдіть на <a href="https://developer.mozilla.org/uk/">головну сторінку Mozilla Developer Network</a>.</li>
+ <li>Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть <em>Програмний код сторінки (View Page Source)</em> із контекстного меню.</li>
+ <li><span class="short_text" id="result_box" lang="uk"><span>Знайдіть опис метатегів.</span> <span>Він буде виглядати так</span></span>:
+  <pre class="brush: html">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
+ </li>
+ <li>Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) <span id="result_box" lang="uk"><span>Ви помітите опис елементів вмісту</span></span> <code>&lt;meta&gt;</code> та <code>&lt;title&gt;</code>, <span id="result_box" lang="uk"><span>що використовуються в результатах пошуку</span></span> — безумовно їх варто вказувати!
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка</strong>: В <span id="result_box" lang="uk"><span>Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (</span></span>sitelinks<span lang="uk"><span>) і налаштовуються в інструментах Google для веб-майстрів</span></span> <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — <span id="result_box" lang="uk"><span>це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Примітка</strong>: Багато функцій <code>&lt;meta&gt;</code> більше не використовуються. Наприклад, ключове слово <code>&lt;meta&gt;</code> елемента (<code>&lt;meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут"&gt;</code>) — <span id="result_box" lang="uk"><span>який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.</span></span></p>
+</div>
+
+<h3 id="Інші_типи_метаданих"><span class="short_text" id="result_box" lang="uk"><span>Інші типи метаданих</span></span></h3>
+
+<p><span id="result_box" lang="uk"><span>Мандруючи Інтернетом ви також можете знайти інші типи метаданих.</span> <span>Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.</span></span></p>
+
+<p>Наприклад, <a href="http://ogp.me/">Open Graph Data</a> <span id="result_box" lang="uk"><span>є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів.</span> <span>У коді MDN ви знайдете це:</span></span></p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів</span></span>.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter <span id="result_box" lang="uk"><span>також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com.</span> <span>Наприклад:</span></span></p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Додавання_власних_іконок_на_сайт"><span class="short_text" id="result_box" lang="uk"><span>Додавання власних іконок на сайт</span></span></h2>
+
+<p><span id="result_box" lang="uk"><span>Щоб ще більше збагатити дизайн сайту, ви можете в метадані додавати посилання на власні іконки, і вони будуть відображатися у певних контекстах.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях.</span> <span>Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.</span></span></p>
+
+<p>Іконка <span id="result_box" lang="uk"><span>може бути додана на сторінку за допомогою</span></span>:</p>
+
+<ol>
+ <li><span id="result_box" lang="uk"><span>Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі </span></span><code>.ico</code><span lang="uk"><span> (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад </span></span><code>.gif</code><span lang="uk"><span> або </span></span><code>.png</code><span lang="uk"><span>, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6</span></span>).</li>
+ <li>Додайте наступний рядок в <code>&lt;head&gt;</code> HTML документу, щоб вказати іконку:
+  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p><span class="short_text" id="result_box" lang="uk"><span>Ось приклад піктограми на панелі закладок</span></span>:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p><span id="result_box" lang="uk"><span>Також існує безліч інших типів іконок.</span> <span>Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN</span></span>:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка</span></span><span lang="uk"><span> високої роздільної здатності.</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Не хвилюйтеся щодо впровадження всіх цих типів іконок прямо зараз - це досить просунута функція, і від вас не очікується знання про це, щоб просунутися в курсі.</span> <span>Основна мета тут полягає в тому, щоб повідомити вам про такі речі, і не лякайтеся, якщо ви зустрінете їх під час перегляду вихідних кодів інших веб-сайтів.</span></span></p>
+
+<h2 id="Застосування_CSS_та_JavaScript_в_HTML"><span class="short_text" id="result_box" lang="uk"><span>Застосування CSS та JavaScript в HTML</span></span></h2>
+
+<p><span id="result_box" lang="uk"><span>Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують</span></span> {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} <span id="result_box" lang="uk"><span>для роботи інтерактивних функцій, таких як відеоплеєри</span> <span>, карти, ігри тощо</span></span>. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.</p>
+
+<ul>
+ <li>
+  <p>Елемент {{htmlelement("link")}} завжди розміщується в середині голови (head) веб-документу. Цей елемент має два атрибути, rel="stylesheet", <span id="result_box" lang="uk"><span>який вказує, що це таблиця стилів документа, а також href, що вказує шлях до файлу стилів (до файлу з розширенням css):</span></span></p>
+
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>Елемент {{htmlelement("script")}} не обов'язково має бути в голові сторінки (head); насправді,  краще скрипт розміщувати в нижній частині тіла документа (body) (перед закриваючим тегом <code>&lt;/body&gt;</code>), <span id="result_box" lang="uk"><span>щоб переконатися, що весь вміст HTML сторінки був прочитаний браузером, перш ніж він намагатиметься застосувати JavaScript на сторінці</span><span> </span></span> (<span id="result_box" lang="uk"><span>якщо JavaScript намагається отримати доступ до елемента, який ще не існує, браузер видає помилку</span></span>).</p>
+
+  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Примітка</strong>: Елемент <code>&lt;script&gt;</code> <span id="result_box" lang="uk"><span>може виглядати як порожній елемент, але це не так, і тому потрібен закриваючий тег.</span> <span>Замість того, щоб вказувати на зовнішній файл сценарію, ви також можете додати ваш сценарій в елемент </span></span><code>&lt;script&gt;</code>.</p>
+ </li>
+</ul>
+
+<h3 id="Активне_навчання_застосування_CSS_та_JavaScript_на_сторінці"><span id="result_box" lang="uk"><span>Активне навчання: застосування CSS та JavaScript на сторінці</span></span></h3>
+
+<ol>
+ <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, візьміть копії наших</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> та <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> файлів, <span id="result_box" lang="uk"><span>і збережіть їх на своєму комп'ютері в тій же директорії. </span></span><span id="result_box" lang="uk"><span>Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.</span></span> <span lang="uk"> </span></li>
+ <li><span id="result_box" lang="uk"><span>Відкрийте файл HTML у вашому браузері та текстовий редактор</span></span>.</li>
+ <li><span id="result_box" lang="uk"><span>Виконавши ці кроки, додайте до вашого HTML документу елементи</span></span> {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.</li>
+</ol>
+
+<p><span id="result_box" lang="uk"><span>Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:</span></span></p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>JavaScript <span id="result_box" lang="uk"><span>додав порожній список на сторінку.</span> <span>Тепер, коли ви натиснете де-небудь у списку, з'явиться діалогове вікно з проханням ввести якийсь текст для нового елемента списку.</span> К<span>оли ви натиснете кнопку ОК, новий елемент списку буде додано до списку, що містить текст.</span> <span>Коли ви натискаєте існуючий елемент списку, з'явиться діалогове вікно, що дозволить вам змінити текст об'єкта.</span></span></li>
+ <li><span id="result_box" lang="uk"><span>CSS змусив фон змінитись зеленим кольором, а текст став більшим.</span> <span>Він також стилізовав деякий вміст, який JavaScript додав на сторінку (червона смужка з чорною рамкою - це стиль, який CSS додав до списку, створений JS).</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Якщо ви застрягли в цій вправі і не можете застосувати</span></span> CSS/JS на сторінці, то перегляньте нашу сторінку <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> з прикладом.</p>
+</div>
+
+<h2 id="Встановлення_основної_мови_документа"><span class="short_text" id="result_box" lang="uk"><span>Встановлення основної мови документа</span></span></h2>
+
+<p><span id="result_box" lang="uk"><span>Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки.</span></span> Це можна зробити, додавши <a href="/uk/docs/Web/HTML/Global_attributes/lang">lang attribute</a> (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> і показано нижче).</p>
+
+<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
+
+<p>Це корисно в багатьох випадках. <span id="result_box" lang="uk"><span>Ваш HTML-документ буде більш ефективно індексований пошуковими системами, </span></span>які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову <span lang="uk"><span>(дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово</span> <span>"динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).</span></span></p>
+
+<p><span id="result_box" lang="uk"><span>Ви також можете встановити підрозділи вашого документа, щоб вони розпізнавались різними мовами.</span> В нашому прикладі з фрагментом японською мовою правильно вказати мову так</span>:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p><span id="result_box" lang="uk"><span>Ці коди визначаються стандартом</span></span> <a href="https://uk.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. <span id="result_box" lang="uk"><span>Ви можете дізнатись більше про них в</span></span> <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p>
+
+<h2 id="Підсумок">Підсумок</h2>
+
+<p>На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/uk/learn/html/multimedia_and_embedding/index.html b/files/uk/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..6dccf89410
--- /dev/null
+++ b/files/uk/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,55 @@
+---
+title: Вставки мультимедіа
+slug: Learn/HTML/Multimedia_and_embedding
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!</p>
+
+<div class="note">
+<p>Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад JSBin або Thimble.</p>
+
+<h2 id="sect1"> </h2>
+</div>
+
+<p class="summary">Довідники</p>
+
+<p>Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Зображення у форматі HTML</a></dt>
+ <dd>Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента {{htmlelement ("img")}}, який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою {{htmlelement ("figure")}} і як він відноситься до фонових зображень CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Відео та аудіозапис</a></dt>
+ <dd>Далі ми розглянемо, як використовувати HTML5 елементи {{htmlelement ("video")}} та {{htmlelement ("audio")}}, щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Від &lt;object&gt; до &lt;iframe&gt; - інші технології вбудовування</a></dt>
+ <dd>На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: {{htmlelement ("iframe")}}, елементи {{htmlelement ("embed")}} і {{htmlelement ("object")}}.  <code>&lt;iframe&gt;</code> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Додавання векторної графіки до Інтернету</a></dt>
+ <dd>Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний {{glossary ("SVG")}} формат на веб-сторінках.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Відповідні зображення</a></dt>
+ <dd>За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент {{htmlelement ("picture")}}.</dd>
+</dl>
+
+<h2 id="Оцінки">Оцінки</h2>
+
+<p>Наступні оцінки допоможуть перевірити розуміння базових основ HTML, описаних вище в посібниках.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сторінка сплесків Mozilla</a></dt>
+ <dd>У цій оцінці ми перевіримо ваші знання про деякі методи, описані в статтях цього модуля, що допоможе вам додати деякі зображення та відео на приголомшливу сторінку про все про Mozilla!</dd>
+</dl>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Додайте візитну карту догори зображення</a></dt>
+ <dd>Карти зображень забезпечують механізм створення різних частин посилання на зображення на різні місця (подумайте про карту, посилаючись на додаткову інформацію про кожну країну, на яку ви натискаєте). Ця техніка іноді може бути корисною.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Основи веб-грамотності 2</a></dt>
+ <dd>
+ <p>Відмінний курс навчання Mozilla, який вивчає та випробовує деякі з навичок, про які говорили в модулі мультимедіа та вбудовування. Зануртеся в основу створення веб-сторінок, розробки для доступності, спільного використання ресурсів, використання онлайн-засобів масової інформації та відкритої роботи (це означає, що ваш вміст є вільно доступним і доступним для обміну іншими користувачами).</p>
+ </dd>
+</dl>
diff --git a/files/uk/learn/html/tables/index.html b/files/uk/learn/html/tables/index.html
new file mode 100644
index 0000000000..3e5350587c
--- /dev/null
+++ b/files/uk/learn/html/tables/index.html
@@ -0,0 +1,40 @@
+---
+title: HTML-таблиці
+slug: Learn/HTML/Tables
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Доволі поширеним завданням в HTML є структуризація табличних даних, і HTML має набір елементів та атрибутів саме для таких цілей. В поєднанні з <a href="/en-US/docs/Learn/CSS">CSS</a> для стилізації, HTML полегшує відображення в інтернеті такої інформації, як шкільний навчальний план, розклад занять у вашому басейні, або статистику про ваших улюблених динозаврів чи футбольні команди. Даний модуль містить усе, що необхідно знати про структуризацію табличних даних за допомогою HTML.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перед тим як почати даний модуль, ви повинні пройти базовий курс HTML — дивіться <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML.</a></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Зміст">Зміст</h2>
+
+<p>Даний модуль містить наступні статті:</p>
+
+<p><a href="/en-US/docs/Learn/HTML/Tables/Basics">Основи HTML таблиць</a></p>
+
+<dl>
+ <dd>Дана стаття дозволить вам розпочати роботу з HTML таблицями, ознайомить з такими основними поняттями як рядки та клітини, заголовки, як розширити клітини на декілька колонок та рядків, а також як згрупувати усі клітини разом з метою стилізації.</dd>
+</dl>
+
+<p><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Особливості та доступність HTML таблиць</a></p>
+
+<dl>
+ <dd>В другій статті даного модулю ми більш детально розгядаємо особливості HTML таблиць - такі як captions/summaries та групування рядків в head, body та footer секції вашої таблиці - а також розглядаємо доступність таблиць для користувачів з вадами зору.</dd>
+</dl>
+
+<h2 id="Оцінювання">Оцінювання</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Структуризація даних про планети</a></dt>
+ <dd><br>
+ У нашій табличній оцінці ми надаємо вам деякі дані про планети в нашій сонячній системі, які ви зможете структурувати в HTML таблицю.</dd>
+</dl>
diff --git a/files/uk/learn/index.html b/files/uk/learn/index.html
new file mode 100644
index 0000000000..ad19811666
--- /dev/null
+++ b/files/uk/learn/index.html
@@ -0,0 +1,112 @@
+---
+title: Вчимо веб-розробку
+slug: Learn
+tags:
+  - WWW
+  - Веб
+  - Покажчик
+  - Початківець
+  - вивчення
+translation_of: Learn
+---
+<div>{{LearnSidebar}}</div>
+
+<div>
+<p class="summary">Ласкаво просимо до навчальної зони MDN. Ці статті покликані забезпечити початківців у веб-розробці всім необхідним, аби почати писати код простих сайтів.</p>
+</div>
+
+<p>Мета цієї частини MDN не в тому, щоб зробити вас з «початківця» відразу «експертом» , а зробити вас «знаючим». Потім ви самі зможете вибрати подальший шлях, вивчаючи <a href="https://developer.mozilla.org/uk/">решту MDN</a>, та інші розширені та професійні ресурси, що будуть підсумовувати попередні знання.</p>
+
+<p>Якщо ви цілковитий початківець, веб-розробка може стати певним викликом для вас — ми підтримаємо вас та дамо детальну інформацію, щоб ви почували себе комфортно та вивчили тему як слід. Почувайте себе як риба у воді, незалежно від того, чи ви студент, який вивчає веб-розробку (самостійно або в аудиторії), вчитель, який шукає матеріали для занять, аматор або просто прагнете детальніше зрозуміти, як працють веб-технології.</p>
+
+<div class="warning">
+<p><strong>Важливо</strong>: Вміст навчальної зони постійно оновлюється. Якщо ви маєте запитання стосовно тем, які на вашу думку не висвітлені, зверніться до секції {{anch("Зв'яжіться з нами")}} нижче.</p>
+</div>
+
+<h2 id="З_чого_почати">З чого почати</h2>
+
+<ul class="card-grid">
+ <li><span>Початківець:</span>Для практичного ознайомлення з темою, якщо ви початківець у веб-розробці, рекомендуємо починати роботу з модуля <a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Web</a>.</li>
+ <li><span>Поширені питання:</span> Якщо є загальні запитання стосовно веб-розробки, вам допоможе розділ <a href="/uk/docs/Learn/Common_questions">Поширені питання</a>.</li>
+ <li><span>Розширений рівень:</span> Якщо ви вже освоїли базові поняття, наступним кроком буде детальніше вивчення {{glossary("HTML")}} та {{glossary("CSS")}}: розпочніть з модуля <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> та продовжуйте з <a href="/uk/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>.</li>
+ <li><span>Пишемо скрипти:</span> Якщо ви вже достатньо володієте HTML та CSS або в основному цікавитесь кодуванням, вам слід перейти до {{glossary("JavaScript")}}. Почніть з розділів <a href="/uk/docs/Learn/JavaScript/First_steps">Перші кроки в JavaScript</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Перші кроки на стороні сервера</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Наш <a href="/uk/docs/Glossary">Словник</a> надає визначення термінологій.</p>
+</div>
+
+<p>{{LearnBox({"title":"Випадковий запис в словнику"})}}</p>
+
+<h2 id="Охоплені_теми">Охоплені теми</h2>
+
+<p>Нижче наведено список усіх тем, які ми розглядаємо в навчальній зоні MDN.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a></dt>
+ <dd>Забезпечує практичне введення до веб-розробки для цілковитих початківців.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML - структурування інтернету</a></dt>
+ <dd>HTML - це мова, яку ми використовуємо для структурування різних частин нашого вмісту та визначення їх змісту чи призначення. Ця тема детально вчить HTML.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — стилізація інтернету</a></dt>
+ <dd>CSS - це мова, яку ми можемо використовувати для зміни вигляду та представлення веб-контенту, а також додавання поведінки, як-от анімація. Ця тема всебічно охоплює CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — динамічні сценарії на стороні клієнта</a></dt>
+ <dd>JavaScript - це скриптова мова, що використовується для додавання динамічних функцій веб-сторінкам. Ця тема викладає всі необхідні, для комфортного написання та розуміння JavaScript, елементи.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Доступність — зробити інтернет зручним для всіх</a></dt>
+ <dd>Доступність - це практика створення веб-контенту для максимально можливої кількості людей незалежно від інвалідності, пристрою, мови та інших факторів, що відрізняються. Ця тема дає вам все, що вам потрібно знати.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Інструменти та тестування</a></dt>
+ <dd>Ця тема охоплює інструменти, які розробники використовують для полегшення їх роботи, як-от інструменти крос-браузерного тестування.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/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>. Якщо ви хочете скопіювати їх усі на свій комп'ютер, найпростішим способом є:</p>
+
+<ol>
+ <li><a href="https://git-scm.com/downloads">Встановіть Git</a> на вашу машину. Це основне програмне забезпечення системи керування версіями, на якому працює GitHub.</li>
+ <li><a href="https://github.com/join">Отримайте обліковий запис на GitHub</a>.</li>
+ <li>Після реєстрації, увійдіть на <a href="https://github.com/">github.com</a> за допомогою свого імені користувача та пароля.</li>
+ <li>Відкрийте командний рядок комп'ютера (Windows) або термінал (Linux, macOS).</li>
+ <li>Щоб скопіювати репозиторій зони навчання до папки під назвою learning area у поточному розташуванні, яке вказує ваш командний рядок/термінал, скористайтеся цією командою:
+  <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>Тепер ви можете ввести каталог та потім знаходити ваші файли, (використовуючи шукач/файловий провідник або <a href="https://uk.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="brush: bash">cd learning-area</pre>
+ </li>
+ <li>Оновіть репозиторій, використовуючи таку команду:
+  <pre class="brush: bash">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="Звяжіться_з_нами">Зв'яжіться з нами</h2>
+
+<p>Якщо ви хочете зв'язатись з нами з будь-якої підстави, надішліть нам листа на <a href="/uk/docs/MDN/Community/Conversations#Asynchronous_discussions">поштові списки</a> або в <a href="https://developer.mozilla.org/uk/docs/MDN/Community/Conversations#Chat_in_IRC">IRC канал</a>. Ми хочемо дізнатись вашу думку стосовно помилок та неточностей на сайті, запити нових навчальних тем, запити про допомогу по незрозумілим інструментам чи будь-що інше.</p>
+
+<p>Якщо ви зацікавлені розвивати/вдосконалювати зміст, погляньте <a href="/uk/Learn/How_to_contribute">Як ви можете допомогти</a>, і дайтесь чути! Ми будемо надзвичайно щасливі поспілкуватись з вами, не дивлячись на те, хто ви — студент, викладач, досвідчений веб-розробник або будь-хто зацікавлений допомогти у вдосконалені навчального досвіду.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
+ <dd>Наш інформаційний бюлетень для веб-розробників, який є чудовим ресурсом для всіх рівнів досвіду.</dd>
+ <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://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
+ <dd>Платформа для початкового рівня веб-грамотності та навичок 21 століття, що також забезпечує доступ до викладацьких матеріалів, відсортованих за категоріями.</dd>
+ <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd>Серія навчальних матеріалів для викладання (та навчання), створених Фондом Мозіла, що охоплює все, починаючи від базової грамотності в Інтернеті та конфіденційності, до JavaScript і зламу Minecraft.</dd>
+ <dt><a href="https://edabit.com">Edabit</a></dt>
+ <dd>Сотні безкоштовних інтерактивних завдань по кодуванню на різних мовах.</dd>
+</dl>
diff --git a/files/uk/learn/javascript/client-side_web_apis/index.html b/files/uk/learn/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..ee5df2ea53
--- /dev/null
+++ b/files/uk/learn/javascript/client-side_web_apis/index.html
@@ -0,0 +1,43 @@
+---
+title: Веб-APIs на стороні клієнта
+slug: Learn/JavaScript/Client-side_web_APIs
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<div>При написанні клієнтського JavaScript для веб-сайтів або додатків, ви досить скоро зустрінитесь з Інтерфейсами для Програмування Додатків (APIs). APIs є функціями програмування, що надають можливість маніпулювання різними аспектами браузера та операційної системи, на якій працює сайт, або обробки даних з інших веб-сайтів або службю. У цьому модулі ми розглянемо, що таке API, і як використовувати деякі з найбільш поширених API, які ви часто зустрічаєте в процесі розробки.</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Щоб даний модуль був максимально корисним, ми рекомендуємо вам пройти попередні JavaScript модулі у серії (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, та <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Дані модулі, як правило, передбачають просте використання API, тому що зачасту досить важко писати приклади клієнтського JavaScript без них. Для даної інструкції ми припустимо, що ви ознайомлені з основами мови JavaScript, та вивчимо загальні Web APIs більш детально.</p>
+
+<p>Базові знання <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a> також будуть корисними.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt>
+ <dd>Перш за все, ми почнемо з розгляду APIs з високого рівня - що вони собою представляють, як вони працюють, як використовувати їх у власному коді та яку вони мають структуру? Ми також розглянемо, що таке різні основні класи APIs та як вони використовуються.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt>
+ <dd>При написанні веб-сторінок і додатків однією з найпоширеніших речей, яку ви захочете зробити це маніпуляція веб-документами. Зазвичай це робиться за допомогою об'єктної моделі документа (DOM), набору API для керування HTML та інформацією про стиль, яка використовує об'єкт {{domxref ("Document")}}. У цій статті ми детально розглянемо, як використовувати DOM, а також деякі інші цікаві API, які можуть змінити ваше середовище цікавими способами.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt>
+ <dd>Іншим дуже поширеним завданням на сучасних веб-сайтах і додатках є отримання окремих елементів даних з сервера для оновлення розділів веб-сторінки без необхідності завантажувати абсолютно нову сторінку. Ця, здавалося б, невелика деталь мала величезний вплив на продуктивність і поведінку сайтів. У цій статті ми пояснимо концепцію і розглянемо технології, які роблять це можливим, наприклад, {{domxref ("XMLHttpRequest")}} і <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt>
+ <dd>APIs, які ми розглянули є вбудованими в браузер, але не всі APIs є частиною браузерів. Багато великих веб-сайтів і служб, таких як Google Maps, Twitter, Facebook, PayPal тощо, надають API, що дозволяють розробникам використовувати свої дані (наприклад, показувати ваш Twitter  у вашому блозі) або послуги (наприклад, показувати індивідуально налаштовані Google Maps на вашому сайті або використання логіна Facebook для входу в систему користувачів. У цій статті розглядаються відмінності між API браузера та APIs третьої сторони і показано деякі типові використання останнього.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt>
+ <dd>Браузер містить деякі дуже потужні засоби графічного програмування, від мови масштабованої векторної графіки (<a href="/en-US/docs/Web/SVG">SVG</a>), до APIs для малювання елементів HTML {{htmlelement ("canvas")}} (див. <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> та <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ця стаття містить вступ до Canvas API, а також додаткові ресурси, які дозволять вам дізнатися більше.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt>
+ <dd>HTML5 поставляється з елементами для вбудовування мультимедійних даних у документи - {{htmlelement ("відео")}} і {{htmlelement ("аудіо")}} - які, в свою чергу, мають власні APIs для керування відтворенням, пошуком і т.д. Дана стаття демонструє, як виконувати звичайні завдання, наприклад, створювати власні елементи керування відтворенням.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt>
+ <dd>Сучасні веб-браузери мають ряд різних технологій, які дозволяють зберігати дані, пов'язані з веб-сайтами, і отримувати їх у разі необхідності, дозволяючи зберігати дані на довгий термін, зберігати сайти в автономному режимі та багато іншого. У цій статті пояснюються основи як це все працює.</dd>
+</dl>
diff --git a/files/uk/learn/javascript/first_steps/index.html b/files/uk/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..023c9c97e6
--- /dev/null
+++ b/files/uk/learn/javascript/first_steps/index.html
@@ -0,0 +1,69 @@
+---
+title: Перші кроки у JavaScript
+slug: Learn/JavaScript/First_steps
+tags:
+  - Arrays
+  - Article
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - Module
+  - Numbers
+  - Operators
+  - Variables
+  - maths
+  - strings
+  - Мова
+  - Україньська
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Перш ніж перейти до першого практичного досвіду написання JavaScript. Після цього ми детально обговоримо деякі основні елементи, такі як змінні, рядки, числа та масиви.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Для того щоб почати з цього модуля, вам не потрібні попередні знання JavaScript, однак ви повинні бути добре знайомі з HTML та CSS. Перед початком роботи з JavaScript вам рекомендується виконати такі модулі:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> (що включає початковий рівень <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>).</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в HTML</a>.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введення в CSS</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка</strong>: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, можна спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Що таке JavaScript?</a></dt>
+ <dd>Ласкаво просимо до курсу JavaScript для новачків MDN! У цій першій статті ми розглянемо JavaScript з висоти, відповідаючи на такі запитання, як "що це таке?" Та "що воно робить?", і переконаємось у тому, що JavaScript відповідає вашим вимогам.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Перші спроби на JavaScript</a></dt>
+ <dd>Тепер ви дізнались щось про теорію JavaScript, і що ви можете з ним робити, ми збираємося дати вам курс по написанню основних функцій JavaScript за допомогою повністю практичного підручника. Тут ви створите просту гру "Вгадай номер", крок за кроком.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Що пішло не так? Усунення несправностей JavaScript</a></dt>
+ <dd>Коли ви створили гру "Вгадай номер" в попередній статті, ви помітили, що программа не працює. Ніколи не бійтеся - ця стаття спрямована на те, щоб позбавити вас від виривання волосся на голові при виникненні таких проблем, надаючи вам прості поради щодо того, як знайти та виправити помилки у програмах JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Збереження потрібної вам інформації - змінні</a></dt>
+ <dd>Тепер прочитавши останні пару статей, ви повинні знати, що таке JavaScript, що він може зробити для вас, як вам використовувати його разом з іншими веб-технологіями та які його функції є високорівневими. У цій статті ми перейдемо до справжніх основ дивлячись як працювати з основними будівельними блоками JavaScript-змінних.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Основи математики в JavaScript - цифри та оператори</a></dt>
+ <dd>На цьому етапі ми обговорюємо математику в JavaScript - як ми можемо об'єднати оператори та інші функції, щоб успішно оперувати числами в наших командах.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Обробка текстових рядків у JavaScript</a></dt>
+ <dd>Далі ми звернемо увагу на рядки - що є фрагментами тексту при програмуванні. У цій статті ми розглянемо всі загальні речі, які ви повинні знати про рядки при вивченні JavaScript, такі як створення рядків, використання лапок в рядку, та їх об'єднання.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Корисні рядкові методи</a></dt>
+ <dd>Тепер коли ми розглянули основи рядків, давайте перейдемо до механізму та почнемо вивчати корисні операції які ми можемо виконувати в рядках за допомогою вбудованих методів, таких як пошук довжини текстового рядка, об'єднання та розбиття рядків, заміна одного символу в рядку іншим, і так далі.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Масиви</a></dt>
+ <dd>У заключній статті цього модуля ми розглянемо масиви - обережний спосіб зберігання списку елементів даних під одним ім'ям змінної. Тут ми розглянемо, чому це корисно, а потім навчимось створювати масиви, витягувати, додавати і видаляти елементи, що зберігаються в масиві, і інше.</dd>
+</dl>
+
+<h2 id="Оцінки">Оцінки</h2>
+
+<p>Наступна оцінка перевірить ваше розуміння базових правил JavaScript, описаних вище в посібниках.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Генератор випадкових історій</a></dt>
+ <dd>У цьому оцінюванні вам буде запропоновано застосувати деякі знання, здобуті у статтях цього модуля, і застосувати їх для створення веселого прикладу, який генеруватиме випадкові історії. Порозважайтеся!</dd>
+</dl>
diff --git a/files/uk/learn/javascript/first_steps/what_is_javascript/index.html b/files/uk/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..a3ca8c054d
--- /dev/null
+++ b/files/uk/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,422 @@
+---
+title: What is JavaScript?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<div>Ласкаво просимо до курсу для новачків від MDN! В цій статті ми подивимося на JavaScript в загальному, пробуючи дати відповідь на запитання "Що це таке?" і "Що ти можеш з ним зробити?". Нашою ціллю буде ознайомити тебе з метою JavaScript-та в ІТ сфері.</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Потрібні знання:</th>
+   <td>Базове розуміння культури програмування, базові знання HTML і CSS</td>
+  </tr>
+  <tr>
+   <th scope="row">Ціль:</th>
+   <td>
+    <p>Отримати розуміння, що таке JavaScript, на що він здатний, і як він забезпечує роботу веб сторінок</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поверхневе_визначення">Поверхневе визначення</h2>
+
+<p>JavaScript - це мова програмування, що дозволяє тобі створювати складні речі на веб сторінках. Якщо веб сторінка робить, щось більше ніж просто показує статичну інформацію, наприклад: виконує моніторинг в реальному часі, інтерактивні карти, анімовану 2D/3D графіку, здатна на параллакс-скроллинг - ти можеш бути досить впевненим, що це без JavaScript там не обійшлося. Це є третій шар стандартного веб торту, з двома з них (<a href="/en-US/docs/Learn/HTML">HTML</a> і <a href="/en-US/docs/Learn/CSS">CSS</a>) ми ознайомилися в більших деталях в інших частинах курсу Навчальної зони (Learning Area).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} це є мова розмітки, яку ми використовуємо для структиризації зовнішнього вигляду нашої веб сторінки. Наприклад, визначення параграфів, заголовків, таблиць даних, чи вбудованих світлин та відео</li>
+ <li>{{glossary("CSS")}} is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.</li>
+ <li>{{glossary("JavaScript")}} is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)</li>
+</ul>
+
+<p>The three layers build on top of one another nicely. Let's take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Then we can add some CSS into the mix to get it looking nice:</p>
+
+<pre class="brush: css">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>And finally, we can add some JavaScript to implement dynamic behaviour:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>)!</p>
+
+<p>JavaScript can do a lot more than that — let's explore what in more detail.</p>
+
+<h2 id="So_what_can_it_really_do">So what can it really do?</h2>
+
+<p>The core client-side JavaScript language consists of some common programming features that allow you to do things like:</p>
+
+<ul>
+ <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called <code>name</code>.</li>
+ <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the <code>name</code> variable to create the complete text label, e.g. ''Player 1: Chris".</li>
+ <li>Running code in response to certain events occurring on a web page. We used a {{Event("click")}} event in our example above to detect when the button is clicked and then run the code that updates the text label.</li>
+ <li>And much more!</li>
+</ul>
+
+<p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p>
+
+<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and <em>then</em> put them together to make a bookshelf.</p>
+
+<p>They generally fall into two categories.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p>
+
+<ul>
+ <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li>
+ <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li>
+ <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p>
+</div>
+
+<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p>
+
+<ul>
+ <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li>
+ <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> and <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> allows you to embed custom maps into your website, and other such functionality.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p>
+</div>
+
+<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p>
+
+<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2>
+
+<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p>
+
+<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p>
+
+<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p>
+
+<h3 id="Browser_security">Browser security</h3>
+
+<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p>
+</div>
+
+<h3 id="JavaScript_running_order">JavaScript running order</h3>
+
+<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p>
+
+<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a> — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p>
+</div>
+
+<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3>
+
+<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.</p>
+
+<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer. The program is executed from a binary format which was generated from the original program source code.</p>
+
+<p>JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called <strong>just-in-time compiling</strong> to improve performance; the JavaScript source code gets compiled into a faster, binary, format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an intepreteted language, since the compilation is being handled at run time, rather than ahead of time.</p>
+
+<p>There are advantages to both types of language, but we won't discuss them right now.</p>
+
+<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3>
+
+<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about <strong>client-side JavaScript</strong>.</p>
+
+<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p>
+
+<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3>
+
+<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p>
+
+<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p>
+
+<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2>
+
+<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p>
+
+<h3 id="Internal_JavaScript">Internal JavaScript</h3>
+
+<ol>
+ <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li>
+ <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
+ <li>Next, go to your text editor and add the following in your head — just before your closing <code>&lt;/head&gt;</code> tag:
+  <pre class="brush: html">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
+  <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code>&lt;/head&gt;</code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="External_JavaScript">External JavaScript</h3>
+
+<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
+
+<ol>
+ <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
+ <li>Replace your current {{htmlelement("script")}} element with the following:
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Inside <code>script.js</code>, add the following script:
+  <pre class="brush: js">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+</div>
+
+<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3>
+
+<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>You can try this version of our demo below.</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p>
+
+<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p>
+
+<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p>
+
+<pre class="brush: js">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p>
+</div>
+
+<h3 id="Script_loading_strategies">Script loading strategies</h3>
+
+<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p>
+
+<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p>
+
+<p>In the internal example, you can see this structure around the code:</p>
+
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</pre>
+
+<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p>
+
+<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>defer</code> attribute, which tells the browser to continue downloading the HTML content once the <code>&lt;script&gt;</code> tag element has been reached.</p>
+
+<pre class="brush: js">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+
+<p>In this case both the script and the HTML will load simultaneously and the code will work.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>defer</code> attribute solved the problem for us. We didn't use the <code>defer</code> solution for the internal JavaScript example because <code>defer</code> only works for external scripts.</p>
+</div>
+
+<p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code>&lt;/body&gt;</code> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.</p>
+
+<h4 id="async_and_defer">async and defer</h4>
+
+<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p>
+
+<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p>
+
+<p>For example, if you have the following script elements:</p>
+
+<pre class="brush: html">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p>
+
+<p><code>defer</code> will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p>
+
+<pre class="brush: html">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p>
+
+<p>To summarize:</p>
+
+<ul>
+ <li>If your scripts don't need to wait for parsing and can run independently without dependencies, then use <code>async</code>.</li>
+ <li>If your scripts need to wait for parsing and depend on other scripts load them using <code>defer</code> and put their corresponding <code>&lt;script&gt;</code> elements in the order you want the browser to execute them.</li>
+</ul>
+
+<h2 id="Comments">Comments</h2>
+
+<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p>
+
+<ul>
+ <li>A single line comment is written after a double forward slash (//), e.g.
+  <pre class="brush: js">// I am a comment</pre>
+ </li>
+ <li>A multi-line comment is written between the strings /* and */, e.g.
+  <pre class="brush: js">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
+
+<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In general more comments is usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p>
+
+<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/uk/learn/javascript/index.html b/files/uk/learn/javascript/index.html
new file mode 100644
index 0000000000..151ff7435e
--- /dev/null
+++ b/files/uk/learn/javascript/index.html
@@ -0,0 +1,65 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - JavaScripting beginner
+  - Landing
+  - Module
+  - Topic
+  - Мова
+  - Українська
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} — це мова програмування, що дозволяє вам створювати живі, динамічні веб-сторінки. Кожного разу, коли веб-сторінка робить більше, ніж просто відображає Вам статичну інформацію для перегляду, відображає своєчасне оновлення вмісту або інтерактивні карти або анімовану 2D / 3D-графіку, або прокручує відео в медіапрогравачі, і таке інше — ви можете бути впевнені, що це робота JavaScript.</p>
+
+<h2 id="Навчальний_шлях">Навчальний шлях</h2>
+
+<p>Навряд чи JavaScript важче вивчати, ніж суміжні технології, такі як <a href="/en-US/docs/Learn/HTML">HTML</a> та <a href="/en-US/docs/Learn/CSS">CSS</a>. Але перш ніж намагатися вивчити JavaScript, вам настійно рекомендується спочатку ознайомитись хоча б з цими двома технологіями та, можливо, з деякими іншими. Почніть свою роботу з таких модулів:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з </a><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Web</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Введення в HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введення в CSS</a></li>
+</ul>
+
+<p>Попередній досвід роботи з іншими мовами програмування також може допомогти.</p>
+
+<p>Ознайомившись з основами JavaScript, ви повинні бути в курсі більш досконалих тем, наприклад:</p>
+
+<ul>
+ <li>JavaScript з середини, як навчають в нашому <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript посібнику</a></li>
+ <li><a href="/en-US/docs/Web/API">Веб-інтерфейси</a></li>
+</ul>
+
+<h2 id="Модулі">Модулі</h2>
+
+<p>Ця тема містить наступні модулі в запропонованому порядку для роботи з ними.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки JavaScript</a></dt>
+ <dd>У нашому першому модулі JavaScript ми спочатку відповімо на деякі фундаментальні питання, такі як "Що таке JavaScript?", "Як він виглядає?" Та "Що він може робити?", Потім ми перйдемо до першого практичного завданя з написання JavaScript. Після цього ми докладно розглянемо деякі ключові функції JavaScript, такі як змінні, рядки, числа та масиви.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні блоки JavaScript</a></dt>
+ <dd>У цьому модулі ми продовжуємо охоплювати всі основні фундаментальні функції JavaScript, звертаючи увагу на ті типи блоків коду які нам будуть часто зустрічатися, такі як умовні вирази, цикли, функції та події. Ви вже бачили цей матеріал в курсі, тільки тут ми все це розглянемо дитально.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Представляємо об'єкти JavaScript</a></dt>
+ <dd>У JavaScript більшість речей - це об'єкти, від основних функцій, як рядки та масиви, до API браузера, побудованого на вершині JavaScript. Ви навіть можете створити свої власні об'єкти, щоб інкапсулювати пов'язані функції та змінні в ефективні пакети. Об'єктно-орієнтований характер JavaScript важливо зрозуміти, якщо ви хочете піти далі з вашими знаннями мови та написати більш ефективний код, тому ми надали цей модуль, щоб допомогти вам. Тут ми детально вивчимо теорію об'єктів та синтаксис, подивимося як створити власні об'єкти, з'ясуємо що таке дані JSON, і як працювати з ним.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Веб-API на стороні клієнта</a></dt>
+ <dd>Під час написання JavaScript-клієнта для веб-сайтів або програм ви не заходите дуже далеко, перш ніж почати використовувати API-інтерфейси для роботи з різними аспектами браузера та операційної системи, на якому працює сайт, або навіть дані з інших веб-сайтів або послуги. У цьому модулі ми вивчимо, які API існують та як використовувати деякі з найпоширеніших API, які часто зустрічаються в роботі з розробкою.</dd>
+</dl>
+
+<h2 id="Вирішення_загальних_проблем_JavaScript">Вирішення загальних проблем JavaScript</h2>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Howto">Використовуйте JavaScript, щоб вирішувати поширені проблеми,</a> це посилання на розділи, що пояснюють, як використовувати JavaScript для вирішення дуже поширених проблем при створенні веб-сторінок.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">JavaScript на MDN</a></dt>
+ <dd>Основне джерело для документації JavaScript на MDN - тут ви знайдете великі довідкові документи з усіх аспектів мови JavaScript та деякі розширені навчальні посібники, націлені на досвідчених JavaScript програмістів.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Кодування математики</a></dt>
+ <dd>Відмінна серія відео уроків з вивчення математики яку ви повинні розуміти щоб бути ефективним програмістом, від <a href="https://twitter.com/bit101">Кейта Пітерса.</a></dd>
+</dl>
diff --git a/files/uk/learn/javascript/objects/basics/index.html b/files/uk/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..e7bc44b38b
--- /dev/null
+++ b/files/uk/learn/javascript/objects/basics/index.html
@@ -0,0 +1,259 @@
+---
+title: Основи об'єктів в JavaScript
+slug: Learn/JavaScript/Objects/Basics
+tags:
+  - JavaScript
+  - this
+  - Об'єкт
+  - Основи об'єктів
+  - Синтаксис
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">В цій статті ми розглянемо основи синтаксису JavaScript об'єктів і заново вивчимо деякий функціонал JavaScript, який ми досліджували  раніше на курсі, підтверджуючи той факт, що велика частина функціоналу, з яким ми вже зіткнулись, в дійсності є об'єктами.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необхідні знання:</th>
+   <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як почати роботу з об'єктами JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Основи_об'єктів">Основи об'єктів</h2>
+
+<p>Об'єкт - це сукупність пов'язаних даних і/або функціональності (які зазвичай складаються з декількох змінних і функцій, які називаються властивостями та методами, якщо вони знаходяться всередині об'єктів). Давайте розберемо приклад , щоб показати, як вони виглядають.</p>
+
+<p>Щоб почати, скопіюйте собі <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> файл. У ньому міститься дуже мало —  {{HTMLElement("script")}} елемент для написання нашого вихідного коду. Ми будемо використовувати це як основу для вивчення основ синтаксису об'єктів. Під час роботи з цим прикладом ви повинні відкрити <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>, щоб вводити деякі команди.</p>
+
+<p>Як і в багатьох випадках в JavaScript, створення об'єкту часто починається з визначення та ініціалізації змінної. Спробуйте ввести наступний нижче код в завантажений файл JavaScript, а потім збережіть і оновіть сторінку:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p>Якщо ви введете <code>person</code> в консоль JS і натиснете кнопку, то повинні отримати наступний результат:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>Вітаємо, ви щойно створили свій перший об'єкт. Але це порожній об'єкт, тому ми не можемо з ним багато чого зробити. Давайте доповнимо наш об'єкт, щоб він виглядав так:</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>Після збереження та оновлення спробуйте ввести деякі з наведених нижче елементів у консолі JS:</p>
+
+<pre class="brush: js">person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>Тепер всередині об'єкта є деякі дані та функціонал, і тепер до них можна отримати доступ за допомогою легкого і простого синтаксису!</p>
+
+<div class="note">
+<p><strong>Заувага</strong>: Якщо у вас виникли проблеми із застосуванням файлу в роботі, спробуйте порівняти свій код з нашою версією  — див. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (також <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Одна з найпоширеніших помилок, коли ви починаєте роботу з об'єктами, ставити кому в кінці останнього члена - це призводить до помилки.</p>
+</div>
+
+<p>Отже, що тут відбувається? Об'єкт складається з декількох елементів, кожен з яких має назву (наприклад, <code>name</code> та <code>age</code> вище), і значення (наприклад, <code>['Bob', 'Smith']</code> та <code>32</code>). Кожна пара назва/значення повинна бути відокремлена комою, а назва і значення в кожному випадку розділяються між собою двокрапкою. Синтаксис завжди дотримується цього шаблону:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}</pre>
+
+<p>Значенням члена об'єкта може бути майже все — в нашому об'єкті <code>person</code> є рядок, число, два масиви та дві функції.  Перші чотири елементи є елементами даних, що відносяться до <strong>властивостей</strong> об'єкта. Останні два елементи - це функції, які дозволяють об'єкту щось зробити з цими елементами даних, називаються <strong>методами</strong> об'єкта.</p>
+
+<p>Такі об'єкти називаються <strong>літералами об'єкта (object literal) </strong>- ми буквально вписали весь вміст об'єкта для його створення. Цей спосіб сильно відрізняється від об'єктів, реалізованих класами, які ми розглянемо пізніше.</p>
+
+<p>Дуже часто створення об'єкта за допомогою літералу використовується, коли вам потрібно перенести  певним чином ряд структурованих, пов'язаних елементів даних, наприклад, надсилаючи запит на сервер для розміщення їх в базі даних. Відправка одного об'єкта набагато ефективніша, ніж відправлення кількох елементів окремо, а також з ним легше працювати, ніж з масивом, коли ви хочете ідентифікувати окремі елементи за назвою.</p>
+
+<h2 id="Крапкова_нотація_(Dot_notation)">Крапкова нотація (Dot notation)</h2>
+
+<p>Вище ми отримали доступ до властивостей об'єкта та методів використовуючи <strong>крапкову нотацію (dot notation)</strong>. Ім'я об'єкта (person) діє як <strong>простір імен (namespace) </strong>- його потрібно вводити першим для того, щоб ми могли отримати доступ до всього, що вкладено <strong>(encapsulated)</strong> всередині об'єкта.  Далі ви ставите крапку, після якої вказуєте елемент, який хочете отримати - це може бути іназва простої властивості,  елемент масиву або виклик одного з методів об'єкту, наприклад:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-простори_імен_(Sub-namespaces)">Sub-простори імен (Sub-namespaces)</h3>
+
+<p>Значенням елемента об'єкта можна зробити навіть інший об'єкт. Наприклад, спробуйте змінити значення властивості name з такого</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>на</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>Тут ми ефективно створюємо <strong>sub-простір імен</strong>. Звучить складно, але насправді це не так - щоб отримати доступ до необхідних елементів, вам просто потрібно зробити ще один додатковий крок через крапку. Спробуйте це у консолі JS:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Важливо:</strong> на цьому етапі вам також доведеться переглянути код вашого методу і змінити екземпляри з </p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>на </p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Інакше ваші методи більше не працюватимуть.</p>
+
+<h2 id="Дужкова_нотація_(Bracket_notation)">Дужкова нотація (Bracket notation)</h2>
+
+<p>Існує ще один спосіб отримати доступ до властивостей об'єкту - використання <strong>дужкової нотації (bracket notation)</strong>. Замість написання цього коду:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>Ви можете використовувати:</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>Це виглядає дуже схожим на те, як ви отримуєте доступ до елементів у масиві, і в принципі так воно і є - замість використання числових індексів для вибору елемента, ви асоціюєте ім'я для кожного значення. Не дивно, що ці об'єкти іноді називають <strong>асоціативними масивами</strong> - вони зіставляють рядки зі значеннями так само, як масиви зіставляють числові індекси зі значеннями.</p>
+
+<h2 id="Встановлення_елементів_об'єкта">Встановлення елементів об'єкта</h2>
+
+<p>Досі ми розглядали лише повернення (або <strong>отримання</strong>) елементів об'єктів - ви також можете <strong>встановити</strong> (оновити) значення елемента об'єкта, просто оголосивши елемент, який ви хочете встановити (використовуючи крапкову або дужкову нотацію), наприклад:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Спробуйте ввести ці рядки, а потім знову поверніть елементи, щоб побачити, як вони змінилися:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Ви можете не просто оновлювати і встановлювати значення властивостей і методів об'єкта, а так сам створювати абсолютно нові елементи. Наприклад:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>Тепер ви можете перевірити ваші нові елементи:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>Одним із корисних аспектів дужкової нотації є те, що вона може використовуватись не тільки для динамічного встановлення значень елементів, але й для їх імен. Припустимо, ми хочемо, щоб користувачі могли зберігати користувацькі типи даних, ввівши ім'я та значення елемента в два текстові поля? Ми могли б отримати такі значення:</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>Потім ми могли б додати новий елемент і його значення в об'єкт <code>person</code> таким чином:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>Щоб перевірити це, спробуйте додати наступні рядки до свого коду:</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Тепер збережіть й оновіть, і введіть наступне:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Додавання властивості об'єкту з використанням наведеного вище методу неможливе з крапковою нотацією, яка може приймати лише літеральне ім'я елемента, а не значення змінної, що вказує на ім'я. </p>
+
+<h2 id="Що_таке_this">Що таке "this"?</h2>
+
+<p>Ви могли помітити щось дивне в наших методах. Подивіться на це, наприклад:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>Ймовірно, вас цікавить, що таке "this"?  <code>this</code> - це ключове слово, яке посилається на поточний об'єкт, всередині якого написаний код - тому, в нашому випадку, <code>this</code> рівнозначний об'єкту <code>person</code>. Але чому б просто не написати <code>person</code>? Як ви побачите в статті  <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a>, коли ми починаємо створювати конструктори, і т.д., <code>this</code> дуже корисний - він завжди буде гарантувати, що використовується правильне значення, коли контекст елемента змінюється (наприклад, два різні екземпляри об'єкта <code>person</code> можуть мати різні імена, але захочуть використовувати своє власне при вітанні). </p>
+
+<p>Давайте проілюструємо, що ми маємо на увазі з спрощеною парою об'єктів <code>person</code>:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>В цьому випадку, <code>person1.greeting()</code> виведе "Hi! I'm Chris."; <code>person2.greeting()</code> з іншого боку виведе "Hi! I'm Brian.", хоча код методу однаковий в обох випадках. Як ми вже говорили раніше, <code>this</code> рівнозначний об'єкту, всередині якого знаходиться код - це не дуже корисно, коли ви пишете літерали об'єктів вручну, але це дійсно допомагає, коли ви генеруєте об'єкти динамічно (наприклад, використовуючи конструктори). Пізніше це стане зрозумілішим.</p>
+
+<h2 id="Ви_використовували_об'єкти_постійно">Ви використовували об'єкти постійно</h2>
+
+<p>Поки ви проходили ці приклади, ймовірно, ви помітили, що крапкова нотація, яку ви використовували, виглядає дуже знайомо. Це тому, що ви використовували її протягом усього курсу! Кожного разу, коли ми працювали над прикладом, який використовував вбудований API-інтерфейс браузера або JavaScript об'єкт, ми використовували об'єкти, тому що такі функції побудовані з використанням тих же структур об'єктів, які ми тут розглядали, хоча і більш складні, ніж наші власні користувацькі приклади.</p>
+
+<p>Тому, коли ви використовували рядкові методи, такі як:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>Ви використовували метод, доступний в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Кожного разу, створюючи рядок у своєму коді, цей рядок автоматично створюється як екземпляр <code>String</code>, і тому має декілька загальних  методів/властивостей, доступних на ньому.</p>
+
+<p>Коли ви звертались до об'єктної моделі документа (DOM), використовуючи такі рядки:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>Ви використовували методи доступні в екземплярі класу <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">Document</a></code>. Для кожної завантаженої веб-сторінки створюється екземпляр <code>Document</code>, так званий <code>document,</code> який представляє структуру і зміст всієї сторінки, а також інші функції, такі як URL.</p>
+
+<p>Те саме стосується і багатьох інших вбудованих об'єктів/API, які ви використовували — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, і т.д.</p>
+
+<p>Зверніть увагу, що вбудовані об'єкти/API не завжди створюють екземпляри об'єктів автоматично. Наприклад, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a>, який дозволяє новим браузерам запускати системні повідомлення, вимагає, щоб ви створювали новий екземпляр об'єкта, за допомогою конструктора, для кожного повідомлення, яке ви хочете запустити. Спробуйте ввести наступне в консоль JavaScript:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Ми розглянемо конструктори в наступній статті.</p>
+
+<div class="note">
+<p><strong>Заувага: </strong>Корисно подумати про те, як об'єкти взаємодіють шляхом передачі повідомлень - коли об'єкту потрібен інший об'єкт для виконання якої-небудь дії, він часто надсилає повідомлення іншому об'єкту, за допомогою одного з методів, і чекає відповіді, яку ми знаємо як повернене значення (return value).</p>
+</div>
+
+<h2 id="Підсумок">Підсумок</h2>
+
+<p>Вітаємо, ви дійшли до завершення нашої першої статті про об'єкти в JS, тепер у вас має бути гарне уявлення про те, як працювати з об'єктами в JavaScript - в тому числі створювати свої власні прості об'єкти. Ви також повинні розуміти, що об'єкти дуже корисні в якості структур для зберігання пов'язаних даних і функціональності - якби ми намагались відстежувати всі властивості і методи в нашому об'єкті <code>person</code> як окремі змінні і функції, цу було б неефективно, і ми б ризикували зіткнутись з іншими змінними і функціями з такими ж іменами. Об'єкти дозволяють нам безпечно зберігати інформацію в своєму власному блоці, поза небезпекою.</p>
+
+<p>У наступній статті ми почнемо розглядати теорію об'єктно-орієнтованого програмування (ООП), і як ці техніки можуть бути використані в JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="В_цьому_модулі">В цьому модулі</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/uk/learn/javascript/objects/index.html b/files/uk/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..48bb0d98f1
--- /dev/null
+++ b/files/uk/learn/javascript/objects/index.html
@@ -0,0 +1,46 @@
+---
+title: Вступ до об'єктів JavaScript
+slug: Learn/JavaScript/Objects
+tags:
+  - JavaScript
+  - Об'єкти
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Чи не кожна річ у JavaScript є об'єктом — від самих основ, як-от рядки та масиви, до програмних інтерфейсів веб-переглядача. Ба більше, можна створювати власні об'єкти з передбаченою множиною властивостей та функцій для їх обробки. Для дальшого вивчення JavaScript важливим є розуміння об'єктно-орієнтованої природи цієї мови. Саме для того наводимо цю добірку статей. Тут ми докладно вивчатимемо теорію об'єктів та пов'язаний синтаксис, а відтак розглянемо створення власних об'єктів.</p>
+
+<h2 id="Необхідні_знання">Необхідні знання</h2>
+
+<p>Перш ніж розпочати, вам слід принаймні ознайомитися з HTML та CSS. Радимо спершу приділити увагу розділам <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Вступ до HTML</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, а вже тоді переходити до вивчення JavaScript.</p>
+
+<p>Крім того, докладне вивчення об'єктів JavaScript потребує розуміння певних основ цієї мови. Тож варто спершу переглянути статті <a href="/en-US/docs/Learn/JavaScript/First_steps">Перші кроки з JavaScript</a> та <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурні елементи в JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>Заувага</strong>: Якщо ви працюєте за комп'ютером, планшетом тощо, де не маєте змоги створювати власні файли, можете випробувати приклади коду (більшість) в онлайн-редакторах для програмування, як-от <a href="https://jsfiddle.net">JSFiddle</a>, <a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Путівники">Путівники</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics"> </a></dt>
+ <dd>В першій статті, що розглядає об'єкти JavaScript, ми ознайомимось з основами синтаксису об'єктів JavaScript та пересвідчимось, що велика частина функціоналу, з яким ми вже працювали, є насправді об'єктами.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Об'єктно-орієнтований JavaScript для початківців</a></dt>
+ <dd>Розібравшись з основами, ми зосередимось на об'єктно-орієнтованому JavaScript (OOJS) — у цій статті представлені основи теорії об'єктно-орієнтованого програмування (ООП), а далі дізнаємось, як за допомогою конструктора функцій JavaScript емулює класи об'єктів та як створювати екземпляри об'єктів.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Прототипи об'єктів</a></dt>
+ <dd>Прототипи — це механізм, завдяки якому об'єкти JavaScript наслідують функціонал один від одного, але при цьому вони працюють по-іншому, якщо порівнювати з механізмами наслідування в класичних об'єктно-орієнтованих мовах програмування. В цій статті ми дослідимо цю різницю, пояснимо як працюють прототипні ланцюги (prototype chains), і розглянемо як властивість прототипу може використовуватись для додавання методів до існуючих конструкторів.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Наслідування в JavaScript</a></dt>
+ <dd>Ознайомившись з значною частиною деталей OOJS, ця стаття покаже як створювати "дочірні" класи об'єктів (конструктори), які наслідують функціонал від своїх "батьківських" класів. Крім того, ми дамо декілька порад щод того, де і коли ви можете використовувати OOJS.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Робота з даними JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) — це стандартний текстовий формат для представлення структурованих даних на основі об'єктного синтаксису JavaScript, який зазвичай використовується для представлення та передачі даних на веб-сайтах (наприклад, відправлення деяких даних із сервера до клієнта, тому він може відображатись на веб-сторінці). Ви часто стикатиметесь з цим, тому в цій статті ми дамо вам все, що потрібно для роботи з JSON використовуючи JavaScript, включаючи синтаксичний аналіз (parsing) JSON, щоб ви могли отримувати доступ до елементів даних і писати свій власний JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика побудови об'єктів</a></dt>
+ <dd>У попередніх статтях ми розглянули найголовніші моменти в теорії та деталях синтаксису об'єктів JavaScript, що дає вам тверду основу для початку. В цій статті ми перейдемо до практичних занять, отримаємо більше практичної роботи для побудови власних JavaScript об'єктів, щоб створити щось веселе та барвисте — декілька кольорових стрибучих кульок.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Завдання">Завдання</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Додавання функціоналу до демо зі стрибучими кульками </a></dt>
+ <dd>У цьому завданні, ми очікуємо, що ви, використовуючи демо з стрибаючими кульками з попередньої статті як відправну точку, додасте трохи нового та цікавого функціоналу до нього.</dd>
+</dl>
diff --git a/files/uk/learn/javascript/objects/object-oriented_js/index.html b/files/uk/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..67b61867ff
--- /dev/null
+++ b/files/uk/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,295 @@
+---
+title: Об'єктно-орієнтований JavaScript для початківців
+slug: Learn/JavaScript/Objects/Object-oriented_JS
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Розібравшись з основами, зосередимось на об'єктно-орієнтованому JavaScript (OOJS) - в цій статті представлені основні позиції теорії об'єктно-орієнтованого програмування (ООП) , потім розглянемо, як в JavaScript емулювати класи об'єктів за допомогою функції конструктора, і як створити екземпляри об'єктів.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">
+    <table>
+     <tbody>
+      <tr>
+       <th scope="row">Необхідні знання:</th>
+       <td>Елементарна комп'ютерна грамотність, базове розуміння HTML та CSS, знайомство з основами JavaScript (див. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">First steps</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) і основи OOJS (див. <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JS</a>).</td>
+      </tr>
+      <tr>
+       <th scope="row">Мета:</th>
+       <td>Розуміння основ теоріі об'єктно-орієнтованого програмування, як це пов'язано з JavaScript ("більшість речей є об'єктами'), і як створювати конструктори та екземпляри об'єктів.</td>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Об'єктно-орієнтоване_програмування_-_основи">Об'єктно-орієнтоване програмування - основи</h2>
+
+<p>Давайте почнемо з спрощеного, високорівневого уявлення про об'єктно-орієнтоване програмування (ООП). Ми говоримо спрощеного, тому що ООП може швидко стати дуже складним, і якщо зараз дати повний курс, ймовірно, можна більше заплутати, ніж допомогти. Основна ідея ООП полягає в тому, що ми використовуємо об'єкти, щоб моделювати реальні речі, які ми хочемо представити всередині наших програм і/або забезпечити простий спосіб доступу до функціональних можливостей, які в іншому випадку було б важко або неможливо використати.</p>
+
+<p>Об'єкти можуть містити пов'язані дані і код, які представляють інформацію про те, що ви намагаєтеся змоделювати, а також функціональні можливості або поведінку, які ви хочете мати. Дані об'єкта (і часто функції теж) можуть бути акуратно збережені (офіційне поняття <strong>інкапсульовані</strong>) всередині об'єктного пакету (якому можна дати певне ім'я для позначення, яке іноді називають <strong>простором імен</strong>),  що полегшує структуру і доступ; об'єкти також часто використовуються як сховища даних, які можна легко відправляти по мережі.</p>
+
+<h3 id="Визначення_шаблону_об'єкта">Визначення шаблону об'єкта</h3>
+
+<p>Давайте розглянемо просту програму, яка відображає інформацію про учнів та вчителів в школі. Тут ми розглянемо теорію ООП загалом, а не в контексті будь-якої конкретної мови програмування.</p>
+
+<p>Щоб почати, повернемося до об'єкта <code>person</code> з нашої статті <a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Basics">Основи об'єктів в JavaScript</a>, який визначає загальні відомості і функціональні можливості людини. Є багато речей, які ви <em>можете</em> дізнатись про людину (її адресу, зріст, розмір взуття, профіль ДНК, номер паспорта, значні особистісні риси ...) , але в цьому випадку нас цікавлять лише ім'я, вік, стать та інтереси, і ми також хочемо написати коротку інформацію про неї на основі цих даних, і отримувати їх, щоб привітатись. Це відомо як <strong>абстракція (abstraction)</strong> - створення простої моделі більш складної речі, яка представляє її найважливіші аспекти таким чином, щоб було зручно працювати для виконання цілей нашої програми.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<p>В деяких мовах ООП, це загальне визначення типу об'єкта називається класом <strong>(class) </strong>(JavaScript використовує інший механізм і термінологію, як ви побачите нижче) - це насправді не об'єкт, це швидше шаблон, який визначає, які характеристики повинен мати об'єкт.</p>
+
+<h3 id="Створення_реальних_об'єктів">Створення реальних об'єктів</h3>
+
+<p>З нашого класу ми можемо створити <strong>екземпляри об'єктів</strong> - об'єкти, що містять дані та функціональні можливості, визначені в класі. З нашого класу Person, можемо створити декілька справжніх людей:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>Коли екземпляр об'єкта створюється з класу, <strong>функція конструктора</strong> класу виконується для його створення. Цей процес створення екземпляра об'єкта з класу називається <strong>instantiation</strong> - екземпляр об'єкта створюється з класу.</p>
+
+<h3 id="Specialist_classes">Specialist classes</h3>
+
+<p>In this case we don't want generic people — we want teachers and students, which are both more specific types of people. In OOP, we can create new classes based on other classes — these new <strong>child classes</strong> can be made to <strong>inherit</strong> the data and code features of their <strong>parent class</strong>, so you can reuse functionality common to all the object types rather than having to duplicate it.  Where functionality differs between classes, you can define specialized features directly on them as needed.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>This is really useful — teachers and students share many common features such as name, gender, and age, so it is convenient to only have to define those features once. You can also define the same feature separately in different classes, as each definition of that feature will be in a different namespace. For example, a student's greeting might be of the form "Yo, I'm [firstName]" (e.g <em>Yo, I'm Sam</em>), whereas a teacher might use something more formal, such as "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (e.g <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: The fancy word for the ability of multiple object types to implement the same functionality is <strong>polymorphism</strong>. Just in case you were wondering.</p>
+</div>
+
+<p>You can now create object instances from your child classes. For example:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>In the rest of the article, we'll start to look at how OOP theory can be put into practice in JavaScript.</p>
+
+<h2 id="Constructors_and_object_instances">Constructors and object instances</h2>
+
+<p>Some people argue that JavaScript is not a true object-oriented language — for example, its <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code> statement is just syntactical sugar over existing prototypical inheritance and is not a <code>class</code> in a traditional sense. JavaScript, uses special functions called <strong>constructor functions</strong> to define objects and their features. They are useful because you'll often come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects as you need in an effective way, attaching data and functions to them as required.</p>
+
+<p>When a new object instance is created from a constructor function, its core functionality (as defined by its prototype, which we'll explore in the article <a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>) is not all copied over to the new object like "classic" OO languages — instead the functionality is linked to via a reference chain called a <strong>prototype chain</strong>. So this is not true instantiation, strictly speaking — JavaScript uses a different mechanism to share functionality between objects.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Not being "classic OOP" is not necessarily a bad thing; as mentioned above, OOP can get very complex very quickly, and JavaScript has some nice ways to take advantage of OO features without having to get too deep into it.</p>
+</div>
+
+<p>Let's explore creating classes via constructors and creating object instances from them in JavaScript. First of all, we'd like you to make a new local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> file we saw in our first Objects article.</p>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<ol>
+ <li>Let's start by looking at how you could define a person with a normal function. Add this function within the <code>script</code> element:
+
+  <pre class="brush: js">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>You can now create a new person by calling this function — try the following lines in your browser's JavaScript console:
+  <pre class="brush: js">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  This works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it? Fortunately JavaScript provides us with a handy shortcut, in the form of constructor functions — let's make one now!</li>
+ <li>Replace your previous function with the following:
+  <pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>The constructor function is JavaScript's version of a class. You'll notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods. You'll see the <code>this</code> keyword being used here as well — it is basically saying that whenever one of these object instances is created, the object's <code>name</code> property will be equal to the name value passed to the constructor call, and the <code>greeting()</code> method will use the name value passed to the constructor call too.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code.</p>
+</div>
+
+<p>So how do we call a constructor to create some objects?</p>
+
+<ol>
+ <li>Add the following lines below your previous code addition:
+  <pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>Save your code and reload it in the browser, and try entering the following lines into your JS console:
+  <pre class="brush: js">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Cool! You'll now see that we have two new objects on the page, each of which is stored under a different namespace — when you access their properties and methods, you have to start calls with <code>person1</code> or <code>person2</code>; they are neatly packaged away so they won't clash with other functionality. They do, however, have the same <code>name</code> property and <code>greeting()</code> method available. Note that they are using their own <code>name</code> value that was assigned to them when they were created; this is one reason why it is very important to use <code>this</code>, so they will use their own values, and not some other value.</p>
+
+<p>Let's look at the constructor calls again:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>In each case, the <code>new</code> keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable — very similar to how a standard function is called. Each instance is created according to this definition:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>After the new objects have been created, the <code>person1</code> and <code>person2</code> variables contain the following objects:</p>
+
+<pre class="brush: js">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>Note that when we are calling our constructor function, we are defining <code>greeting()</code> every time, which isn't ideal. To avoid this, we can define functions on the prototype instead, which we will look at later.</p>
+
+<h3 id="Creating_our_finished_constructor">Creating our finished constructor</h3>
+
+<p>The example we looked at above was only a simple example to get us started. Let's now get on and create our final <code>Person()</code> constructor function.</p>
+
+<ol>
+ <li>Remove the code you inserted so far, and add in this replacement constructor — this is exactly the same as the simple example in principle, with just a bit more complexity:
+  <pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>Now add in the following line below it, to create an object instance from it:
+  <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>You'll now see that you can access the properties and methods just like we did previously — try these in your JS console:</p>
+
+<pre class="brush: js">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p>
+</div>
+
+<h3 id="Further_exercises">Further exercises</h3>
+
+<p>To start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the resulting object instances.</p>
+
+<p>In addition, there are a couple of problems with our <code>bio()</code> method — the output always includes the pronoun "He", even if your person is female, or some other preferred gender classification. And the bio will only include two interests, even if more are listed in the <code>interests</code> array. Can you work out how to fix this in the class definition (constructor)? You can put any code you like inside a constructor (you'll probably need a few conditionals and a loop). Think about how the sentences should be structured differently depending on gender, and depending on whether the number of listed interests is 1, 2, or more than 2.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p>
+</div>
+
+<h2 id="Other_ways_to_create_object_instances">Other ways to create object instances</h2>
+
+<p>So far we've seen two different ways to create an object instance — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declaring an object literal</a>, and using a constructor function (see above).</p>
+
+<p>These make sense, but there are other ways — we want to make you familiar with these in case you come across them in your travels around the Web.</p>
+
+<h3 id="The_Object()_constructor">The Object() constructor</h3>
+
+<p>First of all, you can use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor to create a new object. Yes, even generic objects have a constructor, which generates an empty object.</p>
+
+<ol>
+ <li>Try entering this into your browser's JavaScript console:
+  <pre class="brush: js">var person1 = new Object();</pre>
+ </li>
+ <li>This stores an empty object in the <code>person1</code> variable. You can then add properties and methods to this object using dot or bracket notation as desired; try these examples in your console:
+  <pre class="brush: js">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>You can also pass an object literal to the <code>Object()</code> constructor as a parameter, to prefill it with properties/methods. Try this in your JS console:
+  <pre class="brush: js">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="Using_the_create()_method">Using the create() method</h3>
+
+<p>Constructors can help you give your code order—you can create constructors in one place, then create instances as needed, and it is clear where they came from.</p>
+
+<p>However, some people prefer to create object instances without first creating constructors, especially if they are creating only a few instances of an object. JavaScript has a built-in method called <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> that allows you to do that. With it, you can create a new object based on any existing object.</p>
+
+<ol>
+ <li>With your finished exercise from the previous sections loaded in the browser, try this in your JavaScript console:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>Now try these:
+  <pre class="brush: js">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>You'll see that <code>person2</code> has been created based on <code>person1</code>—it has the same properties and method available to it.</p>
+
+<p>One limitation of <code>create()</code> is that IE8 does not support it. So constructors may be more effective if you want to support older browsers.</p>
+
+<p>We'll explore the effects of <code>create()</code> in more detail later on.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has provided a simplified view of object-oriented theory — this isn't the whole story, but it gives you an idea of what we are dealing with here. In addition, we have started to look at how JavaScript relates to and how it differs from "classic OOP", how to implement classes in JavaScript using constructor functions, and different ways of generating object instances.</p>
+
+<p>In the next article, we'll explore JavaScript object prototypes.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/learn/javascript/асинхронний/index.html b/files/uk/learn/javascript/асинхронний/index.html
new file mode 100644
index 0000000000..3167a1f55a
--- /dev/null
+++ b/files/uk/learn/javascript/асинхронний/index.html
@@ -0,0 +1,51 @@
+---
+title: Асинхронний JavaScript
+slug: Learn/JavaScript/Асинхронний
+translation_of: Learn/JavaScript/Asynchronous
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p>
+
+<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt>
+ <dd>
+ <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt>
+ <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt>
+ <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt>
+ <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt>
+ <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt>
+ <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li>
+</ul>
diff --git a/files/uk/learn/javascript/будівельні_блоки/index.html b/files/uk/learn/javascript/будівельні_блоки/index.html
new file mode 100644
index 0000000000..d4a6238d0f
--- /dev/null
+++ b/files/uk/learn/javascript/будівельні_блоки/index.html
@@ -0,0 +1,57 @@
+---
+title: Будівельні блоки JavaScript
+slug: Learn/JavaScript/Будівельні_блоки
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt>
+ <dd>In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></dt>
+ <dd>Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></dt>
+ <dd>Another essential concept in coding is <strong>functions. Functions</strong> allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></dt>
+ <dd>With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt>
+ <dd>The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt>
+ <dd>Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt>
+ <dd>Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.</dd>
+</dl>
diff --git a/files/uk/learn/server-side/django/index.html b/files/uk/learn/server-side/django/index.html
new file mode 100644
index 0000000000..c26c8fbe6b
--- /dev/null
+++ b/files/uk/learn/server-side/django/index.html
@@ -0,0 +1,60 @@
+---
+title: Django веб-фреймворк (Python)
+slug: Learn/Server-side/Django
+translation_of: Learn/Server-side/Django
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Django є надзвичайно популярним і повнофункціональним серверним веб-фреймворком, що написаний на Python. Даний модуль показує вам, чому Django є одним з найпопулярніших структур веб-сервера, а також як налаштувати середовище розробки, і як приступити до роботи щоб створювати власні веб-додатки.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перед початком цього модуля вам не потрібно володіти будь-якими знаннями про Django. Ви повинні лише розуміти, що таке серверне веб-програмування та веб-фреймворк, для цього читайте тему в нашому модулі - <a href="/en-US/docs/Learn/Server-side/First_steps">Програмування веб-сайту на стороні сервера, перші кроки</a>.</p>
+
+<p>Вітається володіння загальними знаннями концепцій програмування і мови програмування <a href="/en-US/docs/Glossary/Python">Python</a>, проте не є необхідним для розуміння основних понять.</p>
+
+<div class="note">
+<p><strong>Примітка</strong>: Python є однією із найпростіших мов програмування, легкою для освоєння та розуміння початківцями. Якщо ж ви прагнете зрозуміти цей модуль краще, то для цього є безліч безкоштовних книг і посібників, які є в інтернеті у вільному доступі (початківці у програмуванні можуть переглянути сторінку на wiki.python.org - <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python для початківців</a>).</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Вступ до Django</a></dt>
+ <dd>У цій першій статті про Django ми відповімо на питання "Що таке Django?" і дамо уявлення того що робить веб-фраймворк особливого.  We'll outline the main features, including some of the advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you then go on to set it up and start playing.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Налаштування середовища розробки Django</a></dt>
+ <dd>Now that you know what Django is for, we'll show you how to setup and test a Django development environment on Windows, Linux (Ubuntu), and Mac OS X — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Посібник Django: "Локальна бібліотека" - приклад веб-сайту</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Посібник Django, частина 2: Створення скелету веб-сайту</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Посібник Django, частина 3: Використання моделей</a></dt>
+ <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Посібник Django, частина 4: Адміністрування сайту</a></dt>
+ <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some of ways you can further improve the presentation of the admin site.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Посібник Django, частина 5: Створення домашньої сторінки</a></dt>
+ <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Посібник Django Tutorial Part 6: Загальний список і детальний перегляд</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Посібник Django, частина 7: Фреймворк сесій</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does shows how you can use the session framework to provide peristent behaviour for anonymous users in your own sites.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Посібник Django, частина 8: Аутентифікація користувачів і права доступу</a></dt>
+ <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Посібник Django, частина 9: Робота з формами</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Посібник Django, частина 10: Тестування веб-додатку Django</a></dt>
+ <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Посібник Django, частина 11: Розгортання веб-додатку Django на веб-сервері</a></dt>
+ <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django безпека веб-додатків</a></dt>
+ <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's in-built protections handle such threats.</dd>
+</dl>
+
+<h2 id="Оцінювання">Оцінювання</h2>
+
+<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django міні блог</a></dt>
+ <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd>
+</dl>
diff --git a/files/uk/learn/server-side/django/introduction/index.html b/files/uk/learn/server-side/django/introduction/index.html
new file mode 100644
index 0000000000..26ef60a53a
--- /dev/null
+++ b/files/uk/learn/server-side/django/introduction/index.html
@@ -0,0 +1,285 @@
+---
+title: Введення в Django
+slug: Learn/Server-side/Django/Introduction
+tags:
+  - CodingScripting
+  - Intro
+  - Learn
+  - Python
+  - Server-side programming
+  - django
+  - Джанго
+  - Кодування
+  - Програмування
+  - Пітон
+  - уроки
+translation_of: Learn/Server-side/Django/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">У цій першій статті Django, ми відповімо на питання "Що таке Django?" і даємо вам обзор того, що робить цей веб-фреймворк особливим. Ми розглянемо основні характеристики, включаючи деякі додаткові функціональні можливості модуля, які ми не встигли ще обговорити. Ми також покажемо вам деякі з основних блоків програми Django (хоча на даний момент у вас ще немає середовища розробки, в якій можна було б її протестувати).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови::</th>
+   <td>Basic computer literacy. A general understanding of <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, and in particular the mechanics of <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Завдання:</th>
+   <td>To gain familiarity with what Django is, what functionality it provides, and the main building blocks of a Django application.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Що_таке_Django">Що таке Django?</h2>
+
+<p>Django - це високорівневий веб-фреймворк Python, що дозволяє швидко розвивати безпечні та підтримувані сайти. Побудований досвідченими розробниками, Django піклується про більшу частину турбот про веб-розробку, тому ви можете зосередитися на написанні програми без необхідності винаходити колесо.Це вільний і відкритий код, має процвітаюче і активне співтовариство, велику документацію, і безліч варіантів для безкоштовної і платної підтримки.</p>
+
+<p>Django допоможе вам написати програмне забезпечення, яке:</p>
+
+<dl>
+ <dt>Complete</dt>
+ <dd>Django слідує філософії "Батарейки включені" і забезпечує майже все, що розробники можуть захотіти зробити "з коробки". Оскільки все, що вам потрібно, є частиною одного "продукту", все працює безперешкодно, слідує послідовним принципам дизайну і має велику й найновішу документацію.</dd>
+ <dt>Універсальний</dt>
+ <dd>Django використовується для створення майже будь-якого типу веб-сайту — fвід систем управління контентом та вікі, через соціальні мережі та сайти новин. Він може працювати з будь-якою стороною клієнта, і може надавати вміст практично в будь-якому форматі (у тому числі HTML, RSS feeds, JSON, XML, etc). Сайт, який ви зараз читаєте, заснований на Django!                                                                                                <br>
+ Internally, while it provides choices for almost any functionality you might want (e.g. several popular databases, templating engines, etc.), it can also be extended to use other components if needed.</dd>
+ <dt>Безпечний</dt>
+ <dd>Django helps developers avoid many common security mistakes by providing a framework that has been engineered to "do the right things" to protect the website automatically. For example, Django provides a secure way to manage user accounts and passwords, avoiding common mistakes like putting session information in cookies where it is vulnerable (instead cookies just contain a key, and the actual data is stored in the database) or directly storing passwords rather than a password hash.<br>
+ <br>
+ <em>A password hash is a fixed-length value created by sending the password through a <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">cryptographic hash function</a>. Django can check if an entered password is correct by running it through the hash function and comparing the output to the stored hash value. However due to the "one-way" nature of the function, even if a stored hash value is compromised it is hard for an attacker to work out the original password.</em><br>
+ <br>
+ Django enables protection against many vulnerabilities by default, including SQL injection, cross-site scripting, cross-site request forgery and clickjacking (see <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> for more details of such attacks).</dd>
+ <dt>Масштабованість</dt>
+ <dd>Django uses a component-based “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” architecture (each part of the architecture is independent of the others, and can hence be replaced or changed if needed). Having a clear separation between the different parts means that it can scale for increased traffic by adding hardware at any level: caching servers, database servers, or application servers. Some of the busiest sites have successfully scaled Django to meet their demands (e.g. Instagram and Disqus, to name just two).</dd>
+ <dt>Підтримується</dt>
+ <dd>Django code is written using design principles and patterns that encourage the creation of maintainable and reusable code. In particular, it makes use of the Don't Repeat Yourself (DRY) principle so there is no unnecessary duplication, reducing the amount of code. Django also promotes the grouping of related functionality into reusable "applications" and, at a lower level, groups related code into modules (along the lines of the <a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller (MVC)</a> pattern).</dd>
+ <dt>Портативний</dt>
+ <dd>Django is written in Python, which runs on many platforms. That means that you are not tied to any particular server platform, and can run your applications on many flavours of Linux, Windows, and Mac OS X. Furthermore, Django is well-supported by many web hosting providers, who often provide specific infrastructure and documentation for hosting Django sites.</dd>
+</dl>
+
+<h2 id="Звідки_він">Звідки він?</h2>
+
+<p>Django was initially developed between 2003 and 2005 by a web team who were responsible for creating and maintaining newspaper websites. After creating a number of sites, the team began to factor out and reuse lots of common code and design patterns. This common code evolved into a generic web development framework, which was open-sourced as the "Django" project in July 2005. </p>
+
+<p>Django has continued to grow and improve, from its first milestone release (1.0) in September 2008 through to the recently-released version 2.0 (2017). Each release has added new functionality and bug fixes, ranging from support for new types of databases, template engines, and caching, through to the addition of "generic" view functions and classes (which reduce the amount of code that developers have to write for a number of programming tasks). </p>
+
+<div class="note">
+<p><strong>Note</strong>: Check out <span style="line-height: 1.5;">the <a href="https://docs.djangoproject.com/en/stable/releases/">release notes</a> on the Django website to see what has changed in recent versions, and how much work is going into making Django better.</span></p>
+</div>
+
+<p>Django is now a thriving, collaborative open source project, with many thousands of users and contributors. While it does still have some features that reflect its origin<span style="line-height: 1.5;">, Django has evolved into a versatile framework that is capable of developing any type of website. </span></p>
+
+<h2 id="Наскільки_популярним_є_Django">Наскільки популярним є Django?</h2>
+
+<p>There isn't any readily-available and definitive measurement of popularity of server-side frameworks (although sites like <a href="http://hotframeworks.com/">Hot Frameworks</a> attempt to assess popularity using mechanisms like counting the number of GitHub projects and StackOverflow questions for each platform). A better question is whether Django is "popular enough" to avoid the problems of unpopular platforms. Is it continuing to evolve? Can you get help if you need it? Is there an opportunity for you to get paid work if you learn Django? </p>
+
+<p>Based on the number of high profile sites that use Django, the number of people contributing to the codebase, and the number of people providing both free and paid for support, then yes, Django is a popular framework!</p>
+
+<p>High-profile sites that use Django include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, and Open Stack (source: <a href="https://www.djangoproject.com/">Django home page</a>).</p>
+
+<h2 id="Is_Django_opinionated">Is Django opinionated?</h2>
+
+<p>Web frameworks often refer to themselves as "opinionated" or "unopinionated".</p>
+
+<p>Opinionated frameworks are those with opinions about the "right way" to handle any particular task. They often support rapid development <em>in a particular domain </em>(solving problems of a particular type) because the right way to do anything is usually well-understood and well-documented. However they can be less flexible at solving problems outside their main domain, and tend to offer fewer choices for what components and approaches they can use.</p>
+
+<p>Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve a goal, or even what components should be used. They make it easier for developers to use the most suitable tools to complete a particular task, albeit at the cost that you need to find those components yourself.<br>
+ <br>
+ Django is "somewhat opinionated", and hence delivers the "best of both worlds". It provides a set of components to handle most web development tasks and one (or two) preferred ways to use them. However, Django's decoupled architecture means that you can usually pick and choose from a number of different options, or add support for completely new ones if desired.</p>
+
+<h2 id="Як_виглядає_код_Django">Як виглядає код Django?</h2>
+
+<p>In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what is needed based on the URL and possibly information in <code>POST</code> data or <code>GET</code> data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.</p>
+
+<p>Django web applications typically group the code that handles each of these steps into separate files:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><strong>URLs: </strong>While it is possible to process requests from every single URL via a single function, it is much more maintainable to write a separate view function to handle each resource. A URL mapper is used to redirect HTTP requests to the appropriate view based on the request URL. The URL mapper can also match particular patterns of strings or digits that appear in an URL, and pass these to a view function as data.</li>
+ <li><strong>View:</strong> A view is a request handler function, which receives HTTP requests and returns HTTP responses. Views access the data needed to satisfy requests via <em>models</em>, and delegate the formatting of the response to <em>templates</em>.</li>
+ <li><strong>Models:</strong> Models are Python objects that define the structure of an application's data, and provide mechanisms to manage (add, modify, delete) and query records in the database. </li>
+ <li><strong>Templates:</strong> A template is a text file defining the structure or layout of a file (such as an HTML page), with placeholders used to represent actual content. A <em>view</em> can dynamically create an HTML page using an HTML template, populating it with data from a <em>model</em>. A template can be used to define the structure of any type of file; it doesn't have to be HTML!</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Django refers to this organisation as the "Model View Template (MVT)" architecture. It has many similarities to the more familiar <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> architecture. </p>
+</div>
+
+<ul>
+</ul>
+
+<p>The sections below will give you an idea of what these main parts of a Django app look like (we'll go into more detail later on in the course, once we've set up a development environment).</p>
+
+<h3 id="Sending_the_request_to_the_right_view_(urls.py)">Sending the request to the right view (urls.py)</h3>
+
+<p>A URL mapper is typically stored in a file named <strong>urls.py</strong>. In the example below, the mapper  (<code>urlpatterns</code>) defines a list of mappings between <em>routes</em> (specific URL <em>patterns) </em>and corresponding view functions. If an HTTP Request is received that has a URL matching a specified pattern then the associated view function will be called and passed the request.</p>
+
+<pre>urlpatterns = [
+    <strong>path('admin/', admin.site.urls),
+    </strong>path('book/&lt;int:id&gt;/', views.book_detail, name='book_detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+</pre>
+
+<p>The <code>urlpatterns</code> object is a list of <code>path()</code> and/or <code>re_path()</code> functions (Python lists are defined using square brackets, where items are separated by commas and may have an <a href="https://docs.python.org/3/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">optional trailing comma</a>. For example: <code>[item1, item2, item3,]</code>).</p>
+
+<p>The first argument to both methods is a route (pattern) that will be matched. The <code>path()</code> method uses angle brackets to define parts of a URL that will be captured and passed through to the view function as named arguments. The <code>re_path()</code> function uses a flexible pattern matching approach known as a regular expression. We'll talk about these in a later article!</p>
+
+<p>The second argument is another function that will be called when the pattern is matched. The notation <code>views.book_detail</code> indicates that the function is called <code>book_detail()</code> and can be found in a module called <code>views</code> (i.e. inside a file named <code>views.py</code>)</p>
+
+<h3 id="Handling_the_request_(views.py)">Handling the request (views.py)</h3>
+
+<p>Views are the heart of the web application, receiving HTTP requests from web clients and returning HTTP responses. In between, they marshall the other resources of the framework to access databases, render templates, etc. </p>
+
+<p>The example below shows a minimal view function <code>index()</code>, which could have been called by our URL mapper in the previous section.  Like all view functions it receives an <code>HttpRequest</code> object as a parameter (<code>request</code>) and returns an <code>HttpResponse</code> object. In this case we don't do anything with the request, and our response simply returns a hard-coded string. We'll show you a request that does something more interesting in a later section.</p>
+
+<pre class="brush: python"># filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: A little bit of Python:</p>
+
+<ul>
+ <li><a href="https://docs.python.org/3/tutorial/modules.html">Python modules</a> are "libraries" of functions, stored in separate files, that we might want to use in our code. Here we import just the <code>HttpResponse</code> object from the <code>django.http</code> module so that we can use it in our view: <code>from django.http import HttpResponse</code> . There are other ways of importing some or all objects from a module.</li>
+ <li>Functions are declared using the <code>def</code> keyword as shown above, with named parameters listed in brackets after the name of the function; the whole line ends in a colon. Note how the next lines are all <strong>indented</strong>. The indentation is important, as it specifies that the lines of code are inside that particular block (mandatory indentation is a key feature of Python, and is one reason that Python code is so easy to read).</li>
+</ul>
+</div>
+
+<ul>
+</ul>
+
+<p>Views are usually stored in a file called <strong>views.py</strong>.</p>
+
+<h3 id="Defining_data_models_(models.py)">Defining data models (models.py)</h3>
+
+<p>Django web applications manage and query data through Python objects referred to as models. Models define the structure of stored data, including the field <em>types</em> and possibly also their maximum size, default values, selection list options, help text for documentation, label text for forms, etc. The definition of the model is independent of the underlying database — you can choose one of several as part of your project settings. Once you've chosen what database you want to use, you don't need to talk to it directly at all — you just write your model structure and other code, and Django handles all the dirty work of communicating with the database for you.</p>
+
+<p>The code snippet below shows a very simple Django model for a <code>Team</code> object. The <code>Team</code> class is derived from the django class <code>models.Model</code>. It defines the team name and team level as character fields and specifies a maximum number of characters to be stored for each record. The <code>team_level</code> can be one of several values, so we define it as a choice field and provide a mapping between choices to be displayed and data to be stored, along with a default value. </p>
+
+<pre class="brush: python"># filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: A little bit of Python:</p>
+
+<ul>
+ <li>Python supports "object-oriented programming", a style of programming where we organise our code into objects, which include related data and functions for operating on that data. Objects can also inherit/extend/derive from other objects, allowing common behaviour between related objects to be shared. In Python we use the keyword <code>class</code> to define the "blueprint" for an object. We can create multiple specific <em>instances</em> of the type of object based on the model in the class.<br>
+  <br>
+  So for example, here we have a <code>Team</code> class, which derives from the <code>Model</code> class. This means it is a model, and will contain all the methods of a model, but we can also give it specialized features of its own too. In our model we define the fields our database will need to store our data, giving them specific names. Django uses these definitions, including the field names, to create the underlying database.</li>
+</ul>
+</div>
+
+<h3 id="Querying_data_(views.py)">Querying data (views.py)</h3>
+
+<p>The Django model provides a simple query API for searching the database. This can match against a number of fields at a time using different criteria (e.g. exact, case-insensitive, greater than, etc.), and can support complex statements (for example, you can specify a search on U11 teams that have a team name that starts with "Fr" or ends with "al"). </p>
+
+<p>The code snippet shows a view function (resource handler) for displaying all of our U09 teams. The line in bold shows how we can use the model query API to filter for all records where the <code>team_level</code> field has exactly the text 'U09' (note how this criteria is passed to the <code>filter()</code> function as an argument with the field name and match type separated by a double underscore: <strong>team_level__exact</strong>).</p>
+
+<pre class="brush: python">## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<p>This function uses the <code>render()</code> function to create the <code>HttpResponse</code> that is sent back to the browser. This function is a <em>shortcut</em>; it creates an HTML file by combining a specified HTML template and some data to insert in the template (provided in the variable named "<code>context</code>"). In the next section we show how the template has the data inserted in it to create the HTML.</p>
+
+<h3 id="Rendering_data_(HTML_templates)">Rendering data (HTML templates)</h3>
+
+<p>Template systems allow you to specify the structure of an output document, using placeholders for data that will be filled in when a page is generated. Templates are often used to create HTML, but can also create other types of document. Django supports both its native templating system and another popular Python library called Jinja2 out of the box (it can also be made to support other systems if needed). </p>
+
+<p>The code snippet shows what the HTML template called by the <code>render()</code> function in the previous section might look like. This template has been written under the assumption that it will have access to a list variable called <code>youngest_teams</code> when it is rendered (contained in the <code>context</code> variable inside the <code>render()</code> function above). Inside the HTML skeleton we have an expression that first checks if the <code>youngest_teams</code> variable exists, and then iterates it in a <code>for</code> loop. On each iteration the template displays each team's <code>team_name</code> value in an {{htmlelement("li")}} element.</p>
+
+<pre class="brush: python">## filename: best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Home page&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  {% if youngest_teams %}
+    &lt;ul&gt;
+      {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+  {% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+  {% endif %}
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="What_else_can_you_do">What else can you do?</h2>
+
+<p>The preceding sections show the main features that you'll use in almost every web application: URL mapping, views, models and templates. Just a few of the other things provided by Django include:</p>
+
+<ul>
+ <li><strong>Forms</strong>: HTML Forms are used to collect user data for processing on the server. Django simplifies form creation, validation, and processing.</li>
+ <li><strong>User authentication and permissions</strong>: Django includes a robust user authentication and permission system that has been built with security in mind. </li>
+ <li><strong>Caching</strong>: Creating content dynamically is much more computationally intensive (and slow) than serving static content. Django provides flexible caching so that you can store all or part of a rendered page so that it doesn't get re-rendered except when necessary.</li>
+ <li><strong>Administration site</strong>: The Django administration site is included by default when you create an app using the basic skeleton. It makes it trivially easy to provide an admin page for site administrators to create, edit, and view any data models in your site.</li>
+ <li><strong>Serialising data</strong>: Django makes it easy to serialise and serve your data as XML or JSON. This can be useful when creating a web service (a website that purely serves data to be consumed by other applications or sites, and doesn't display anything itself), or when creating a website in which the client-side code handles all the rendering of data.</li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've completed the first step in your Django journey! You should now understand Django's main benefits, a little about its history, and roughly what each of the main parts of a Django app might look like. You should have also learned a few things about the Python programming language, including the syntax for lists, functions, and classes.</p>
+
+<p>You've already seen some real Django code above, but unlike with client-side code, you need to set up a development environment to run it. That's our next step.</p>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<h2 id="У_цьому_модулі">У цьому модулі</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/uk/learn/server-side/express_nodejs/index.html b/files/uk/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..968f3e40e2
--- /dev/null
+++ b/files/uk/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,77 @@
+---
+title: Express web framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Express.js
+  - Intro
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Node
+  - Server-side programming
+  - TopicStub
+  - node.js
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express is a popular unopinionated web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module. A general knowledge of programming concepts and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> is highly recommended, but not essential to understanding the core concepts.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments, e.g. to create HTTP servers and access the file system, but does not support JavaScript APIs for working with the browser and DOM.</p>
+
+<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt>
+ <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt>
+ <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt>
+ <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt>
+ <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt>
+ <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type, and list and detail pages for all of our models. Along the way we'll gain practical experience in getting records from the database, and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt>
+ <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt>
+ <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd>
+</dl>
+
+<h2 id="Adding_more_tutorials">Adding more tutorials</h2>
+
+<div>
+<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p>
+
+<ul>
+ <li>Using sessions</li>
+ <li>User authentication</li>
+ <li>User authorisation and permissions</li>
+ <li>Testing an Express web application</li>
+ <li>Web security for Express web applications.</li>
+</ul>
+
+<p>And of course it would be excellent to have an assessment task!</p>
+</div>
diff --git a/files/uk/learn/server-side/express_nodejs/routes/index.html b/files/uk/learn/server-side/express_nodejs/routes/index.html
new file mode 100644
index 0000000000..9f9e704565
--- /dev/null
+++ b/files/uk/learn/server-side/express_nodejs/routes/index.html
@@ -0,0 +1,644 @@
+---
+title: 'Express Tutorial Part 4: Routes and controllers'
+slug: Learn/Server-side/Express_Nodejs/routes
+translation_of: Learn/Server-side/Express_Nodejs/routes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">У цій статті ми настроїмо (URL handling code) з "штучною" функцією обробки всіх можливих шляхів (endpoints) які потрібні у <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> сайті. У підсумку ми матимемо модульну структуру відладки для всіх шляхів, яку ми зможемо використати у наступній статті.  Ми матимемо хороше розуміння, як створювати модульну структуру для шляхів які використовує Express!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Прочитайте <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a>. Закінчіть попередні частини (включаючи <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Вміти створити простий шляхи. Настроїти обробку всі URL шляхів.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p>
+
+<p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p>
+
+<p>As we've already created the models, the main things we'll need to create are:</p>
+
+<ul>
+ <li>"Routes" to forward the supported requests (and any information encoded in request URLs) to the appropriate controller functions.</li>
+ <li>Controller functions to get the requested data from the models, create an HTML page displaying the data, and return it to the user to view in the browser.</li>
+ <li>Views (templates) used by the controllers to render the data.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p>
+
+<p>Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data.</p>
+
+<p>The first section below provides a brief "primer" on how to use the Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a> middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes.</p>
+
+<h2 id="Routes_primer">Routes primer</h2>
+
+<p>A route is a section of Express code that associates an HTTP verb (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), an URL path/pattern, and a function that is called to handle that pattern.</p>
+
+<p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction &gt; Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p>
+</div>
+
+<p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p>
+
+<h3 id="Defining_and_using_separate_route_modules">Defining and using separate route modules</h3>
+
+<p>The code below provides a concrete example of how we can create a route module and then use it in an <em>Express</em> application.</p>
+
+<p>First we create routes for a wiki in a module named <strong>wiki.js</strong>. The code first imports the Express application object, uses it to get a <code>Router</code> object and then adds a couple of routes to it using the <code>get()</code> method. Last of all the module exports the <code>Router</code> object.</p>
+
+<pre class="brush: js"><code>// wiki.js - Wiki route module.
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route.
+router.get('/', function (req, res) {
+  res.send('Wiki home page');
+})
+
+// About page route.
+router.get('/about', function (req, res) {
+  res.send('About this wiki');
+})
+
+module.exports = router;</code>
+
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.</p>
+</div>
+
+<p>To use the router module in our main app file we first <code>require()</code> the route module (<strong>wiki.js</strong>). We then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.</p>
+
+<pre class="brush: js"><code>var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);</code></pre>
+
+<p>The two routes defined in our wiki route module are then accessible from <code>/wiki/</code> and <code>/wiki/about/</code>.</p>
+
+<h3 id="Route_functions">Route functions</h3>
+
+<p>Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the <code>Router.get()</code> method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.</p>
+
+<pre class="brush: js"><code>router.get('/about', function (req, res) {
+  res.send('About this wiki');
+})</code>
+</pre>
+
+<p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p>
+
+<p>The  router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p>
+</div>
+
+<p>The callback function here calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "About this wiki" when we receive a GET request with the path ('<code>/about'</code>). There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle. For example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file. The response method that we'll be using most often as we build up the library is <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article!</p>
+
+<h3 id="HTTP_verbs">HTTP verbs</h3>
+
+<p>The example routes above use the <code>Router.get()</code> method to respond to HTTP GET requests with a certain path.</p>
+
+<p>The <code>Router</code> also provides route methods for all the other HTTP verbs, that are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, ​​​​​​ <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p>
+
+<p>For example, the code below behaves just like the previous <code>/about</code> route, but only responds to HTTP POST requests.</p>
+
+<pre class="brush: js"><code>router.post('/about', function (req, res) {
+  res.send('About this wiki');
+})</code></pre>
+
+<h3 id="Route_paths">Route paths</h3>
+
+<p>The route paths define the endpoints at which requests can be made. The examples we've seen so far have just been strings, and are used exactly as written: '/', '/about', '/book', '/any-random.path'.</p>
+
+<p>Route paths can also be string patterns. String patterns use a subset of regular expression syntax to define <em>patterns</em> of endpoints that will be matched. The subset is listed below (note that the hyphen (<code>-</code>) and the dot (<code>.</code>) are interpreted literally by string-based paths):</p>
+
+<ul>
+ <li>? : The endpoint must have 0 or 1 of the preceding character. E.g. a route path of <code>'/ab?cd'</code> will match endpoints <code>acd</code> or <code>abcd</code>.</li>
+ <li>+ : The endpoint must have 1 or more of the preceding character. E.g. a route path of <code>'/ab+cd'</code> will match endpoints <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, and so on.</li>
+ <li>* : The endpoint may have an arbitrary string where the * character is placed. E.g. a route path of <code>'ab*cd'</code> will match endpoints <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, and so on.</li>
+ <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li>
+</ul>
+
+<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p>
+
+<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) {
+  ...
+})</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Most of our routes for the LocalLibrary will simply use strings and not string patterns and regular expressions. We'll also use route parameters as discussed in the next section.</p>
+</div>
+
+<h3 id="Route_parameters">Route parameters</h3>
+
+<p>Route parameters are <em>named URL segments</em> used to capture the values specified at their position in the URL. The named segments are prefixed with a colon and then the name (e.g. <code>/<strong>:</strong>your_parameter_name/</code>. The captured values are stored in the <code>req.params</code> object using the parameter names as keys (e.g. <code>req.params.your_parameter_name</code>).</p>
+
+<p>So for example, consider a URL encoded to contain information about users and books: <code>http://localhost:3000/users/34/books/8989</code>. We can extract this information as shown below, with the <code>userId</code> and <code>bookId</code> path parameters:</p>
+
+<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) {
+  // Access userId via: req.params.userId
+  // Access bookId via: req.params.bookId
+  res.send(req.params);
+})
+</code></pre>
+
+<p>The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and _).</p>
+
+<div class="note">
+<p><strong>Note:</strong> The URL <em>/book/create</em> will be matched by a route like <code>/book/:bookId</code> (which will extract a "bookId" value of '<code>create</code>'). The first route that matches an incoming URL will be used, so if you want to process <code>/book/create</code> URLs separately, their route handler must be defined before your <code>/book/:bookId</code> route.</p>
+</div>
+
+<p>That's all you need to get started with routes - if needed you can find more information in the Express docs: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> and <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>. The following sections show how we'll set up our routes and controllers for the LocalLibrary.</p>
+
+<h2 id="Routes_needed_for_the_LocalLibrary">Routes needed for the LocalLibrary</h2>
+
+<p>The URLs that we're ultimately going to need for our pages are listed below, where <em>object</em> is replaced by the name of each of our models (book, bookinstance, genre, author), <em>objects</em> is the plural of object, and <em>id</em> is the unique instance field (<code>_id</code>) that is given to each Mongoose model instance by default.</p>
+
+<ul>
+ <li><code>catalog/</code> — The home/index page.</li>
+ <li><code>catalog/&lt;objects&gt;/</code> — The list of all books, bookinstances, genres, or authors (e.g. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, etc.)</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em></code> — The detail page for a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/create</code> — The form to create a new book, bookinstance, genre, or author (e.g. <code>/catalog/book/create)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/update</code> — The form to update a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/delete</code> — The form to delete a specific book, bookinstance, genre, author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li>
+</ul>
+
+<p>The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar).</p>
+
+<p>By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as <code><em>&lt;id&gt;</em></code> above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL <code>GET</code> parameters (e.g. <code>/book/?id=6</code>). Whichever approach you use, the URLs should be kept clean, logical and readable (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).</p>
+</div>
+
+<p>Next we create our route handler callback functions and route code for all the above URLs.</p>
+
+<h2 id="Create_the_route-handler_callback_functions">Create the route-handler callback functions</h2>
+
+<p>Before we define our routes, we'll first create all the dummy/skeleton callback functions that they will invoke. The callbacks will be stored in separate "controller" modules for Books, BookInstances, Genres, and Authors (you can use any file/module structure, but this seems an appropriate granularity for this project).</p>
+
+<p>Start by creating a folder for our controllers in the project root (<strong>/controllers</strong>) and then create separate controller files/modules for handling each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/controllers</strong>
+    <strong>authorController.js</strong>
+    <strong>bookController.js</strong>
+    <strong>bookinstanceController.js</strong>
+    <strong>genreController.js</strong></pre>
+
+<h3 id="Author_controller">Author controller</h3>
+
+<p>Open the <strong>/controllers/authorController.js</strong> file and copy in the following code:</p>
+
+<pre class="brush: js">var Author = require('../models/author');
+
+// Display list of all Authors.
+exports.author_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author list');
+};
+
+// Display detail page for a specific Author.
+exports.author_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id);
+};
+
+// Display Author create form on GET.
+exports.author_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create GET');
+};
+
+// Handle Author create on POST.
+exports.author_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create POST');
+};
+
+// Display Author delete form on GET.
+exports.author_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete GET');
+};
+
+// Handle Author delete on POST.
+exports.author_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete POST');
+};
+
+// Display Author update form on GET.
+exports.author_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update GET');
+};
+
+// Handle Author update on POST.
+exports.author_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update POST');
+};
+</pre>
+
+<p>The module first requires the model that we'll later be using to access and update our data. It then exports functions for each of the URLs we wish to handle (the create, update and delete operations use forms, and hence also have additional methods for handling form post requests — we'll discuss those methods in the "forms article" later on).</p>
+
+<p>All the functions have the standard form of an <em>Express middleware function</em>, with arguments for the request, response, and the <code>next</code> function to be called if the method does not complete the request cycle (in all these cases it does!). The methods simply return a string indicating that the associated page has not yet been created. If a controller function is expected to receive path parameters, these are output in the message string (see <code>req.params.id</code> above).</p>
+
+<h4 id="BookInstance_controller">BookInstance controller</h4>
+
+<p>Open the <strong>/controllers/bookinstanceController.js</strong> file and copy in the following code (this follows an identical pattern to the <code>Author</code> controller module):</p>
+
+<pre class="brush: js">var BookInstance = require('../models/bookinstance');
+
+// Display list of all BookInstances.
+exports.bookinstance_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance list');
+};
+
+// Display detail page for a specific BookInstance.
+exports.bookinstance_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id);
+};
+
+// Display BookInstance create form on GET.
+exports.bookinstance_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create GET');
+};
+
+// Handle BookInstance create on POST.
+exports.bookinstance_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create POST');
+};
+
+// Display BookInstance delete form on GET.
+exports.bookinstance_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete GET');
+};
+
+// Handle BookInstance delete on POST.
+exports.bookinstance_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete POST');
+};
+
+// Display BookInstance update form on GET.
+exports.bookinstance_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update GET');
+};
+
+// Handle bookinstance update on POST.
+exports.bookinstance_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update POST');
+};
+</pre>
+
+<h4 id="Genre_controller">Genre controller</h4>
+
+<p>Open the <strong>/controllers/genreController.js</strong> file and copy in the following text (this follows an identical pattern to the <code>Author</code> and <code>BookInstance</code> files):</p>
+
+<pre class="brush: js">var Genre = require('../models/genre');
+
+// Display list of all Genre.
+exports.genre_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre list');
+};
+
+// Display detail page for a specific Genre.
+exports.genre_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id);
+};
+
+// Display Genre create form on GET.
+exports.genre_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create GET');
+};
+
+// Handle Genre create on POST.
+exports.genre_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create POST');
+};
+
+// Display Genre delete form on GET.
+exports.genre_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete GET');
+};
+
+// Handle Genre delete on POST.
+exports.genre_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete POST');
+};
+
+// Display Genre update form on GET.
+exports.genre_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update GET');
+};
+
+// Handle Genre update on POST.
+exports.genre_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update POST');
+};
+</pre>
+
+<h4 id="Book_controller">Book controller</h4>
+
+<p>Open the <strong>/controllers/bookController.js</strong> file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an <code>index()</code> function for displaying the site welcome page:</p>
+
+<pre class="brush: js">var Book = require('../models/book');
+
+<strong>exports.index = function(req, res) {
+    res.send('NOT IMPLEMENTED: Site Home Page');
+};</strong>
+
+// Display list of all books.
+exports.book_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book list');
+};
+
+// Display detail page for a specific book.
+exports.book_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id);
+};
+
+// Display book create form on GET.
+exports.book_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create GET');
+};
+
+// Handle book create on POST.
+exports.book_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create POST');
+};
+
+// Display book delete form on GET.
+exports.book_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete GET');
+};
+
+// Handle book delete on POST.
+exports.book_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete POST');
+};
+
+// Display book update form on GET.
+exports.book_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update GET');
+};
+
+// Handle book update on POST.
+exports.book_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update POST');
+};
+</pre>
+
+<h2 id="Create_the_catalog_route_module">Create the catalog route module</h2>
+
+<p>Next we create <em>routes</em> for all the URLs <a href="#local_libary_routes">needed by the LocalLibrary website</a>, which will call the controller functions we defined in the previous section.</p>
+
+<p>The skeleton already has a <strong>./routes</strong> folder containing routes for the <em>index</em> and <em>users</em>. Create another route file — <strong>catalog.js</strong> — inside this folder, as shown.</p>
+
+<pre>/express-locallibrary-tutorial //the project root
+  /routes
+    index.js
+    users.js
+    <strong>catalog.js</strong></pre>
+
+<p>Open <strong>/routes/</strong><strong>catalog.js</strong> and copy in the code below:</p>
+
+<pre class="brush: js"><strong>var express = require('express');
+var router = express.Router();
+</strong>
+// Require controller modules.
+var book_controller = require('../controllers/bookController');
+var author_controller = require('../controllers/authorController');
+var genre_controller = require('../controllers/genreController');
+var book_instance_controller = require('../controllers/bookinstanceController');
+
+/// BOOK ROUTES ///
+
+// GET catalog home page.
+router.get('/', book_controller.index);
+
+// GET request for creating a Book. NOTE This must come before routes that display Book (uses id).
+router.get('/book/create', book_controller.book_create_get);
+
+// POST request for creating Book.
+router.post('/book/create', book_controller.book_create_post);
+
+// GET request to delete Book.
+router.get('/book/:id/delete', book_controller.book_delete_get);
+
+// POST request to delete Book.
+router.post('/book/:id/delete', book_controller.book_delete_post);
+
+// GET request to update Book.
+router.get('/book/:id/update', book_controller.book_update_get);
+
+// POST request to update Book.
+router.post('/book/:id/update', book_controller.book_update_post);
+
+// GET request for one Book.
+router.get('/book/:id', book_controller.book_detail);
+
+// GET request for list of all Book items.
+router.get('/books', book_controller.book_list);
+
+/// AUTHOR ROUTES ///
+
+// GET request for creating Author. NOTE This must come before route for id (i.e. display author).
+router.get('/author/create', author_controller.author_create_get);
+
+// POST request for creating Author.
+router.post('/author/create', author_controller.author_create_post);
+
+// GET request to delete Author.
+router.get('/author/:id/delete', author_controller.author_delete_get);
+
+// POST request to delete Author.
+router.post('/author/:id/delete', author_controller.author_delete_post);
+
+// GET request to update Author.
+router.get('/author/:id/update', author_controller.author_update_get);
+
+// POST request to update Author.
+router.post('/author/:id/update', author_controller.author_update_post);
+
+// GET request for one Author.
+router.get('/author/:id', author_controller.author_detail);
+
+// GET request for list of all Authors.
+router.get('/authors', author_controller.author_list);
+
+/// GENRE ROUTES ///
+
+// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
+router.get('/genre/create', genre_controller.genre_create_get);
+
+//POST request for creating Genre.
+router.post('/genre/create', genre_controller.genre_create_post);
+
+// GET request to delete Genre.
+router.get('/genre/:id/delete', genre_controller.genre_delete_get);
+
+// POST request to delete Genre.
+router.post('/genre/:id/delete', genre_controller.genre_delete_post);
+
+// GET request to update Genre.
+router.get('/genre/:id/update', genre_controller.genre_update_get);
+
+// POST request to update Genre.
+router.post('/genre/:id/update', genre_controller.genre_update_post);
+
+// GET request for one Genre.
+router.get('/genre/:id', genre_controller.genre_detail);
+
+// GET request for list of all Genre.
+router.get('/genres', genre_controller.genre_list);
+
+/// BOOKINSTANCE ROUTES ///
+
+// GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id).
+router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get);
+
+// POST request for creating BookInstance.
+router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post);
+
+// GET request to delete BookInstance.
+router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get);
+
+// POST request to delete BookInstance.
+router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post);
+
+// GET request to update BookInstance.
+router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get);
+
+// POST request to update BookInstance.
+router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post);
+
+// GET request for one BookInstance.
+router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
+
+// GET request for list of all BookInstance.
+router.get('/bookinstances', book_instance_controller.bookinstance_list);
+
+<strong>module.exports = router;</strong>
+</pre>
+
+<p>The module requires Express and then uses it to create a <code>Router</code> object. The routes are all set up on the router, which is then exported.</p>
+
+<p>The routes are defined either using <code>.get()</code> or <code>.post()</code> methods on the router object. All the paths are defined using strings (we don't use string patterns or regular expressions). Routes that act on some specific resource (e.g. book) use path parameters to get the object id from the URL.</p>
+
+<p>The handler functions are all imported from the controller modules we created in the previous section.</p>
+
+<h3 id="Update_the_index_route_module">Update the index route module</h3>
+
+<p>We've set up all our new routes, but we still have a route to the original page. Let's instead redirect this to the new index page that we've created at the path '/catalog'.</p>
+
+<p>Open <strong>/routes/index.js</strong> and replace the existing route with the function below.</p>
+
+<pre class="brush: js">// GET home page.
+router.get('/', function(req, res) {
+  res.redirect('/catalog');
+});</pre>
+
+<div class="note">
+<p><strong>Note:</strong> This is our first use of the <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths.</p>
+</div>
+
+<h3 id="Update_app.js">Update app.js</h3>
+
+<p>The last step is to add the routes to the middleware chain. We do this in <code>app.js</code>.</p>
+
+<p>Open <strong>app.js</strong> and require the catalog route below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">var index = require('./routes/index');
+var users = require('./routes/users');
+<strong>var catalog = require('./routes/catalog');  //Import routes for "catalog" area of site</strong></pre>
+
+<p>Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">app.use('/', index);
+app.use('/users', users);
+<strong>app.use('/catalog', catalog);  // Add catalog routes to middleware chain.</strong></pre>
+
+<div class="note">
+<p><strong>Note:</strong> We have added our catalog module at a path <code>'/catalog'</code>. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: <code>/catalog/books/</code>.</p>
+</div>
+
+<p>That's it. We should now have routes and skeleton functions enabled for all the URLs that we will eventually support on the LocalLibrary website.</p>
+
+<h3 id="Testing_the_routes">Testing the routes</h3>
+
+<p>To test the routes, first start the website using your usual approach</p>
+
+<ul>
+ <li>The default method
+  <pre class="brush: bash"><code>// Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+// macOS or Linux
+DEBUG=express-locallibrary-tutorial:* npm start</code>
+</pre>
+ </li>
+ <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use:
+  <pre><code>// Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong>
+
+// macOS or Linux
+</code>DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<p>Then navigate to a number of LocalLibrary URLs, and verify that you don't get an error page (HTTP 404). A small set of URLs are listed below for your convenience:</p>
+
+<ul>
+ <li><a href="http://localhost:3000/">http://localhost:3000/</a></li>
+ <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li>
+ <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li>
+ <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li>
+ <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li>
+ <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li>
+ <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li>
+ <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, and some approaches for structuring our routes and controllers.</p>
+
+<p>In our next article we'll create a proper welcome page for the site, using views (templates) and information stored in our models.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/learn/server-side/index.html b/files/uk/learn/server-side/index.html
new file mode 100644
index 0000000000..c79d8ea81e
--- /dev/null
+++ b/files/uk/learn/server-side/index.html
@@ -0,0 +1,52 @@
+---
+title: Server-side website programming
+slug: Learn/Server-side
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Server
+  - Server-side programming
+  - Topic
+  - TopicStub
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p>
+
+<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p>
+
+<p>In the modern world of web development, learning about server-side development is highly recommended.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p>
+
+<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Simlarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p>
+
+<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
+</ul>
+
+<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express is a popular web framwork, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
+</dl>
diff --git a/files/uk/learn/tools_and_testing/git_та_github/index.html b/files/uk/learn/tools_and_testing/git_та_github/index.html
new file mode 100644
index 0000000000..6797857c6e
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/git_та_github/index.html
@@ -0,0 +1,86 @@
+---
+title: Git та GitHub
+slug: Learn/Tools_and_testing/Git_та_GitHub
+translation_of: Learn/Tools_and_testing/GitHub
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</p>
+
+<h2 id="Overview">Overview</h2>
+
+<p>VCSes are essential for software development:</p>
+
+<ul>
+ <li>It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurences, and help avoid loss of work as a result.</li>
+ <li>When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks.</li>
+ <li>You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, etc., but this is really error-prone and unreliable.</li>
+ <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li>
+</ul>
+
+<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p>
+</div>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To use Git and GitHub, you need:</p>
+
+<ul>
+ <li>A desktop computer with Git installed on it (see the <a href="https://git-scm.com/downloads">Git downloads page</a>).</li>
+ <li>A tool to use Git. Depending on how you like to work, you could use a <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI.</li>
+ <li>A <a href="https://github.com/join">GitHub account</a>. If you haven't already got one, sign up now using the provided link.</li>
+</ul>
+
+<p>In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!</p>
+
+<p>It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system <code>PATH</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.</p>
+
+<dl>
+ <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (from GitHub)</a></dt>
+ <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd>
+ <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt>
+ <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd>
+ <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt>
+ <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd>
+ <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt>
+ <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd>
+ <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt>
+ <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li>
+ <li><a href="https://git-scm.com/docs">Git command list</a></li>
+ <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li>
+ <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li>
+ <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li>
+ <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li>
+ <li>
+  <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p>
+ </li>
+</ul>
diff --git a/files/uk/learn/tools_and_testing/index.html b/files/uk/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..721a0ef87f
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/index.html
@@ -0,0 +1,61 @@
+---
+title: Tools and testing
+slug: Learn/Tools_and_testing
+tags:
+  - Accessibility
+  - Automation
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Testing
+  - Tools
+  - Topic
+  - TopicStub
+  - cross browser
+  - user testing
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.</p>
+
+<p>On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p>
+
+<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.</p>
+</div>
+
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use many the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.</p>
+
+<p>In addition, you should start with the first module in this topic, which gives a useful overview of the general area.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a></dt>
+ <dd>Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a></dt>
+ <dd>JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. This module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a></dt>
+ <dd>All developers will use some kind of <strong>version control system</strong> (<strong>VCS</strong>), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is <strong>Git</strong>, along with <strong>GitHub</strong>, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt>
+ <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
+</dl>
diff --git a/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/index.html b/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/index.html
new file mode 100644
index 0000000000..4380250538
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/index.html
@@ -0,0 +1,138 @@
+---
+title: Розуміння JavaScript-фреймворків на стороні клієнта
+slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p>
+
+<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p>
+
+<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p>
+
+<ul>
+ <li class="summary">Why should I use a framework? What problems do they solve for me?</li>
+ <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li>
+ <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li>
+ <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li>
+</ul>
+
+<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
+
+<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Introductory_guides">Introductory guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt>
+ <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt>
+ <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd>
+</dl>
+
+<h2 id="React_tutorials">React tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt>
+ <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt>
+ <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt>
+ <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt>
+ <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt>
+ <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt>
+ <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt>
+ <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
+ <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
+ <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
+ <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
+ <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
+ <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
+ <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
+ <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
+ <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
+ <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
+ <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
+ <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
+ <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
+
+<ul>
+ <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li>
+ <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
+ <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
+ <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
+</ul>
+
+<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
+
+<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
diff --git a/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte/index.html b/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte/index.html
new file mode 100644
index 0000000000..ba73b81f2b
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/розуміння_javascript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte/index.html
@@ -0,0 +1,536 @@
+---
+title: Знайомимось зі Свелт
+slug: >-
+  Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">У цій статті ми коротко ознайомимося з <a href="https://svelte.dev/">фреймворком Свелт</a>. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td><span class="tlid-translation translation" lang="uk"><span title="">Для початку, рекомендуємо ознайомитись з основними мовами – <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> та <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, та володіти <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терміналом/командним рядком</a>.</span></span>
+    <p><br>
+     <span class="tlid-translation translation" lang="uk"><span title="">Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого;</span> <span title="">вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>
+    <p><span class="tlid-translation translation" lang="uk"><span title="">Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свелт_новий_підхід_до_створення_складних_інтерфейсів">Свелт: новий підхід до створення складних інтерфейсів</h2>
+
+<p><span class="tlid-translation translation" lang="uk">Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.</span><br>
+ <br>
+ <span class="tlid-translation translation" lang="uk">Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.<br>
+ <br>
+ Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.<br>
+ <br>
+ Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.</span></p>
+
+<div class="blockIndicator note">
+<p><span class="tlid-translation translation" lang="uk"><span title=""><strong>Примітка</strong>: нещодавно Свелт додав <a href="https://svelte.dev/blog/svelte-and-typescript">офіційну підтримку TypeScript</a>, одну з найочікуваніших можливостей.</span> <span title="">Ми розглянемо її згодом у цій серії уроків.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Перед</span> <span title="">тим</span><span title="">,</span> <span title="">як</span> <span title="">повернутися</span> <span title="">до</span> <span title="">цієї</span> <span title="">серії</span> <span title="">уроків</span><span title="">,</span> <span title="">ми</span> <span title="">рекомендуємо</span> <span title="">вам</span> <span title="">прочитати</span> <a href="https://svelte.dev/tutorial/basics">навчальний посібник Свелт</a><span title="">,</span> <span title="">щоб</span> <span title="">по</span><span title="">-</span><span title="">справжньому</span> <span title="">швидко</span> <span title="">познайомитися</span> <span title="">з</span> <span title="">основними</span> <span title="">поняттями</span><span title="">,</span> <span title="">а</span> <span title="">потім</span> <span title="">навчитися</span> <span title="">будувати</span> <span title="">щось</span> <span title="">більш</span> <span title="">глибоке</span><span title="">.</span> <span title="">Це</span> займе<span title=""> </span> <span title="">близько</span> <span title="">30</span> <span title="">хвилин</span><span title="">.</span></span></p>
+
+<h2 id="Use_cases">Use cases</h2>
+
+<p>Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.</p>
+
+<p>Nevertheless, Svelte is particularly appropriate to tackle the following situations:</p>
+
+<ul>
+ <li>Web applications intended for low power devices: Applications built with Svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. Less code means less KB to download, parse, execute, and keep hanging around in memory.</li>
+ <li>Highly interactive pages or complex visualizations: If you are building data-visualizations that need to display a large number of DOM elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive.</li>
+ <li>Onboarding people with basic web development knowledge: Svelte has a shallow learning curve. Web developers with basic HTML, CSS, and JavaScript knowledge can easily grasp Svelte specifics in a short time and start building web applications.</li>
+</ul>
+
+<p>Moreover, with the help of <a href="https://sapper.svelte.dev/">Sapper</a> (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also <a href="https://svelte-native.technology/">Svelte Native</a>, which lets you build native mobile applications.</p>
+
+<h2 id="How_does_Svelte_work">How does Svelte work?</h2>
+
+<p>Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:</p>
+
+<ul>
+ <li>It extends HTML by allowing JavaScript expressions in markup and providing directives to use conditions and loops, in a fashion similar to handlebars.</li>
+ <li>It extends CSS by adding a scoping mechanism, allowing each component to define their own styles without the risk of clashing with other component's styles.</li>
+ <li>It extends JavaScript by reinterpreting specific directives of the language to achieve true reactivity and ease component state management.</li>
+</ul>
+
+<p>The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.</p>
+
+<h2 id="First_steps_with_Svelte">First steps with Svelte</h2>
+
+<p>Being a compiler, you can't just add a <code>&lt;script src="svelte.js"&gt;</code> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.</p>
+
+<h3 id="Requirements">Requirements</h3>
+
+<p>In order to work with Svelte you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p>
+
+<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux (WSL)</a> are both suitable. <a href="https://cmder.net/">Cmder</a> is another very good and complete alternative. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p>
+
+<p>Also see the following for more information:</p>
+
+<ul>
+ <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm"</a> on nodejs.org</li>
+ <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx"</a> on the npm blog</li>
+ <li><a href="https://svelte.dev/blog/the-easiest-way-to-get-started">"The easiest way to get started with Svelte"</a> on the svelte blog</li>
+</ul>
+
+<h3 id="Creating_your_first_Svelte_app">Creating your first Svelte app</h3>
+
+<p>The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting <a href="https://github.com/sveltejs/template">sveltejs/template</a> on GitHub or you can avoid having to download and unzip it and just use <a href="https://github.com/Rich-Harris/degit">degit</a>.</p>
+
+<p>To create your starter app template, run the following terminal commands:</p>
+
+<pre class="brush: bash notranslate">npx degit sveltejs/template moz-todo-svelte
+cd moz-todo-svelte
+npm install
+npm run dev</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using <code>git clone</code> because it will not download all the history of the repo, or create a complete local clone.</p>
+</div>
+
+<p>After running <code>npm run dev</code>, Svelte will compile and build your application. It will start a local server at <code>localhost:5000</code>. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:</p>
+
+<p><img alt="A simple start page that says hello world, and gives a link to the official svelte tutorials" src="https://mdn.mozillademos.org/files/17338/01-svelte-starter-app.png" style="border-style: solid; border-width: 1px; height: 529px; width: 1166px;"></p>
+
+<h3 id="Application_structure">Application structure</h3>
+
+<p>The starter template comes with the following structure:</p>
+
+<pre class="notranslate">moz-todo-svelte
+├── readme.md
+├── package.json
+├── package-lock.json
+├── rollup.config.js
+├── .gitignore
+├── node_modules
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   ├── global.css
+│   └── build
+│       ├── bundle.css
+│       ├── bundle.css.map
+│       ├── bundle.js
+│       └── bundle.js.map
+└── src
+    ├── App.svelte
+    └── main.js</pre>
+
+<p>The contents are as follows:</p>
+
+<ul>
+ <li><code>package.json</code> and <code>package-lock.json</code>: Contains information about the project that Node.js/npm uses to keep it organized. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file <code>package.json</code></a>? on NodeJS.org; we also talk about it in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics tutorial</a>.</li>
+ <li><code>node_modules</code>: This is where node saves the project dependencies. These dependencies won't be sent to production, they are just used for development purposes.</li>
+ <li><code>.gitignore</code>: Tells git which files or folder to ignore from the project — useful if you decide to include your app in a git repo.</li>
+ <li><code>rollup.config.js</code>: Svelte uses <a href="https://rollupjs.org/">rollup.js</a> as a module bundler. This configuration file tells rollup how to compile and build your app. If you prefer <a href="https://webpack.js.org/">webpack</a> you can create your starter project with <code>npx degit sveltejs/template-webpack svelte-app</code> instead.</li>
+ <li>scripts: Contains setup scripts as required. Currently should only contain <code>setupTypeScript.js</code>, a script that sets up TypeScript support in Svelte. We'll talk about this more in the last article.</li>
+ <li><code>src</code>: This directory is where the source code for your application lives — where you'll be creating the code for your app.
+  <ul>
+   <li><code>App.svelte</code>: This is the top-level component of your app. So far it just renders the 'Hello World!' message.</li>
+   <li><code>main.js</code>: The entry point to our application. It just instantiates the <code>App</code> component and binds it to the body of our html page.</li>
+  </ul>
+ </li>
+ <li><code>public</code>: This directory contains all the files that will be published in production.
+  <ul>
+   <li><code>favicon.png</code>: This is the favicon for your app. Currently, it's the Svelte logo.</li>
+   <li><code>index.html</code>: This is the main page of your app. Initially it's just an empty HTML5 page that loads the css files and js bundles generated by Svelte.</li>
+   <li><code>global.css</code>: This file contains unscoped styles. It's a regular css file that will be applied to the whole application.</li>
+   <li><code>build</code>: This folder contains the generated CSS and JavaScript source code.
+    <ul>
+     <li><code>bundle.css</code>: The CSS file that Svelte generated from the styles defined for each component.</li>
+     <li><code>bundle.js</code>: The JavaScript file compiled from all your JavaScript source code.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Having_a_look_at_our_first_Svelte_component">Having a look at our first Svelte component</h2>
+
+<p>Components are the building blocks of Svelte applications. They are written into <code>.svelte</code> files using a superset of HTML.</p>
+
+<p>All three sections — <code>&lt;script&gt;</code>, <code>&lt;styles&gt;</code>, and markup — are optional, and can appear in any order you like.</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  // logic goes here
+&lt;/script&gt;
+
+&lt;style&gt;
+  /* styles go here */
+&lt;/style&gt;
+
+&lt;!-- markup (zero or more HTML elements) goes here --&gt;</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: For more information on the component format, have a look at the <a href="https://svelte.dev/docs#Component_format">svelte documentation</a>.</p>
+</div>
+
+<p>With this in mind, let's have a look at the <code>src/App.svelte</code> file that came with the starter template. You should see something like the following:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  export let name;
+&lt;/script&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Hello {name}!&lt;/h1&gt;
+  &lt;p&gt;Visit the &lt;a href="https://svelte.dev/tutorial"&gt;Svelte tutorial&lt;/a&gt; to learn how to build Svelte apps.&lt;/p&gt;
+&lt;/main&gt;
+
+&lt;style&gt;
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+&lt;/style&gt;</pre>
+
+<h3 id="The_&lt;script>_section">The <code>&lt;script&gt;</code> section</h3>
+
+<p>The <code>&lt;script&gt;</code> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  export let name;
+&lt;/script&gt;</pre>
+
+<p>Svelte uses the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.</p>
+
+<h3 id="The_markup_section">The markup section</h3>
+
+<p>In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets (<code>{}</code>). In this case we are embedding the value of the <code>name</code> prop right after the <code>Hello</code> text.</p>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;h1&gt;Hello {name}!&lt;/h1&gt;
+  &lt;p&gt;Visit the &lt;a href="https://svelte.dev/tutorial"&gt;Svelte tutorial&lt;/a&gt; to learn how to build Svelte apps.&lt;/p&gt;
+&lt;/main&gt;</pre>
+
+<p>Svelte also supports tags like <code>{#if...}</code>, <code>{#each...}</code>, and <code>{#await...}</code> — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.</p>
+
+<h3 id="The_&lt;style>_section">The <code>&lt;style&gt;</code> section</h3>
+
+<p>If you have experience working with CSS, the following snippet should make sense:</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+&lt;/style&gt;</pre>
+
+<p>We are applying a style to our <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> element. What will happen other components with <code>&lt;h1&gt;</code> elements in them?</p>
+
+<p>In Svelte, CSS inside a component's <code>&lt;style&gt;</code> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.</p>
+
+<p>You can see this in action by opening <code>localhost:5000</code> in a new browser tab, right/<kbd>Ctrl</kbd>-clicking on the <em>HELLO WORLD!</em> label, and choosing <em>Inspect</em>:</p>
+
+<p><img alt="Svelte starter app with devtools open, showing classes for scoped styles" src="https://mdn.mozillademos.org/files/17339/02-svelte-component-scoped-styles.png" style="height: 878px; width: 1117px;"></p>
+
+<p>When compiling the app, Svelte changes our <code>h1</code> styles definition to <code>h1.svelte-1tky8bj</code>, and then modifies every <code>&lt;h1&gt;</code> element in our component to <code>&lt;h1 class="svelte-1tky8bj"&gt;</code>, so that it picks up the styles as required.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can override this behavior and apply styles to a selector globally using the <code>:global(...)</code> modifier (see the <a href="https://svelte.dev/docs#style">Svelte <code>&lt;style&gt;</code> docs</a> for more information).</p>
+</div>
+
+<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2>
+
+<p>Now that we have a general idea of how it all fits together, we can start making a few changes.<br>
+ At this point you can try updating your <code>App.svelte</code> component — for example change the <code>&lt;h1&gt;</code> element on line 6 of <code>App.svelte</code> so that it reads like this:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Hello {name} from MDN!&lt;/h1&gt;</pre>
+
+<p>Just save your changes and the app running at <code>localhost:5000</code> will be automatically updated.</p>
+
+<h3 id="A_first_look_at_Svelte_reactivity">A first look at Svelte reactivity</h3>
+
+<p>In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.</p>
+
+<p>In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a <code>toggleName()</code> function in our <code>App</code> component, and a button to run it.</p>
+
+<p>Try updating your <code>&lt;script&gt;</code> and markup sections like so:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  export let name;
+
+  function toggleName() {
+    if (name === 'world') {
+      name = 'svelte'
+    } else {
+      name = 'world'
+    }
+  }
+&lt;/script&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Hello {name}!&lt;/h1&gt;
+  &lt;button on:click={toggleName}&gt;Toggle name&lt;/button&gt;
+  &lt;p&gt;Visit the &lt;a href="https://svelte.dev/tutorial"&gt;Svelte tutorial&lt;/a&gt; to learn how to build Svelte apps.&lt;/p&gt;
+&lt;/main&gt;</pre>
+
+<p>Whenever the button is clicked, Svelte executes the <code>toggleName()</code> function, which in turn updates the value of the <code>name</code> variable.</p>
+
+<p>As you can see, the <code>&lt;h1&gt;</code> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.</p>
+
+<p>Note the use of <code>:</code> in <code>on:click</code>. That's Svelte's syntax for listening to DOM events.</p>
+
+<h2 id="Inspecting_main.js_the_entry_point_of_our_app">Inspecting main.js: the entry point of our app</h2>
+
+<p>Let’s open <code>src/main.js</code>, which is where the <code>App</code> component is being imported and used. This file is the entry point for our app, and it initially looks like this:</p>
+
+<pre class="brush: js notranslate">import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world'
+  }
+});
+
+export default app;</pre>
+
+<p><code>main.js</code> starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:</p>
+
+<ul>
+ <li><code>target</code>: The DOM element inside which we want the component to be rendered, in this case the <code>&lt;body&gt;</code> element.</li>
+ <li><code>props</code>: the values to assign to each prop of the <code>App</code> component.</li>
+</ul>
+
+<h2 id="A_look_under_the_hood">A look under the hood</h2>
+
+<p>How does Svelte manage to make all these files work together nicely?</p>
+
+<p>The Svelte compiler processes the <code>&lt;style&gt;</code> section of every component and compiles them into the <code>public/build/bundle.css</code> file.</p>
+
+<p>It also compiles the markup and <code>&lt;script&gt;</code> section of every component and stores the result in <code>public/build/bundle.js</code>. It also adds the code in <code>src/main.js</code> to reference the features of each component.</p>
+
+<p>Finally the file <code>public/index.html</code> includes the generated <code>bundle.css</code> and <code>bundle.js</code> files:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset='utf-8'&gt;
+  &lt;meta name='viewport' content='width=device-width,initial-scale=1'&gt;
+
+  &lt;title&gt;Svelte app&lt;/title&gt;
+
+  &lt;link rel='icon' type='image/png' href='/favicon.png'&gt;
+  &lt;link rel='stylesheet' href='/global.css'&gt;
+  &lt;link rel='stylesheet' href='/build/bundle.css'&gt;
+
+  &lt;script defer src='/build/bundle.js'&gt;&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The minified version of <code>bundle.js</code> weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the <code>App.svelte</code> compiled component. As you can see, <code>bundle.js</code> is the only JavaScript file referenced by <code>index.html</code>. There are no other libraries loaded into the web page.</p>
+
+<p>This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.</p>
+
+<h2 id="Following_this_tutorial">Following this tutorial</h2>
+
+<p>In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.</p>
+
+<p>You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.</p>
+
+<p>Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.</p>
+
+<h3 id="Using_Git">Using Git</h3>
+
+<p>The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.</p>
+
+<p>We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.</p>
+
+<p>After <a href="https://git-scm.com/downloads">installing git</a>, to clone the repository you should execute:</p>
+
+<pre class="brush: bash notranslate">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre>
+
+<p>Then at the beginning of each article, you can just <code>cd</code> into the corresponding folder and start the app in dev mode to see what its current state should be, like this:</p>
+
+<pre class="brush: bash notranslate">cd 02-starting-our-todo-app
+npm install
+npm run dev</pre>
+
+<p>If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see <a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you just want to download the files without cloning the git repo, you can use the degit tool like this — <code>npx degit opensas/mdn-svelte-tutorial</code>. You can also download a specific folder with <code>npx degit opensas/mdn-svelte-tutorial/01-getting-started</code>. Degit won't create a local git repo, it will just download the files of the specified folder.</p>
+</div>
+
+<h3 id="Using_the_Svelte_REPL">Using the Svelte REPL</h3>
+
+<p>A REPL (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">read–eval–print loop</a>) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.</p>
+
+<p>Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.</p>
+
+<p>It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.</p>
+
+<p>Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:</p>
+
+<p><img alt="the svelte repl in action, showing component code on the left, and output on the right" src="https://mdn.mozillademos.org/files/17340/03-svelte-repl-in-action.png" style="height: 946px; width: 1284px;"></p>
+
+<p>To start a REPL, open your browser and navigate to <a href="https://svelte.dev/repl">https://svelte.dev/repl</a>.</p>
+
+<ul>
+ <li>On the left side of the screen you'll see the code of your components, and on the right you'll see the running output of your app.</li>
+ <li>The bar above the code lets you create <code>.svelte</code> and <code>.js</code> files and rearrange them. To create a file inside a folder just specify the complete pathname, like this — <code>components/MyComponent.svelte</code>. The folder will be automatically created.</li>
+ <li>Above that bar you have the title of the REPL. Click on it to edit it.</li>
+ <li>On the right side you have three tabs:
+  <ul>
+   <li>The <em>Result</em> tab shows your app output, and provides a console at the bottom.</li>
+   <li>The <em>JS output</em> tab lets you inspect the JavaScript code generated by Svelte, and set compiler options.</li>
+   <li>The <em>CSS output</em> tab shows the CSS generated by Svelte.</li>
+  </ul>
+ </li>
+ <li>Above the tabs, you'll find a toolbar that lets you enter full-screen mode, and download your app. If you login with a GitHub account, you'll also be able to fork and save the app. You'll also be able to see all your saved REPLs by clicking on your GitHub username profile and selecting Your saved apps.</li>
+</ul>
+
+<p>Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.</p>
+</div>
+
+<p>We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example <code>import Todos from './components/Todos.svelte'</code>, just replace it with a flat URL, e.g. <code>import Todos from './Todos.svelte'</code>.</p>
+</div>
+
+<h2 id="The_code_so_far">The code so far</h2>
+
+<h3 id="Git">Git</h3>
+
+<p>Clone the github repo (if you haven't already done it) with:</p>
+
+<pre class="brush: bash notranslate">git clone https://github.com/opensas/mdn-svelte-tutorial.git</pre>
+
+<p>Then to get to the current app state, run</p>
+
+<pre class="brush: bash notranslate">cd mdn-svelte-tutorial/01-getting-started</pre>
+
+<p>Or directly download the folder's content:</p>
+
+<pre class="brush: bash notranslate">npx degit opensas/mdn-svelte-tutorial/01-getting-started</pre>
+
+<p>Remember to run <code>npm install &amp;&amp; npm run dev</code> to start your app in development mode.</p>
+
+<h3 id="REPL">REPL</h3>
+
+<p>To code along with us using the REPL, start at</p>
+
+<p><a href="https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2">https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2</a></p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p>
+
+<p>In Svelte:</p>
+
+<ul>
+ <li>We define the script, style and markup of each component in a single <code>.svelte</code> file.</li>
+ <li>Component props are declared with the <code>export</code> keyword.</li>
+ <li>Svelte components can be used just by importing the corresponding <code>.svelte</code> file.</li>
+ <li>Components styles are scoped, keeping them from clashing with each other.</li>
+ <li>In the markup section you can include any JavaScript expression by putting it between curly braces.</li>
+ <li>The top-level variables of a component constitute its state.</li>
+ <li>Reactivity is fired just by assigning a new value to a top level variable.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/learn/tools_and_testing/розуміння_інструментів_веб-розробки_на_стороні_клієнта/index.html b/files/uk/learn/tools_and_testing/розуміння_інструментів_веб-розробки_на_стороні_клієнта/index.html
new file mode 100644
index 0000000000..faa5717122
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/розуміння_інструментів_веб-розробки_на_стороні_клієнта/index.html
@@ -0,0 +1,37 @@
+---
+title: Розуміння інструментів веб-розробки на стороні клієнта
+slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта
+translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Get started now, with our "Client-side tooling overview"</a></strong></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Client-side tooling overview</a></dt>
+ <dd>In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Command line crash course</a></dt>
+ <dd>In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Package management basics</a></dt>
+ <dd>In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introducing a complete toolchain</a></dt>
+ <dd>In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Deploying our app</a></dt>
+ <dd>In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.</dd>
+</dl>
diff --git a/files/uk/learn/tools_and_testing/тестування_кросбраузерності/index.html b/files/uk/learn/tools_and_testing/тестування_кросбраузерності/index.html
new file mode 100644
index 0000000000..e13df10951
--- /dev/null
+++ b/files/uk/learn/tools_and_testing/тестування_кросбраузерності/index.html
@@ -0,0 +1,41 @@
+---
+title: Тестування кросбраузерності
+slug: Learn/Tools_and_testing/Тестування_кросбраузерності
+translation_of: Learn/Tools_and_testing/Cross_browser_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt>
+ <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt>
+ <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt>
+ <dd>With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt>
+ <dd>Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt>
+ <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt>
+ <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt>
+ <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt>
+ <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd>
+</dl>
diff --git a/files/uk/learn/доступність/index.html b/files/uk/learn/доступність/index.html
new file mode 100644
index 0000000000..465926f459
--- /dev/null
+++ b/files/uk/learn/доступність/index.html
@@ -0,0 +1,75 @@
+---
+title: Доступність
+slug: Learn/Доступність
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p>
+
+<h2 id="Overview">Overview</h2>
+
+<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p>
+
+<ul>
+ <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li>
+ <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li>
+ <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li>
+</ul>
+
+<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p>
+
+<p>The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:</p>
+
+<p>{{EmbedYouTube("7mqqgIxX_NU")}}</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt>
+ <dd>
+ <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p>
+ </dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+ <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> - includes a list of web accessibility evaluation tools.</li>
+</ul>
diff --git a/files/uk/learn/навчання_та_отримання_допомоги/index.html b/files/uk/learn/навчання_та_отримання_допомоги/index.html
new file mode 100644
index 0000000000..c1dad68ac9
--- /dev/null
+++ b/files/uk/learn/навчання_та_отримання_допомоги/index.html
@@ -0,0 +1,315 @@
+---
+title: Навчання та отримання допомоги
+slug: Learn/Навчання_та_отримання_допомоги
+translation_of: Learn/Learning_and_getting_help
+---
+<p>{{learnsidebar}}</p>
+
+<p>It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..</p>
+
+<h2 id="Effective_learning">Effective learning</h2>
+
+<p>Let's move straight on and think about effective learning.</p>
+
+<h3 id="Different_learning_methods">Different learning methods</h3>
+
+<p>It is interesting to consider that there are two main ways in which your brain learns things — <strong>focused</strong> and <strong>diffuse</strong> learning:</p>
+
+<ul>
+ <li>Focused learning is what you might more traditionally associate with academic subjects. You concentrate deeply on a low-level topic and solving the specific problems that it brings. You are focused on a narrow area.</li>
+ <li>Diffuse learning is more to do with high-level thinking around a wider area. You let your mind wander more widely, and seemingly make random connections between different things. This is more the kind of thinking you do while you are in the shower, or during a coffee break.</li>
+</ul>
+
+<p>From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, <strong>both</strong> are very important.</p>
+
+<p>Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. </p>
+
+<p>For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.</p>
+
+<p>This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.</p>
+
+<p>It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:</p>
+
+<ol>
+ <li>Know how to fix problem A with tool A.</li>
+ <li>Know how to fix problem B with tool B.</li>
+ <li>Not know how to fix problem C.</li>
+</ol>
+
+<p>Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.</p>
+
+<h3 id="Different_learning_materials">Different learning materials</h3>
+
+<p>It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.</p>
+
+<h4 id="Textual_articles">Textual articles</h4>
+
+<p>You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS <code>background</code> property"?)</p>
+
+<p>MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.</p>
+
+<p>There are also several other great resources on the web, some of which we'll mention below.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.</p>
+</div>
+
+<h4 id="Videos">Videos</h4>
+
+<p>There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a>, and <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.</p>
+
+<h4 id="Interactive_code_playgrounds">Interactive code playgrounds</h4>
+
+<p>You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. <a href="https://www.codecademy.com/">Codecademy</a> for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.</p>
+
+<p>Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like <a href="https://jsbin.com/?html,css,js,output">JSBin</a>, <a href="https://codepen.io/">Codepen</a>, or <a href="https://glitch.com/">Glitch</a>. In fact, you'll be called to do so as part of this course when you are learning!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You can share the web address of the example with them so they can see it.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.</p>
+</div>
+
+<h3 id="Making_a_plan">Making a plan</h3>
+
+<p>It is a good idea to create a plan to help you achieve what you want to achieve through your learning.</p>
+
+<h4 id="A_goal_statement">A goal statement</h4>
+
+<p>It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:</p>
+
+<ul>
+ <li>I want to become a professional web developer in two years' time.</li>
+ <li>I want to learn enough to build a website for my local amateur tennis club.</li>
+ <li>I want to learn HTML and CSS so I can expand my job role to take over updating the content on our company website.</li>
+</ul>
+
+<p>The following are not quite as reasonable:</p>
+
+<ul>
+ <li>I want to go from a complete beginner to becoming a senior web developer in three months.</li>
+ <li>I want to start my own company and build a social network that will out-perform Facebook, in two years.</li>
+</ul>
+
+<h4 id="What_do_you_need_to_get_there">What do you need to get there?</h4>
+
+<p>Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:</p>
+
+<p>Materials I need:</p>
+
+<ul>
+ <li>A computer</li>
+ <li>Internet access</li>
+ <li>Pens and paper</li>
+</ul>
+
+<p>Knowledge I need:</p>
+
+<ul>
+ <li>How to use HTML, CSS, JavaScript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).</li>
+ <li>How to get a domain, hosting, and use them to put a web site or application online.</li>
+ <li>How to run a small business.</li>
+ <li>How to advertise my business and attract clients.</li>
+</ul>
+
+<h4 id="How_much_time_and_money_will_it_take">How much time and money will it take?</h4>
+
+<p>Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.</p>
+
+<h4 id="How_many_hours_per_week_do_I_need_to_do">How many hours per week do I need to do?</h4>
+
+<p>Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:</p>
+
+<p>"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks' holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."</p>
+
+<p>How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.</p>
+
+<p>If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!</p>
+
+<p>When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!</p>
+
+<p>Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:</p>
+
+<ul>
+ <li>HTML and CSS basics learnt by summer</li>
+ <li>JavaScript basics learnt by December</li>
+ <li>Example website project built by next April</li>
+ <li>etc.</li>
+</ul>
+
+<p>Keep thinking about how much progress you are making, and adjust your plan if needs be.</p>
+
+<h3 id="Staying_motivated">Staying motivated</h3>
+
+<p>It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:</p>
+
+<ul>
+ <li><strong>Try to make your work environment as productive as possible</strong>. Try to get a comfortable desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). Don't try to work in a room with distractions — for example a television on, with your friends watching football! Also, leave your mobile phone out of the room — most people we have are distracted by their phone a lot, so you should leave it somewhere else.</li>
+ <li><strong>Take regular breaks</strong>. It is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. That just leads to frustration — it is often better to take a break, move around for a bit, then relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing. It is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. We'd recommend taking a 15 minutes break every hour to 90 minutes.</li>
+ <li><strong>Eat, exercise, and sleep</strong>. Eat healthily, get regular exercise, and make sure you get enough sleep. This sounds obvious, but it is easy to forget when you get really into coding. Factor these essential ingredients into your schedule, and make sure you are not doing your learning time instead of these things.</li>
+ <li><strong>Give yourself rewards</strong>. It's true that <em>all work and no play makes Jack a dull boy</em>. You should try to schedule fun things to do after each learning session, which you'll only have when the learning is over and complete. If you are really into gaming, for example, there is something quite motivating about saying "no gaming tonight unless I get through my 5 hours of learning". Now all you need is willpower. Good luck!</li>
+ <li><strong>Co-learning and demoing</strong>. This won't be an option for everyone, but if at all possible try to learn alongside others. Again, this is easier if you are doing a college course on web development, but perhaps you could convince a friend to learn along with you, or find a local meetup or skill-sharing group? It is really useful and motivating to have someone to discuss ideas with and ask for help, and you should also take time to demo your work. Those shouts of appreciation will spur you on.</li>
+</ul>
+
+<h3 id="Effective_problem_solving">Effective problem solving</h3>
+
+<p>There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.</p>
+
+<h4 id="Break_things_down_into_chunks">Break things down into chunks</h4>
+
+<p>For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.</p>
+
+<p>For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:</p>
+
+<ul>
+ <li>Create the HTML structure</li>
+ <li>Work out basic site typography</li>
+ <li>Work out a basic color scheme</li>
+ <li>Implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer.</li>
+ <li>Implement a horizontal navigation menu</li>
+ <li>etc.</li>
+</ul>
+
+<p>Then you could break it down further, for example, "Implement horizontal navigation menu" could be written out as:</p>
+
+<ul>
+ <li>Make a list of menu items sit horizontally in a line.</li>
+ <li>Remove unneeded defaults, like list spacing and bullet points.</li>
+ <li>Style hover/focus/active states of menu items appropriately.</li>
+ <li>Make the menu items equally spaced along the line.</li>
+ <li>Give the menu items enough vertical spacing.</li>
+ <li>Make sure the text is centered inside each menu item</li>
+ <li>etc.</li>
+</ul>
+
+<p>Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!</p>
+
+<h4 id="Learn_and_recognise_the_patterns">Learn and recognise the patterns</h4>
+
+<p>As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:</p>
+
+<p>A nav menu is usually created from a list of links, something like:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;First menu item&lt;/li&gt;
+  &lt;li&gt;Second menu item&lt;/li&gt;
+  &lt;li&gt;Third menu item&lt;/li&gt;
+  &lt;li&gt;etc.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:</p>
+
+<pre class="brush: css notranslate">ul {
+  display: flex;
+}</pre>
+
+<p>To remove unneeded spacing and bullet points, we can do this:</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-type: none;
+  padding: 0;
+}</pre>
+
+<p>etc.</p>
+
+<p>If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.</p>
+
+<p>When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.</p>
+
+<p>In addition, the web has <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The simplest solution is often the best.</p>
+</div>
+
+<h3 id="Getting_practice">Getting practice</h3>
+
+<p>The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.</p>
+
+<p>Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.</p>
+
+<h2 dir="ltr" id="Getting_help">Getting help</h2>
+
+<p dir="ltr">Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.</p>
+
+<p dir="ltr">There are a variety of ways to get help, and what follows are some tips for doing so more effectively.</p>
+
+<h3 dir="ltr" id="Effective_web_searches">Effective web searches</h3>
+
+<p dir="ltr">One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? </p>
+
+<p dir="ltr">It is often fairly obvious what to search for. For example:</p>
+
+<ul dir="ltr">
+ <li>If you want to find out more about responsive web design, you could search for "responsive web design".</li>
+ <li>If you want to find out more about a specific technology feature, such as the HTML <code>&lt;video&gt;</code> element, or the CSS <code>background-color</code> or <code>opacity</code> properties, or the JavaScript <code>Date.setTime()</code> method, you should just search for the feature's name.</li>
+ <li>If you are looking for some more specific information, you can add other keywords as modifiers, for example "&lt;video&gt; element autoplay attribute", or "Date.setTime parameters".</li>
+</ul>
+
+<p dir="ltr">If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.</p>
+
+<ul dir="ltr">
+ <li>Run code after several promises are fulfilled</li>
+ <li>Play a video stream from a webcam in the browser</li>
+ <li>Create a linear gradient in the background of your element</li>
+</ul>
+
+<h4 id="Error_messages">Error messages</h4>
+
+<p>If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <a href="https://stackoverflow.com/">Stack Overflow</a> is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.</p>
+</div>
+
+<h4 id="Browser_testing">Browser testing</h4>
+
+<p dir="ltr">It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:</p>
+
+<ul dir="ltr">
+ <li>&lt;video&gt; playback doesn't work in the iOS browser.</li>
+ <li>Firefox doesn't seem to support the Beetlejuice API.</li>
+</ul>
+
+<h3 dir="ltr" id="Using_MDN">Using MDN</h3>
+
+<p dir="ltr">The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.</p>
+
+<p dir="ltr">We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.</p>
+
+<p dir="ltr">If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color".</p>
+
+<h3 dir="ltr" id="Other_online_resources">Other online resources</h3>
+
+<p>We already mentioned Stack Overflow, but there are other online resources that can help.</p>
+
+<p>It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:</p>
+
+<ul dir="ltr">
+ <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
+ <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
+ <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
+</ul>
+
+<p dir="ltr">However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.</p>
+
+<h3 dir="ltr" id="Physical_meetups">Physical meetups</h3>
+
+<p dir="ltr">Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. <a href="https://www.meetup.com/find/tech/">meetup.com</a> is a good place to find local physical meetups, and you could also try your local press/what's on sites.</p>
+
+<p dir="ltr">You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.</p>
+
+<h2 dir="ltr" id="See_also">See also</h2>
+
+<ul dir="ltr">
+ <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
+ <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
+ <li><a href="https://www.codecademy.com/">Codecademy</a></li>
+</ul>
diff --git a/files/uk/learn/фронт-енд_веб-розробник/index.html b/files/uk/learn/фронт-енд_веб-розробник/index.html
new file mode 100644
index 0000000000..c90cae476e
--- /dev/null
+++ b/files/uk/learn/фронт-енд_веб-розробник/index.html
@@ -0,0 +1,202 @@
+---
+title: Фронтенд веб-розробник
+slug: Learn/Фронт-енд_веб-розробник
+tags:
+  - CSS
+  - Front-end
+  - HTML
+  - JavaScript
+  - Web Standarts
+  - Інструментарій
+  - Навчання
+  - Початківець
+  - Стандарти
+  - Фронт-енд
+  - Фронтенд
+  - інструменти
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>Ласкаво просимо до нашого навчального шляху веб-розробника!</p>
+
+<p>Ми представяємо вам структурований курс, який навчить вас усьому, що вам потрібно знати, аби стати передовим веб-розробником. Просто працюйте над кожним розділом, опановуючи нові або вдосконалюючи існуючі навички, рухаючись далі. Кожен розділ містить практичні завдання та оцінювання, щоб перевірити своє розуміння, перш ніж рухатися вперед.</p>
+
+<h2 id="Охоплена_тематика">Охоплена тематика</h2>
+
+<p>Досліджувані теми:</p>
+
+<ul>
+ <li>Основні налаштування та як правильно вчитися</li>
+ <li>Веб-стандарти та найкращі практики (наприклад, доступність та сумісність між браузерами)</li>
+ <li>HTML. Мова, що надає структуру та зміст веб-контенту</li>
+ <li>CSS. Мова, що використовується для стилізації веб-сторінок</li>
+ <li>JavaScript. Мова сценаріїв, що використовується для створення динамічної функціональності в Інтернеті.</li>
+ <li>Інструменти, які використовуються для сприяння сучасній розробці веб-сторінок на стороні клієнта.</li>
+</ul>
+
+<p>Ви можете працювати з розділами по порядку, проте кожен з них також є самостійним. Наприклад, якщо ви вже знаєте HTML, ви можете перейти до розділу CSS.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Щоб почати цей курс, вам не потрібні попередні знання. Все, що вам потрібно, це комп’ютер, що може працювати із сучасними веб-браузерами, підключення до Інтернету та готовність вчитися.</p>
+
+<p>Якщо ви не впевнені, що фронтенд веб-розробка вам підходить та/чи ви хочете більш поступове ознайомлення перед початком довгого та повного курсу, спершу опрацюйте наш модуль <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a>.</p>
+
+<h2 id="Отримання_допомоги">Отримання допомоги</h2>
+
+<p>Ми намагалися зробити навчання фронт-енд веб-розробці якомога комфортним, але ви, ймовірно, все ж таки десь застрягнете, тому що чогось не розумієте або якийсь код просто не працює.</p>
+
+<p>Не панікуйте. Ми всі застрягаємо, не зважаючи на те - ми початківці чи ми професійні веб-розробники. Стаття <a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> пропонує вам низку порад щодо пошуку інформації та надання допомоги самому собі. Якщо ви все ще не зрушили з мертвої точки, сміливо розміщуйте питання на нашому <a href="https://discourse.mozilla.org/c/mdn/learn/">Дискурсному форумі</a>.</p>
+
+<p>Нумо починати. Щасти!</p>
+
+<h2 id="Шлях_навчання">Шлях навчання</h2>
+
+<h3 id="Початок">Початок</h3>
+
+<p>Час на виконання: 1,5–2 години</p>
+
+<h4 id="Передумови_2">Передумови</h4>
+
+<p>Нічого, крім базової комп'ютерної грамотності.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>В цій частині курсу немає оцінювання, проте не пропускайте її. Важливо, щоб ви налаштувались і були готові виконувати практичні завдання пізніше в процесі.</p>
+
+<h4 id="Посібники">Посібники</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення необхідних програм</a> — базове налаштування інструментів (15 хвилин читання)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D1%82%D0%B0_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%B8">Інтернет та веб-стандарти</a> (45 хвилин читання)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BE%D1%82%D1%80%D0%B8%D0%BC%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B8">Навчання та отримання допомоги</a> (45 хвилин читання)</li>
+</ul>
+
+<h3 id="Семантика_та_структура_за_допомогою_HTML">Семантика та структура за допомогою HTML</h3>
+
+<p>Час на виконання: 35–50 годин</p>
+
+<h4 id="Передумови_3">Передумови</h4>
+
+<p>Нічого, крім базової комп'ютерної грамотності та базового середовища для веб-розробки.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_2">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>
+
+<h4 id="Модулі">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> (15–20 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a> (15–20 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Tables">HTML-таблиці</a> (5-10 годин читання/виконання практичних завдань)</li>
+</ul>
+
+<h3 id="Стилізація_та_розмітка_за_допомогою_CSS">Стилізація та розмітка за допомогою CSS</h3>
+
+<p>Час на виконання: 90–120 гоодин</p>
+
+<h4 id="Передумови_4">Передумови</h4>
+
+<p>Перед початком вивчення CSS рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_3">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>
+
+<h4 id="Модулі_2">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/First_steps">Перші кроки у CSS</a> (10–15 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Building_blocks">Будівельні блоки CSS</a> (35–45 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/Styling_text">Стилізація тексту</a> (15–20 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/CSS/CSS_%D1%80%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0">CSS розмітка</a> (30–40 годин читання/виконання практичних завдань)</li>
+</ul>
+
+<h4 id="Додаткові_ресурси">Додаткові ресурси</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Web/CSS/%D0%A0%D0%BE%D0%B7%D0%BC%D1%96%D1%82%D0%BA%D0%B0_%D0%BA%D1%83%D0%BB%D1%96%D0%BD%D0%B0%D1%80%D0%BD%D0%B0-%D0%BA%D0%BD%D0%B8%D0%B3%D0%B0">Кулінарна книга з CSS розмітки</a></li>
+</ul>
+
+<h3 id="Інтерактивність_за_допомогою_JavaScript">Інтерактивність за допомогою JavaScript</h3>
+
+<p>Час на виконання: 135–185 годин</p>
+
+<h4 id="Передумови_5">Передумови</h4>
+
+<p>Перед початком вивчення JavaScript рекомендується мати базові знання з HTML. Спершу слід вивчити <a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_4">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>
+
+<h4 id="Модулі_3">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/First_steps">Перші кроки у JavaScript</a> (30–40 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%91%D1%83%D0%B4%D1%96%D0%B2%D0%B5%D0%BB%D1%8C%D0%BD%D1%96_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8">Будівельні блоки JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/Client-side_web_APIs">Веб-APIs на стороні клієнта</a> (30–40 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/JavaScript/%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%B8%D0%B9">Асинхронний JavaScript</a> (25–35 годин читання/виконання практичних завдань)</li>
+</ul>
+
+<h3 id="Веб-форми_—_Робота_з_даними_користувача">Веб-форми — Робота з даними користувача</h3>
+
+<p>Час на виконання: 40–50 годин</p>
+
+<h4 id="Передумови_6">Передумови</h4>
+
+<p>Вивчення форм вимагає знання з HTML, CSS та JavaScript. Враховуючи складність роботи з формами, це спеціальна тема.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_5">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>
+
+<h4 id="Модулі_4">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/HTML/Forms">Веб-форми</a> (40–50 годин)</li>
+</ul>
+
+<h3 id="Роблячи_Інтернет_доступним_для_кожного">Роблячи Інтернет доступним для кожного</h3>
+
+<p>Час на виконання: 60–75 годин</p>
+
+<h4 id="Передумови_7">Передумови</h4>
+
+<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript. Багато методів та найкращих практик стосуються декількох технологій.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_6">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.</p>
+
+<h4 id="Модулі_5">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A2%D0%B5%D1%81%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BA%D1%80%D0%BE%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%96">Тестування кросбраузерності</a> (25–30 годин читання/виконання практичних завдань)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%96%D1%81%D1%82%D1%8C">Доступність</a> (20–25 годин читання/виконання практичних завдань)</li>
+</ul>
+
+<h3 id="Сучасний_інструментарій">Сучасний інструментарій</h3>
+
+<p>Час на виконання: 55–90 годин</p>
+
+<h4 id="Передумови_8">Передумови</h4>
+
+<p>Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript, оскільки інструменти, що тут обговорюються, працюють вкупі із багатьма з цих технологій.</p>
+
+<h4 id="Як_мені_дізнатися_що_я_можу_рухатися_далі_7">Як мені дізнатися, що я можу рухатися далі?</h4>
+
+<p>У цьому наборі модулів немає конкретних статей з оцінюванням. Навчальні посібники з прикладами в кінці другого та третього модулів готують вас до розуміння основ сучасного інструментарію.</p>
+
+<h4 id="Модулі_6">Модулі</h4>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/Git_%D1%82%D0%B0_GitHub">Git та GitHub</a> (5 годин читання)</li>
+ <li><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_%D1%96%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2_%D0%B2%D0%B5%D0%B1-%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B8_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння інструментів веб-розробки на стороні клієнта</a> (20–25 годин читання)</li>
+ <li>
+  <p><a href="https://developer.mozilla.org/uk/docs/Learn/Tools_and_testing/%D0%A0%D0%BE%D0%B7%D1%83%D0%BC%D1%96%D0%BD%D0%BD%D1%8F_JavaScript-%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D1%96%D0%B2_%D0%BD%D0%B0_%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D1%96_%D0%BA%D0%BB%D1%96%D1%94%D0%BD%D1%82%D0%B0">Розуміння JavaScript-фреймворків на стороні клієнта</a> (30-60 годин читання/виконання практичних завдань)</p>
+ </li>
+</ul>