🎓
Навички
Курси
🌙
Увійти
Реєстрація
← Назад до курсу
▸ Як працює веб
○ Клієнт, сервер і протокол 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 коду
📝 Квіз
← До курсу
Практика HTML/CSS: верстка проєкту
Hero-секція та карточки
📖 Теорія
Hero-секція:
💡 Приклад коду
👁 Переглянути результат
<section class="hero"> <div class="container"> <h1>Вивчай веб-розробку</h1> <p>Від HTML до Node.js — повний курс</p> <a href="#start" class="btn btn-primary">Почати навчання</a> </div> </section> .hero { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 80px 24px; text-align: center; } .hero h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 16px; } Cards Grid: .cards { display: flex; flex-wrap: wrap; gap: 24px; padding: 48px 24px; } .card { flex: 1 1 280px; background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
👁 Результат:
✕
← Попередній урок
Наступний урок →