Программирование [learn.javascript.ru] Курс по современной вёрстке (2022)

[RoBot]

Описание [learn.javascript.ru] Курс по современной вёрстке (2022):

Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок. 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, автопрефиксер и минификацию.​

Подробнее:

Скачать курс - [learn.javascript.ru] Курс по современной вёрстке (2022):