[learn.javascript] Курс по современной вёрстке (Герман Семикозов)

Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок. HTML/CSS — технология, которую легко освоить «по верхам», выучить основные теги и свойства, и что-то сразу можно создавать. Многие разработчики так и делают.
Цель этого курса — научить не просто свойствам, а правильным подходам к вёрстке, включая организацию кода, стилей, совместимость с мобильными устройствами и многое другое.
Курс продвинутый, поэтому лучше приходить не с нулевыми знаниями. Хотя и с нуля возможно, мы дадим основы вёрстки дадим до курса, во вводных материалах, они простые, но нужно будет внимательно посмотреть.
Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, больше уметь сами в этой области.
Продолжительность
Курс идёт около 1 месяца
Программа курса
Блок 1
Основы современной вёрстки
Начнём с проверки понимания и нюансов использования базовых CSS-свойств, основ, которые вы посмотрели дома по вводным материалам.
Далее разберём компонентную структуру веб-страницы с точки зрения HTML/CSS, подходы к организации и архитектуре CSS-кода: БЭМ, Atomic CSS и др.
Изучим основы адаптивной вёрстки, единицы измерения. Темизацию на основе CSS-переменных.
Компоненты:
Кнопка (button).
Подсказка (tooltip).
«Аккордеон» (accordion).
Блок 2
Современная адаптивная вёрстка
Разберем различные способы верстки: статическую, резиновую, адаптивную и разницу между ними.
Современные подходы к верстке: flex.
Современные подходы к верстке: grid.
Верстка для разных экранов, viewport устройства.
Медиазапросы (@ media).
Изображения. Методы добавления изображений на страницу — плюсы, минусы и ограничения каждого (background-image, img и object). Способы оптимизации загрузки, поддержка разных разрешений.
Компоненты:
Календарь.
Гистограмма.
Аватар пользователя.
Модальное окно.
Блок 3
Верстка форм
Для заказа пиццы нужно оставить свой номер телефона, а для оплаты картой — ее реквизиты: «заполнить форму». Этот процесс должен быть красивым, удобным, понятным для пользователя. Разберем структуру формы и составляющих ее элементов, изучим нюансы правильной верстки формы.
Компоненты:
Поле ввода.
Радио.
Чекбокс.
Многострочное поле ввода.
Кнопка.
Вкладки (tabs).
Блок 4
Анимация
Научимся по-разному анимировать элементы интерфейса без использования JavaScript, профилировать анимацию, чтобы сделать её красивой и плавной.
Анимация: transition.
Анимация: keyframes.
Профилирование анимаций. “Тяжелые” для анимирования свойства.
Flip-анимации.
Компоненты:
Скелетон.
Спиннер.
Анимация гистограммы, аккордеона, всплывающей подсказки.
Блок 5
Сборка, пре- и постпроцессоры
ВАЖНО: Завершающий раздел по сборке проекта автором не выдавался.