HTML + CSS для дизайнерів
Опис курсу
На курсі «HTML+CSS для Дизайнерів» ви отримаєте знання, які допоможуть вам упевнено розробляти дизайн макети та втілювати сміливі й нестандартні рішення.
—
На курсі ви зможете засвоїти фундаментальні знання «HTML+CSS», зрозуміти, як влаштована структура вебсторінок та отримати базу для самостійного розвитку після завершення курсу. Результатом навчання стане набір компонентів, які ви зробите самостійно.
Після курсу Ви зможете:
- Краще розуміти, як підготувати макет до верстки
- Створювати сторінки сайтів та стилізувати їх згідно з макетом
- Розбиратися у верстці під десктопні та мобільні пристрої
- Створювати нестандартні сітки для сучасного дизайну
- Працювати з адаптивними зображеннями
- Розуміти та працювати з адаптивною типографікою
- Обирати та під’єднувати кастомні вебшрифти
- Розуміти принципи втілення дизайн-систем
- Розуміти логіку створення світлої/темної тем сайту (Light / Dark Mode)
- Розбиратися в принципах анімації елементів сторінки
Програма курсу:
1. Вступ до вебтехнологій
- Стек розробки для сайту
- Редактор коду й IDE
- Взаємодія HTML & CSS & JS
2. Що таке HTML?
- Основні поняття
- Знайомство з поняттям тегу й атрибуту
- Обов'язкова структура будь-якої вебсторінки
- Робота з посиланнями та якорями
- Як вивести зображення, відео, аудіо
3. Що таке CSS?
- Основні поняття
- Звідки беруться стилі в браузері
- Правила написання стилів
- Селектори, властивості, значення властивостей
- Відносні та статичні одиниці вимірювання в CSS
- Блокова модель (CSS Box Model)
- Робота з відступами та розмірами елементів
4. Підготовка до верстки
- Вивчаємо макет та плануємо верстку
- Скидання стилів (Підходи й чому це важливо)
- Як підключити шрифти (Google Fonts або свій шрифт)
5. Основні поняття вебтипографіки
- Властивості для роботи з текстом
- Взаємозалежність властивостей упродовж роботи з текстом
- Робота зі шрифтами (сімейства, стилі, розміри, насиченість)
6. Основи вебверстки
- Семантична розмітка
- Що таке потік (flow), блокові та строкові елементи
- Що таке позиціювання елементів та як воно працює?
7. Основи адаптивної вебверстки
- Адаптивна типографіка, відступи
- Одиниці виміру: vh, vw, vmin, vmax, em, rem
- Що таке медіазапити, якими вони бувають і як їх використовувати
- CSS Container Queries
- Адаптивні зображення, сучасні формати (PNG, JPEG, AVIF, WebP)
- Корисні прийоми та лайфхаки для адаптивної верстки
8. Сучасна вебверстка
- Робота з різними системами кольорів (RGB/RGBA, HEX, HSL/HSLA)
- Робота з фоном, масками, градієнтами
- Робота із SVG графікою (фони, іконки, ілюстрації)
- Спецефекти: тіні, округлення кутів, ефекти при наведенні
- Робота з анімацією елементів
9. Сучасна вебверстка. FlexBox Layout Model
- Flex-контейнер, елементи Flex-контейнеру
- Робота з горизонтальним і вертикальним вирівнюванням
- Побудова горизонтального меню
10. Сучасна вебверстка. Grid Layout
- Побудова сітки (Grid columns / Grid rows)
- Робота з горизонтальним і вертикальним вирівнюванням
- Об'єднання елементів
- Методи роботи з елементами сітки
- Побудова нестандартної галереї
11. Сучасна вебверстка. Змінні в CSS (Custom Properties)
- Базові принципи створення дизайн токенів для дизайн-систем за допомогою змінних CSS
- Стилізація компонентів за допомогою змінних CSS
- Світла та темна теми (Light / Dark Mode)
12. Створення компонентів
13. Методологія BEM
- Правила іменування класів
- Верстка незалежними блоками
14. Перевірка підтримки браузерами сучасних вебтехнологій (Can I Use)
15. Бібліотека Bootstrap
Мінімальні вимоги:
- Редактор коду Visual Studio Code / Atom / Sublime
- Графічний редактор Figma
- Браузер Chrome/Firefox
* Примітка: зазначені знижки не сумуються з іншими діючими акціями та спеціальними пропозиціями. Знижка застосовується тільки до нових заявок та при умові повної оплати курсу. Якщо у Вас виникли питання, звертайтеся за консультацією до наших менеджерів!