Robot
Складчик
- #1
[learn.javascript.ru] Курс по современной вёрстке [Герман Семикозов]
- Ссылка на картинку
HTML/CSS - технология, которую легко освоить "по верхам", выучить основные теги и свойства, и что-то сразу можно создавать. Многие разработчики так и делают.
Цель этого курса - научить не просто свойствам, а правильным подходам к вёрстке, включая организацию кода, стилей, совместимость с мобильными устройствами и многое другое.
Мы также изучаем построение страницы в целом и различных интерфейсных компонент, нюансы их создания и стилизации, которые делают их удобнее для пользователей. Многочисленные аспекты вёрстки мы будем изучать в процессе построения библиотеки компонент.
Курс продвинутый, поэтому лучше приходить не с нулевыми знаниями. Хотя и с нуля возможно, мы дадим основы вёрстки дадим до курса, во вводных материалах, они простые, но нужно будет внимательно посмотреть. Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, больше уметь сами в этой области.
Программа курса:
БЛОК 1
Основы современной вёрстки
Начнём с проверки понимания и нюансов использования базовых CSS-свойств, основ, которые вы посмотрели дома по вводным материалам. Далее разберём компонентную структуру веб-страницы с точки зрения HTML/CSS, подходы к организации и архитектуре CSS-кода: БЭМ, Atomic CSS и др. Изучим основы адаптивной вёрстки, единицы измерения. Темизацию на основе CSS-переменных.
Компоненты:
Современная адаптивная вёрстка
Разберем различные способы верстки: статическую, резиновую, адаптивную и разницу между ними.
Верстка форм:
Для заказа пиццы нужно оставить свой номер телефона, а для оплаты картой - ее реквизиты: "заполнить форму". Этот процесс должен быть красивым, удобным, понятным для пользователя. Разберем структуру формы и составляющих ее элементов, изучим нюансы правильной верстки формы.
Компоненты:
Анимация:
Научимся по-разному анимировать элементы интерфейса без использования JavaScript, профилировать анимацию, чтобы сделать её красивой и плавной.
Сборка, пре- и постпроцессоры
Разберём, как пишется и собирается код в современных проектах, пре- и постпроцессоры на основе postCSS, поддержку css-свойств в разных браузерах, современные средства сборки CSS, автопрефиксер и минификацию.
Цель этого курса - научить не просто свойствам, а правильным подходам к вёрстке, включая организацию кода, стилей, совместимость с мобильными устройствами и многое другое.
Мы также изучаем построение страницы в целом и различных интерфейсных компонент, нюансы их создания и стилизации, которые делают их удобнее для пользователей. Многочисленные аспекты вёрстки мы будем изучать в процессе построения библиотеки компонент.
Курс продвинутый, поэтому лучше приходить не с нулевыми знаниями. Хотя и с нуля возможно, мы дадим основы вёрстки дадим до курса, во вводных материалах, они простые, но нужно будет внимательно посмотреть. Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, больше уметь сами в этой области.
Программа курса:
БЛОК 1
Основы современной вёрстки
Начнём с проверки понимания и нюансов использования базовых CSS-свойств, основ, которые вы посмотрели дома по вводным материалам. Далее разберём компонентную структуру веб-страницы с точки зрения HTML/CSS, подходы к организации и архитектуре CSS-кода: БЭМ, Atomic CSS и др. Изучим основы адаптивной вёрстки, единицы измерения. Темизацию на основе CSS-переменных.
Компоненты:
- Кнопка (button).
- Подсказка (tooltip).
- "Аккордеон" (accordion).
Современная адаптивная вёрстка
Разберем различные способы верстки: статическую, резиновую, адаптивную и разницу между ними.
- Современные подходы к верстке: flex.
- Современные подходы к верстке: grid.
- Верстка для разных экранов, viewport устройства.
- Медиазапросы
- Изображения. Методы добавления изображений на страницу - плюсы, минусы и ограничения каждого (background-image, img и object). Способы оптимизации загрузки, поддержка разных разрешений.
- Календарь.
- Гистограмма.
- Аватар пользователя.
- Модальное окно.
Верстка форм:
Для заказа пиццы нужно оставить свой номер телефона, а для оплаты картой - ее реквизиты: "заполнить форму". Этот процесс должен быть красивым, удобным, понятным для пользователя. Разберем структуру формы и составляющих ее элементов, изучим нюансы правильной верстки формы.
Компоненты:
- Поле ввода.
- Радио.
- Чекбокс.
- Многострочное поле ввода.
- Кнопка.
- Вкладки (tabs).
Анимация:
Научимся по-разному анимировать элементы интерфейса без использования JavaScript, профилировать анимацию, чтобы сделать её красивой и плавной.
- Анимация: transition.
- Анимация: keyframes.
- Профилирование анимаций. “Тяжелые” для анимирования свойства.
- Flip-анимации.
- Скелетон.
- Спиннер.
- Анимация гистограммы, аккордеона, всплывающей подсказки.
Сборка, пре- и постпроцессоры
Разберём, как пишется и собирается код в современных проектах, пре- и постпроцессоры на основе postCSS, поддержку css-свойств в разных браузерах, современные средства сборки CSS, автопрефиксер и минификацию.