spinner-it

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

Старт навчання
Старт курсу запитуйте в адміністрації
36 год. по 2-3 рази на тиждень

Опис курсу

На курсі «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

* Примітка: зазначені знижки не сумуються з іншими діючими акціями та спеціальними пропозиціями. Знижка застосовується тільки до нових заявок та при умові повної оплати курсу. Якщо у Вас виникли питання, звертайтеся за консультацією до наших менеджерів!