---
title: Вчимо веб-розробку
slug: Learn
tags:
  - WWW
  - Веб
  - Покажчик
  - Початківець
  - вивчення
translation_of: Learn
---
<div>{{LearnSidebar}}</div>

<div>
<p class="summary">Ласкаво просимо до навчальної зони MDN. Ці статті покликані забезпечити початківців у веб-розробці всім необхідним, аби почати писати код простих сайтів.</p>
</div>

<p>Мета цієї частини MDN не в тому, щоб зробити вас з «початківця» відразу «експертом» , а зробити вас «знаючим». Потім ви самі зможете вибрати подальший шлях, вивчаючи <a href="https://developer.mozilla.org/uk/">решту MDN</a>, та інші розширені та професійні ресурси, що будуть підсумовувати попередні знання.</p>

<p>Якщо ви цілковитий початківець, веб-розробка може стати певним викликом для вас — ми підтримаємо вас та дамо детальну інформацію, щоб ви почували себе комфортно та вивчили тему як слід. Почувайте себе як риба у воді, незалежно від того, чи ви студент, який вивчає веб-розробку (самостійно або в аудиторії), вчитель, який шукає матеріали для занять, аматор або просто прагнете детальніше зрозуміти, як працють веб-технології.</p>

<div class="warning">
<p><strong>Важливо</strong>: Вміст навчальної зони постійно оновлюється. Якщо ви маєте запитання стосовно тем, які на вашу думку не висвітлені, зверніться до секції {{anch("Зв'яжіться з нами")}} нижче.</p>
</div>

<h2 id="З_чого_почати">З чого почати</h2>

<ul class="card-grid">
 <li><span>Початківець:</span>Для практичного ознайомлення з темою, якщо ви початківець у веб-розробці, рекомендуємо починати роботу з модуля <a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Web</a>.</li>
 <li><span>Поширені питання:</span> Якщо є загальні запитання стосовно веб-розробки, вам допоможе розділ <a href="/uk/docs/Learn/Common_questions">Поширені питання</a>.</li>
 <li><span>Розширений рівень:</span> Якщо ви вже освоїли базові поняття, наступним кроком буде детальніше вивчення {{glossary("HTML")}} та {{glossary("CSS")}}: розпочніть з модуля <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> та продовжуйте з <a href="/uk/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>.</li>
 <li><span>Пишемо скрипти:</span> Якщо ви вже достатньо володієте HTML та CSS або в основному цікавитесь кодуванням, вам слід перейти до {{glossary("JavaScript")}}. Почніть з розділів <a href="/uk/docs/Learn/JavaScript/First_steps">Перші кроки в JavaScript</a> та <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Перші кроки на стороні сервера</a>.</li>
</ul>

<div class="note">
<p><strong>Нотатка</strong>: Наш <a href="/uk/docs/Glossary">Словник</a> надає визначення термінологій.</p>
</div>

<p>{{LearnBox({"title":"Випадковий запис в словнику"})}}</p>

<h2 id="Охоплені_теми">Охоплені теми</h2>

<p>Нижче наведено список усіх тем, які ми розглядаємо в навчальній зоні MDN.</p>

<dl>
 <dt><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a></dt>
 <dd>Забезпечує практичне введення до веб-розробки для цілковитих початківців.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML - структурування інтернету</a></dt>
 <dd>HTML - це мова, яку ми використовуємо для структурування різних частин нашого вмісту та визначення їх змісту чи призначення. Ця тема детально вчить HTML.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — стилізація інтернету</a></dt>
 <dd>CSS - це мова, яку ми можемо використовувати для зміни вигляду та представлення веб-контенту, а також додавання поведінки, як-от анімація. Ця тема всебічно охоплює CSS.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — динамічні сценарії на стороні клієнта</a></dt>
 <dd>JavaScript - це скриптова мова, що використовується для додавання динамічних функцій веб-сторінкам. Ця тема викладає всі необхідні, для комфортного написання та розуміння JavaScript, елементи.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Доступність — зробити інтернет зручним для всіх</a></dt>
 <dd>Доступність - це практика створення веб-контенту для максимально можливої кількості людей незалежно від інвалідності, пристрою, мови та інших факторів, що відрізняються. Ця тема дає вам все, що вам потрібно знати.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Інструменти та тестування</a></dt>
 <dd>Ця тема охоплює інструменти, які розробники використовують для полегшення їх роботи, як-от інструменти крос-браузерного тестування.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Програмування сайту на стороні сервера</a></dt>
 <dd>Навіть якщо ви зосереджені на розробці веб-сторінок на стороні клієнта, корисно знати про те, як працюють сервери та серверні компоненти коду. Тема дає загальне уявлення про те, як працює серверна частина, а також докладні підручники, в яких описано, як створити серверну програму за допомогою двох популярних фреймворків — Django (Python) та Express (node.js). </dd>
