initial commit

10 files changed, 1603 insertions, 0 deletions

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>