Курс по современной вёрстке [learn.javascript.ru]

Курс по современной вёрстке [learn.javascript.ru] Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок. 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 Сборка, пре- и постпроцессоры Разберём, как пишется и собирается код в современных проектах, пре- и постпроцессоры на основе postCSS, поддержку css-свойств в разных браузерах, современные средства сборки CSS, автопрефиксер и минификацию.