🎓
Навички
Курси
🌙
Увійти
Реєстрація
← Назад до курсу
▸ Як працює веб
○ Клієнт, сервер і протокол 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 коду
📝 Квіз
← До курсу
CSS-анімації та адаптивність
Transitions та hover-ефекти
📖 Теорія
Плавні переходи між станами:
CSS
📋
1
.btn {
2
background
: #3498db;
.btn { background: #3498db;
💡 Приклад коду
👁 Переглянути результат
color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; /* властивість тривалість функція */ /* або точніше: */ transition: background-color 0.3s ease, transform 0.2s ease; } .btn:hover { background: #2980b9; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } Функції тайming: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier() transform: transform: translateX(20px) translateY(-10px); transform: scale(1.1) rotate(45deg); transform: skewX(10deg);
👁 Результат:
✕
← Попередній урок
Наступний урок →