Курс по современной вёрстке
Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок.
HTML/CSS - технология, которую легко освоить "по верхам", выучить основные теги и свойства, и что-то сразу можно создавать. Многие разработчики так и делают.
Цель этого курса - научить не просто свойствам, а правильным подходам к вёрстке, включая организацию кода, стилей, совместимость с мобильными устройствами и многое другое.
Мы также изучаем построение страницы в целом и различных интерфейсных компонент, нюансы их создания и стилизации, которые делают их удобнее для пользователей.
Многочисленные аспекты вёрстки мы будем изучать в процессе построения библиотеки компонент.
Курс продвинутый, поэтому лучше приходить не с нулевыми знаниями. Хотя и с нуля возможно, мы дадим основы вёрстки дадим до курса, во вводных материалах, они простые, но нужно будет внимательно посмотреть.
Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, больше уметь сами в этой области.
Курс идёт около 1 месяца.
До начала обучения: вводные материалы:
Перед курсом мы попросим вас посмотреть лекции и материалы и выполнить "нулевое" домашнее задание по основам HTML/CSS. Это очень просто.
Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.
Онлайн-занятия с преподавателем 2 раза в неделю:
Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.
Домашние задания, обратная связь по ним:
Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных шаблонов проектирования, даёт обратную связь. К ряду заданий прилагаются тесты, которые частично позволяют проверить правильность решения самому.
Чат:
Между занятиями доступен групповой чат для общения и вопросов преподавателю.
Курсовой проект:
На этом курсе мы делаем курсовой проект: библиотеку компонент. Большую часть вёрстки вы сделаете сами.
Результат:
Вы умеете создавать расширяемые интерфейсные компоненты, удобные для вставки и в большие и в маленькие проекты.
Вы умеете правильно создавать общий "лэйаут" страницы.
Вы умеете адаптивно верстать под разные современные браузеры и устройства.
Вы в курсе современных подходов к CSS-разработке, тенденций развития CSS и HTML.
БЛОК 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, автопрефиксер и минификацию.
Библиотека компонент:
Интернет 256kb/s или быстрее для видео.
Герман Семикозов. Ведёт курс с 9 апреля 2021. Занимаюсь современной frontend-разработкой c 2013 года. Основной интерес – разработка и имплементация дизайн-систем, создание библиотек переиспользуемых компонентов. Ориентируюсь на принципы atomic design.
Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний. Все отзывы являются честными. Мы не модерируем их.
Курс регулярно обновляется. Все отзывы относятся к последней версии курса.
Если объяснения будут вам непонятны
Если курсы не дадут вам новых знаний и умений
Если вы не сможете подключиться к системе онлайн-обучения
…то вы сможете получить деньги назад.
Для этого достаточно не позже окончания первой недели курса, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.
Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок.
HTML/CSS - технология, которую легко освоить "по верхам", выучить основные теги и свойства, и что-то сразу можно создавать. Многие разработчики так и делают.
Цель этого курса - научить не просто свойствам, а правильным подходам к вёрстке, включая организацию кода, стилей, совместимость с мобильными устройствами и многое другое.
Мы также изучаем построение страницы в целом и различных интерфейсных компонент, нюансы их создания и стилизации, которые делают их удобнее для пользователей.
Многочисленные аспекты вёрстки мы будем изучать в процессе построения библиотеки компонент.
Курс продвинутый, поэтому лучше приходить не с нулевыми знаниями. Хотя и с нуля возможно, мы дадим основы вёрстки дадим до курса, во вводных материалах, они простые, но нужно будет внимательно посмотреть.
Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, больше уметь сами в этой области.
Курс идёт около 1 месяца.
До начала обучения: вводные материалы:
Перед курсом мы попросим вас посмотреть лекции и материалы и выполнить "нулевое" домашнее задание по основам HTML/CSS. Это очень просто.
Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.
Онлайн-занятия с преподавателем 2 раза в неделю:
Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.
Домашние задания, обратная связь по ним:
Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных шаблонов проектирования, даёт обратную связь. К ряду заданий прилагаются тесты, которые частично позволяют проверить правильность решения самому.
Чат:
Между занятиями доступен групповой чат для общения и вопросов преподавателю.
Курсовой проект:
На этом курсе мы делаем курсовой проект: библиотеку компонент. Большую часть вёрстки вы сделаете сами.
Результат:
Вы умеете создавать расширяемые интерфейсные компоненты, удобные для вставки и в большие и в маленькие проекты.
Вы умеете правильно создавать общий "лэйаут" страницы.
Вы умеете адаптивно верстать под разные современные браузеры и устройства.
Вы в курсе современных подходов к CSS-разработке, тенденций развития CSS и HTML.
БЛОК 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, автопрефиксер и минификацию.
Библиотека компонент:
Интернет 256kb/s или быстрее для видео.
Герман Семикозов. Ведёт курс с 9 апреля 2021. Занимаюсь современной frontend-разработкой c 2013 года. Основной интерес – разработка и имплементация дизайн-систем, создание библиотек переиспользуемых компонентов. Ориентируюсь на принципы atomic design.
Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний. Все отзывы являются честными. Мы не модерируем их.
Курс регулярно обновляется. Все отзывы относятся к последней версии курса.
Если объяснения будут вам непонятны
Если курсы не дадут вам новых знаний и умений
Если вы не сможете подключиться к системе онлайн-обучения
…то вы сможете получить деньги назад.
Для этого достаточно не позже окончания первой недели курса, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.
Скрытое содержимое могут видеть только пользователи групп(ы): VIP