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