🎓
Навички
Курси
🌙
Увійти
Реєстрація
← Назад до курсу
▸ Як працює веб
○ Клієнт, сервер і протокол 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 Grid: двовимірна розкладка
Адаптивна Grid-сітка та порівняння з Flexbox
📖 Теорія
Магічний рядок для адаптивних карток без media queries:
💡 Приклад коду
👁 Переглянути результат
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: 24px; } /* Автоматично 1/2/3/4 колонки залежно від ширини */ Додати рядки явно (для рівновисоких карток): .cards { grid-auto-rows: minmax(200px, auto); } Коли Grid, а коли Flexbox: ┌─────────────────────┬────────────────────┐ │ Flexbox │ Grid │ ├─────────────────────┼────────────────────┤ │ Один рядок / стовп │ Рядки І стовпці │ │ Nav, toolbar │ Layout сторінки │ │ Центрування │ Сітка карток │ │ Кнопки в ряд │ Дашборд/формс │ └─────────────────────┴────────────────────┘ Використовують разом: Grid для макету сторінки, Flexbox всередині компонентів. Grid + Flexbox приклад: .page { display: grid; grid-template-areas: "nav main"; } .nav { display: flex; flex-direction: column; gap: 8px; } .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
👁 Результат:
✕
← Попередній урок
Наступний урок →