🎓
Навички
Курси
🌙
Увійти
Реєстрація
← Назад до курсу
▸ Як працює веб
○ Клієнт, сервер і протокол HTTP
○ URL, DNS та HTTPS
○ Інструменти розробника та робоче середовище
📝 Квіз
▸ Перша веб-сторінка
○ HTML: елементи, теги та атрибути
○ Структура HTML-документа
○ Підключення CSS та перший стиль
📝 Квіз
▸ HTML-елементи та текст
○ Текстові елементи: заголовки та параграфи
○ Посилання та зображення
○ Списки: ul, ol, dl
📝 Квіз
▸ HTML-семантика
○ Семантична розмітка HTML5
○ div, span та групування елементів
○ Форми та таблиці: семантична розмітка
📝 Квіз
▸ HTML форми та медіа
○ Форми та типи полів вводу
○ Select, textarea та організація форм
○ Медіа: аудіо, відео та iframe
📝 Квіз
▸ CSS основи та селектори
○ Синтаксис CSS та типи селекторів
○ Каскад та специфічність
○ Основні властивості CSS: колір, фон, шрифт
📝 Квіз
▸ Блокова модель CSS
○ Блокові та рядкові елементи, display
○ Box model: margin, padding, border
○ box-sizing, overflow та видимість
📝 Квіз
▸ CSS позиціонування та Flexbox
○ Position: static, relative, absolute, fixed, sticky
○ Float та сучасні альтернативи
○ Flexbox: сучасна розкладка
📝 Квіз
▸ CSS типографіка та декор
○ Шрифти та типографіка
○ Фони та градієнти
○ Стилізація списків та таблиць
📝 Квіз
▸ CSS-анімації та адаптивність
○ Transitions та hover-ефекти
○ CSS-анімації з @keyframes
○ Media queries та адаптивний дизайн
📝 Квіз
▸ Практика HTML/CSS: верстка проєкту
○ Верстка шапки та навігації
○ Hero-секція та карточки
○ Підвал, форма зворотного зв'язку та найкращі практики
📝 Квіз
▸ JavaScript: змінні та типи даних
○ let, const та типи даних
○ Оператори та вирази
○ Рядки та шаблонні літерали
📝 Квіз
▸ JavaScript: методи рядків та Math
○ Методи рядків
○ Об'єкт Math та числові операції
○ Перетворення типів
📝 Квіз
▸ JavaScript: масиви
○ Масиви та базові методи
○ forEach, map, filter, reduce
○ Деструктуризація та spread/rest
📝 Квіз
▸ JavaScript: об'єкти та JSON
○ Об'єкти: властивості та методи
○ Деструктуризація об'єктів та spread
○ JSON: серіалізація та парсинг
📝 Квіз
▸ JavaScript: керування потоком та функції
○ Умовні конструкції та switch
○ Цикли: for, while, for...of, for...in
○ Функції: оголошення, вирази, стрілки, замикання
📝 Квіз
▸ JavaScript та DOM
○ DOM: пошук та читання елементів
○ Маніпуляції DOM
○ Події: addEventListener та делегування
📝 Квіз
▸ Node.js основи
○ Node.js та модульна система
○ Вбудовані модулі: fs та util
○ Асинхронний JavaScript: Promises та async/await
📝 Квіз
▼ Express.js та REST API
○ Express.js: базовий сервер та маршрути
○ Middleware та обробка помилок
▶ CRUD REST API
📝 Квіз
▸ SQL та бази даних
○ Основи реляційних БД та DDL
○ DML: SELECT, INSERT, UPDATE, DELETE
○ JOIN та агрегатні функції
📝 Квіз
▸ CSS Grid: двовимірна розкладка
○ Основи Grid: контейнер та треки
○ Розміщення елементів: grid-column та grid-area
○ Адаптивна Grid-сітка та порівняння з Flexbox
📝 Квіз
▸ CSS Custom Properties та теми
○ CSS-змінні: оголошення та використання
○ Темна тема та динамічні зміни
○ CSS calc(), clamp() та сучасні функції
📝 Квіз
▸ JavaScript: Класи та ООП
○ class та constructor
○ Наслідування: extends та super
○ Принципи ООП: SOLID та патерни
📝 Квіз
▸ JavaScript: Обробка помилок
○ try/catch/finally та типи помилок
○ Власні класи помилок
○ Помилки в асинхронному коді
📝 Квіз
▸ JavaScript: Fetch API та HTTP-запити
○ Fetch: GET-запити та обробка відповіді
○ POST, заголовки та опції fetch
○ AbortController, interceptors та обгортка над fetch
📝 Квіз
▸ JavaScript: Регулярні вирази
○ Синтаксис RegExp та базові шаблони
○ Групи захоплення та розширені можливості
○ Практика: парсинг та трансформація тексту
📝 Квіз
▸ npm, package.json та інструменти розробки
○ npm та package.json
○ ESLint та Prettier: якість коду
○ Vite: сучасний інструмент збірки
📝 Квіз
▸ Тестування JavaScript з Jest
○ Основи Jest: describe, it, expect
○ Test-Driven Development (TDD)
○ Мок-функції та тестування async коду
📝 Квіз
← До курсу
Express.js та REST API
CRUD REST API
📖 Теорія
REST API для ресурсу /api/tasks:
💡 Приклад коду
▶ Запустити
const express = require('express'); const app = express(); app.use(express.json()); let tasks = [ { id: 1, title: 'Вивчити Express', done: false }, { id: 2, title: 'Написати API', done: false } ]; // GET /api/tasks — отримати всі app.get('/api/tasks', (req, res) => { res.json(tasks); }); // GET /api/tasks/:id — отримати одну app.get('/api/tasks/:id', (req, res) => { const task = tasks.find(t => t.id === Number(req.params.id)); if (!task) return res.status(404).json({ error: 'Завдання не знайдено' }); res.json(task); }); // POST /api/tasks — створити app.post('/api/tasks', (req, res) => { const { title } = req.body; if (!title) return res.status(400).json({ error: 'title обов\'язковий' }); const task = { id: Date.now(), title, done: false }; tasks.push(task); res.status(201).json(task); }); // PATCH /api/tasks/:id — оновити app.patch('/api/tasks/:id', (req, res) => { const task = tasks.find(t => t.id === Number(req.params.id)); if (!task) return res.status(404).json({ error: 'Не знайдено' }); Object.assign(task, req.body); res.json(task); }); // DELETE /api/tasks/:id — видалити app.delete('/api/tasks/:id', (req, res) => { tasks = tasks.filter(t => t.id !== Number(req.params.id)); res.status(204).send(); }); app.listen(3000);
Вивід:
← Попередній урок
Наступний урок →