Все курсы

Курс по современной вёрстке

Курс по современной вёрстке, цель которого – сделать процесс вёрстки лёгким и понятным, научить создавать компоненты и избегать распространённых ошибок.

Современная вёрстка

О курсе

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 или быстрее для видео.

Преподаватель

Photo
Герман СемикозовВедёт курс с 9 апреля 2021

Занимаюсь современной frontend-разработкой c 2013 года.

Работаю в Paxful – аналог и главный конкурент Coinbase, площадка для операций с криптовалютой, отвечаю за UI часть публичной и внутренней части продукта. Кроме того, разрабатывал внутрикорпоративный CSS-фреймворк и конструктор лендингов.

Основной интерес – разработка и имплементация дизайн-систем, создание библиотек переиспользуемых компонентов. Ориентируюсь на принципы atomic design.

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, указав причину из этого списка и что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами (Яндекс, Мейл.ру и другие).

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт.
  • Для зарубежных компаний выдаём инвойс на английском языке.
  • Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.
  • Сведения о нас (для бухгалтерии): скачать архив с документами.

Подписаться на уведомления по курсу

Набор на этот курс проходит раз в 1-1.5 месяца. Вы можете запросить уведомление:

Мы рассылаем уведомления только когда вы их запрашиваете, вы можете отказаться в любой момент. Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности.

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.