Курс HTML + CSS для дизайнерів

На курсі "HTML+CSS для Дизайнерів" ви отримаєте знання, які допоможуть вам упевнено розробляти дизайн макети та втілювати сміливі й нестандартні рішення. На курсі ви зможете засвоїти фундаментальні знання "HTML+CSS", зрозуміти, як влаштована структура вебсторінок та отримати базу для самостійного розвитку після завершення курсу. Результатом навчання стане набір компонентів, які ви зробите самостійно.

Програма курсу

Вступ до вебтехнологій

• Стек розробки для сайту
• Редактор коду й IDE
• Взаємодія HTML & CSS & JS

Що таке HTML?

• Основні поняття
• Знайомство з поняттям тегу й атрибуту
• Обов'язкова структура будь-якої вебсторінки
• Робота з посиланнями та якорями
• Як вивести зображення, відео, аудіо

Що таке CSS?

• Основні поняття
• Звідки беруться стилі в браузері
• Правила написання стилів
• Селектори, властивості, значення властивостей
• Відносні та статичні одиниці вимірювання в CSS
• Блокова модель (CSS Box Model)
• Робота з відступами та розмірами елементів

Підготовка до верстки

• Вивчаємо макет та плануємо верстку
• Скидання стилів (Підходи й чому це важливо)
• Як підключити шрифти (Google Fonts або свій шрифт)

Основні поняття вебтипографіки

• Властивості для роботи з текстом
• Взаємозалежність властивостей упродовж роботи з текстом
• Робота зі шрифтами (сімейства, стилі, розміри, насиченість)

Основи вебверстки

• Семантична розмітка
• Що таке потік (flow), блокові та строкові елементи
• Що таке позиціювання елементів та як воно працює?

Основи адаптивної вебверстки

• Адаптивна типографіка, відступи
• Одиниці виміру: vh, vw, vmin, vmax, em, rem
• Що таке медіазапити, якими вони бувають і як їх використовувати
• CSS Container Queries
• Адаптивні зображення, сучасні формати (PNG, JPEG, AVIF, WebP)
• Корисні прийоми та лайфхаки для адаптивної верстки

Сучасна вебверстка

• Робота з різними системами кольорів (RGB/RGBA, HEX, HSL/HSLA)
• Робота з фоном, масками, градієнтами
• Робота із SVG графікою (фони, іконки, ілюстрації)
• Спецефекти: тіні, округлення кутів, ефекти при наведенні
• Робота з анімацією елементів

Сучасна вебверстка. FlexBox Layout Model

• Flex-контейнер, елементи Flex-контейнеру
• Робота з горизонтальним і вертикальним вирівнюванням
• Побудова горизонтального меню

Сучасна вебверстка. Grid Layout

• Побудова сітки (Grid columns / Grid rows)
• Робота з горизонтальним і вертикальним вирівнюванням
• Об'єднання елементів
• Методи роботи з елементами сітки
• Побудова нестандартної галереї

Сучасна вебверстка. Змінні в CSS (Custom Properties)

• Базові принципи створення дизайн токенів для дизайн-систем за допомогою змінних CSS
• Стилізація компонентів за допомогою змінних CSS
• Світла та темна теми (Light / Dark Mode)

Створення компонентів

Методологія BEM

• Правила іменування класів
• Верстка незалежними блоками

Перевірка підтримки браузерами сучасних вебтехнологій (Can I Use)

Бібліотека Bootstrap

Мінімальні вимоги

• Редактор коду Visual Studio Code/Atom/Sublime
• Графічний редактор Figma
• Браузер Chrome/Firefox

Особливості курсу

• Заняття 2-3 рази на тиждень
• Можливість оплати частинами
• Знижка -10% на наступний курс