Все курсы

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

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

Современная вёрстка
Ближайшая группа
Перейти к записи

О курсе

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

Что говорят о курсе участники?

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

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

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

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

Для компаний

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

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

Если остались вопросы – посмотрите в часто задаваемых, напишите в комментариях внизу этой страницы или на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии

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