Вивчай
· 3 хв читання
початківцямвеб-розробка

Що таке веб-розробка і як працює інтернет

Офіціант приносить ноутбук на підносі клієнту в кафе — аналогія як сервер віддає відповідь браузеруОфіціант приносить ноутбук на підносі клієнту в кафе — аналогія як сервер віддає відповідь браузеру

Ти користуєшся інтернетом щодня — читаєш новини, дивишся відео, замовляєш їжу. Але чи замислювався, що відбувається за лаштунками, коли ти вводиш адресу сайту в браузер?

Давай розберемось. Без зайвого ускладнення, але з цікавими деталями.

Коротка історія, яка змінила все

6 серпня 1991 року британський вчений Тім Бернерс-Лі опублікував перший у світі вебсайт. Він працював у CERN (європейській лабораторії ядерної фізики) і хотів спростити обмін документами між вченими.

Для цього він придумав три речі, якими ми досі користуємося:

  • HTML — мова для створення вебсторінок
  • HTTP — протокол для передачі даних
  • URL — адреси вебсторінок

Найцікавіше: CERN радив йому запатентувати цю технологію. Але Бернерс-Лі відмовився — він хотів, щоб веб був безкоштовним і відкритим для всіх. Якби не це рішення, інтернет виглядав би зовсім інакше.

Сьогодні у світі понад 1.1 мільярда вебсайтів. Кожні 3 секунди з'являється новий. І кожен з них хтось створив — веб-розробник.

Як працює інтернет (пояснення для людей)

Уяви ресторан:

  • Ти (клієнт) — сидиш за столиком і дивишся меню
  • Офіціант (мережа) — приймає твоє замовлення і несе його на кухню
  • Кухня (сервер) — готує страву і віддає офіціанту
  • Страва (вебсторінка) — те, що ти отримуєш

Коли ти вводиш google.com у браузер — твій комп'ютер (клієнт) надсилає запит через інтернет (офіціант) на сервер Google (кухня). Сервер "готує" сторінку і відправляє її назад. Браузер відображає результат.

Все це відбувається за долі секунди. Кожного разу, коли ти натискаєш посилання — цей цикл повторюється.

Головне: ти не готуєш страву сам — ти лише замовляєш і отримуєш. Так само браузер не створює контент, а лише відображає те, що надіслав сервер.

З чого складається вебсайт

Кожен вебсайт — це комбінація трьох технологій. Уяви будівництво будинку:

HTML — це каркас. Стіни, двері, вікна. Структура: заголовки, параграфи, кнопки, зображення. Без HTML сторінка — це порожнеча.

CSS — це дизайн інтер'єру. Фарба на стінах, меблі, освітлення. CSS робить сторінку красивою: кольори, шрифти, відступи, анімації.

JavaScript — це "розумний дім". Автоматичне освітлення, кліматконтроль, охоронна система. JavaScript додає інтерактивність: кнопки реагують на кліки, форми перевіряють дані, контент оновлюється без перезавантаження.

Все починається з HTML, потім додається CSS, і нарешті — JavaScript. Саме в такому порядку ми й вчимо у нашому курсі.

Frontend vs Backend

У веб-розробці є два великих напрямки:

Frontend — все, що бачить користувач. Дизайн, кнопки, анімації, адаптивність для мобільних. Технології: HTML, CSS, JavaScript, React, Next.js.

Backend — все, що працює "за кулісами". Бази даних, авторизація, обробка платежів, відправка листів. Технології: Node.js, Python, Go, бази даних.

Fullstack — коли одна людина робить і те, і інше. Як шеф-кухар, який і готує, і подає страви.

Ми починаємо з frontend — він дає найшвидший візуальний результат. Написав 5 рядків HTML — і вже бачиш сторінку в браузері.

Чому веб-розробка — найкращий старт

Нульовий поріг входу. Тобі не потрібно нічого встановлювати, щоб почати. Відкрий блокнот, напиши <h1>Привіт!</h1>, збережи як .html файл і відкрий у браузері. Все. Ти вже веб-розробник.

Миттєвий результат. На відміну від інших напрямків, де потрібні години налаштувань перед першим "Hello World", у вебі ти бачиш результат одразу.

Величезний ринок. Кожному бізнесу потрібен сайт. Кожному сайту потрібен розробник. Попит стабільно перевищує пропозицію.

Гнучкість. Веб-розробники легко працюють віддалено — все, що потрібно, це ноутбук та інтернет.

Що далі?

Якщо тебе зацікавила веб-розробка — найкращий наступний крок це почати. Не завтра, а прямо зараз. У нашому курсі ми починаємо з основ командного рядка — інструменту, який використовує кожен професійний розробник.

А якщо хочеш глибше зрозуміти, як працює веб — читай урок "Як працює веб".