</dl>

<h2 id="Отримання_прикладів_нашого_коду">Отримання прикладів нашого коду</h2>

<p>Всі приклади коду, які ви зустрінете в зоні навчання, <a href="https://github.com/mdn/learning-area/">доступні на GitHub</a>. Якщо ви хочете скопіювати їх усі на свій комп'ютер, найпростішим способом є:</p>

<ol>
 <li><a href="https://git-scm.com/downloads">Встановіть Git</a> на вашу машину. Це основне програмне забезпечення системи керування версіями, на якому працює GitHub.</li>
 <li><a href="https://github.com/join">Отримайте обліковий запис на GitHub</a>.</li>
 <li>Після реєстрації, увійдіть на <a href="https://github.com/">github.com</a> за допомогою свого імені користувача та пароля.</li>
 <li>Відкрийте командний рядок комп'ютера (Windows) або термінал (Linux, macOS).</li>
 <li>Щоб скопіювати репозиторій зони навчання до папки під назвою learning area у поточному розташуванні, яке вказує ваш командний рядок/термінал, скористайтеся цією командою:
  <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>Тепер ви можете ввести каталог та потім знаходити ваші файли, (використовуючи шукач/файловий провідник або <a href="https://uk.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команду cd</a>).</li>
</ol>

<p>Ви можете оновити репозиторій <code>learning-area</code> з будь-якими змінами, внесеними до основної версії на GitHub, таким чином:</p>

<ol>
 <li>У командному рядку/терміналі перейдіть до каталогу <code>learning-area</code>, використовуючи <code>cd</code>. Наприклад, якщо ви були в батьківському каталозі:

  <pre class="brush: bash">cd learning-area</pre>
 </li>
 <li>Оновіть репозиторій, використовуючи таку команду:
  <pre class="brush: bash">git pull</pre>
 </li>
</ol>

<h2 id="Звяжіться_з_нами">Зв'яжіться з нами</h2>

<p>Якщо ви хочете зв'язатись з нами з будь-якої підстави, надішліть нам листа на <a href="/uk/docs/MDN/Community/Conversations#Asynchronous_discussions">поштові списки</a> або в <a href="https://developer.mozilla.org/uk/docs/MDN/Community/Conversations#Chat_in_IRC">IRC канал</a>. Ми хочемо дізнатись вашу думку стосовно помилок та неточностей на сайті, запити нових навчальних тем, запити про допомогу по незрозумілим інструментам чи будь-що інше.</p>

<p>Якщо ви зацікавлені розвивати/вдосконалювати зміст, погляньте <a href="/uk/Learn/How_to_contribute">Як ви можете допомогти</a>, і дайтесь чути! Ми будемо надзвичайно щасливі поспілкуватись з вами, не дивлячись на те, хто ви — студент, викладач, досвідчений веб-розробник або будь-хто зацікавлений допомогти у вдосконалені навчального досвіду.</p>

<h2 id="Дивіться_також">Дивіться також</h2>

<dl>
 <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
 <dd>Наш інформаційний бюлетень для веб-розробників, який є чудовим ресурсом для всіх рівнів досвіду.</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>Чудовий інтерактивний сайт для вивчення мов програмування з нуля.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Базова теорія написання коду та практика, здебільшого для дітей та повних новачків.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
 <dd>Безкоштовні та відкриті курси для вивчення технічних навичок, з наставництвом та проектом навчання</dd>
 <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
 <dd>Платформа для початкового рівня веб-грамотності та навичок 21 століття, що також забезпечує доступ до викладацьких матеріалів, відсортованих за категоріями.</dd>
 <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
 <dd>Серія навчальних матеріалів для викладання (та навчання), створених Фондом Мозіла, що охоплює все, починаючи від базової грамотності в Інтернеті та конфіденційності, до JavaScript і зламу Minecraft.</dd>
 <dt><a href="https://edabit.com">Edabit</a></dt>
 <dd>Сотні безкоштовних інтерактивних завдань по кодуванню на різних мовах.</dd>
</dl>