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

* Примечание: указанные скидки не суммируются с другими действующими акциями и специальными предложениями. Скидка применяется только к новым заявкам и при условии полной оплаты. Если у Вас возникли вопросы, обращайтесь за консультацией к нашим менеджерам!