Фронтенд (від англ. frontend) – це клієнтська частина вебзастосунку або сайту, з якою взаємодіє користувач. Це все, що ми бачимо у веббраузері: кнопки, меню, зображення, анімації, форми тощо.
📌 Основні аспекти фронтенду
- Інтерфейс користувача (UI – User Interface)
Візуальна частина, що включає дизайн, верстку, анімації, адаптивність і взаємодію з користувачем. - Функціональність (UX – User Experience)
Включає зручність використання, швидкість завантаження сторінки, адаптивність під різні пристрої. - Взаємодія з бекендом
Фронтенд отримує дані з бекенду через API (наприклад, REST або GraphQL), обробляє їх і відображає користувачеві.
Основні технології фронтенду
🔹 HTML (HyperText Markup Language) – основа вебсторінки, що відповідає за структуру контенту.
🔹 CSS (Cascading Style Sheets) – стилі, які оформлюють сторінку (колір, шрифти, розміщення елементів, анімація).
🔹 JavaScript (JS) – мова програмування, яка додає динаміку (клікабельні кнопки, форми, анімації).
Додатково:
✔️ CSS-фреймворки: Bootstrap, Tailwind CSS
✔️ JS-бібліотеки: jQuery (застарілий, але ще використовується)
✔️ Фронтенд-фреймворки: Vue.js (який ти використовуєш 😉), React, Angular
Як працює фронтенд?
🔹 Браузер завантажує HTML, CSS і JavaScript-файли.
🔹 HTML створює структуру сторінки.
🔹 CSS визначає вигляд елементів.
🔹 JavaScript додає логіку й анімації.
🔹 Якщо сайт інтерактивний, фронтенд звертається до бекенду (API) для отримання або надсилання даних.
Різниця між фронтендом і бекендом
| Фронтенд | Бекенд |
|---|---|
| Відповідає за вигляд сайту | Відповідає за логіку й базу даних |
| Працює в браузері | Працює на сервері |
| Використовує HTML, CSS, JS | Використовує мови як-от Python, PHP, Node.js |
| Обробляє взаємодію з користувачем | Зберігає, обробляє та передає дані |
Фронтенд-розробник – що він робить?
🛠 Завдання фронтендера:
✔️ Верстає вебсайти (HTML + CSS)
✔️ Пише JavaScript-код
✔️ Додає інтерактивність
✔️ Інтегрує API
✔️ Працює з фронтенд-фреймворками (Vue.js, React, Angular)
Висновок
Фронтенд – це обличчя вебзастосунку. Без нього навіть найкращий бекенд не мав би сенсу, адже користувач просто не зміг би ним користуватися. Фронтенд-розробник відповідає за зручний та привабливий інтерфейс, а також забезпечує взаємодію з сервером для отримання даних.