Вчимо веб-розробку

Мета цієї частини MDN не в тому, щоб зробити вас з «початківця» відразу «експертом» , а зробити вас «знаючим». Потім ви самі зможете вибрати подальший шлях, вивчаючи решту MDN, та інші розширені та професійні ресурси, що будуть підсумовувати попередні знання.

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

З чого почати

• Початківець:Для практичного ознайомлення з темою, якщо ви початківець у веб-розробці, рекомендуємо починати роботу з модуля Початок роботи з Web.
• Поширені питання: Якщо є загальні запитання стосовно веб-розробки, вам допоможе розділ Поширені питання.
• Розширений рівень: Якщо ви вже освоїли базові поняття, наступним кроком буде детальніше вивчення HTML та CSS: розпочніть з модуля Вступ до HTML та продовжуйте з Вступ до CSS.
• Пишемо скрипти: Якщо ви вже достатньо володієте HTML та CSS або в основному цікавитесь кодуванням, вам слід перейти до JavaScript. Почніть з розділів Перші кроки в JavaScript та Перші кроки на стороні сервера.

Охоплені теми

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

Початок роботи з Інтернетом

Забезпечує практичне введення до веб-розробки для цілковитих початківців.

HTML - структурування інтернету

HTML - це мова, яку ми використовуємо для структурування різних частин нашого вмісту та визначення їх змісту чи призначення. Ця тема детально вчить HTML.

CSS — стилізація інтернету

CSS - це мова, яку ми можемо використовувати для зміни вигляду та представлення веб-контенту, а також додавання поведінки, як-от анімація. Ця тема всебічно охоплює CSS.

JavaScript — динамічні сценарії на стороні клієнта

JavaScript - це скриптова мова, що використовується для додавання динамічних функцій веб-сторінкам. Ця тема викладає всі необхідні, для комфортного написання та розуміння JavaScript, елементи.

Доступність — зробити інтернет зручним для всіх

Доступність - це практика створення веб-контенту для максимально можливої кількості людей незалежно від інвалідності, пристрою, мови та інших факторів, що відрізняються. Ця тема дає вам все, що вам потрібно знати.

Інструменти та тестування

Ця тема охоплює інструменти, які розробники використовують для полегшення їх роботи, як-от інструменти крос-браузерного тестування.

Програмування сайту на стороні сервера

Навіть якщо ви зосереджені на розробці веб-сторінок на стороні клієнта, корисно знати про те, як працюють сервери та серверні компоненти коду. Тема дає загальне уявлення про те, як працює серверна частина, а також докладні підручники, в яких описано, як створити серверну програму за допомогою двох популярних фреймворків — Django (Python) та Express (node.js). 

Отримання прикладів нашого коду

Всі приклади коду, які ви зустрінете в зоні навчання, доступні на GitHub. Якщо ви хочете скопіювати їх усі на свій комп'ютер, найпростішим способом є:

1. Встановіть Git на вашу машину. Це основне програмне забезпечення системи керування версіями, на якому працює GitHub.
2. Отримайте обліковий запис на GitHub.
3. Після реєстрації, увійдіть на github.com за допомогою свого імені користувача та пароля.
4. Відкрийте командний рядок комп'ютера (Windows) або термінал (Linux, macOS).
5. Щоб скопіювати репозиторій зони навчання до папки під назвою learning area у поточному розташуванні, яке вказує ваш командний рядок/термінал, скористайтеся цією командою:

   git clone https://github.com/mdn/learning-area

6. Тепер ви можете ввести каталог та потім знаходити ваші файли, (використовуючи шукач/файловий провідник або команду cd).

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

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

   cd learning-area

2. Оновіть репозиторій, використовуючи таку команду:

   git pull

Зв'яжіться з нами

Якщо ви хочете зв'язатись з нами з будь-якої підстави, надішліть нам листа на  поштові списки або в IRC канал. Ми хочемо дізнатись вашу думку стосовно помилок та неточностей на сайті, запити нових навчальних тем, запити про допомогу по незрозумілим інструментам чи будь-що інше.

Якщо ви зацікавлені розвивати/вдосконалювати зміст, погляньте Як ви можете допомогти, і дайтесь чути! Ми будемо надзвичайно щасливі поспілкуватись з вами, не дивлячись на те, хто ви — студент, викладач, досвідчений веб-розробник або будь-хто зацікавлений допомогти в вдосконалені навчального досвіду.

Дивіться також

Mozilla Developer Newsletter

Наш інформаційний бюлетень для веб-розробників, який є чудовим ресурсом для всіх рівнів досвіду.

Codecademy

Чудовий інтерактивний сайт для вивчення мов програмування з нуля.

Code.org

Базова теорія написання коду та практика, здебільшого для дітей та повних новачків.

EXLskills 

Безкоштовні та відкриті курси для вивчення технічних навичок, з наставництвом та проектом навчання

Web Literacy Map

Платформа для початкового рівня веб-грамотності та навичок 21 століття, що також забезпечує доступ до викладацьких матеріалів, відсортованих за категоріями.

Teaching activities

Серія навчальних матеріалів для викладання (та навчання), створених Фондом Мозіла, що охоплює все, починаючи від базової грамотності в Інтернеті та конфіденційності, до JavaScript і зламу Minecraft.

Edabit

Сотні безкоштовних інтерактивних завдань по кодуванню на різних мовах.