О модуле

Модуль «Frontend и тестирование верстки» учит вас проверять клиентскую часть веб-приложений.

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

В рамках модуля мы разберём основы HTML, CSS и JavaScript на уровне тестировщика, типовые проблемы верстки, адаптивность и кроссбраузерность. Эти знания используются на реальных проектах при проведении UI-тестирования и составлении подробных баг-репортов.

Основы HTML, CSS, JavaScript (на уровне тестировщика)

Вы изучите:

  • Основные теги и структуру HTML
  • Как работают CSS и каскад стилей
  • JavaScript на уровне понимания поведения элементов (без глубокого программирования)

UI и UX-ошибки

Разберём самые частые проблемы:
  • Несоответствие цветов, шрифтов и отступов
  • Проблемы с удобством использования (UX)
  • Логические ошибки интерфейса

Типовые проблемы верстки

Вы научитесь находить:
  • Смещение элементов
  • Проблемы с отступами и выравниванием
  • Ошибки при наложении слоёв (z-index)
  • Некорректное отображение текста и изображений

Типовые проблемы верстки

Вы научитесь находить:
  • Смещение элементов
  • Проблемы с отступами и выравниванием
  • Ошибки при наложении слоёв (z-index)
  • Некорректное отображение текста и изображений

Адаптивность и кроссбраузерность

Разберём:
  • Как проверять отображение сайта на разных разрешениях экрана (мобильные устройства, планшеты, десктоп)
  • Проверку в разных браузерах (Chrome, Firefox, Safari, Edge)
  • Типичные баги адаптивной верстки

Инструменты

Вы познакомитесь с основными инструментами тестировщика фронтенда:
  • DevTools браузера — главный инструмент для анализа верстки
  • Проверка CSS-свойств, шрифтов, цветов и отступов в реальном времени

Практика

UI-аудит сайта

Вы научитесь проводить полный визуальный аудит интерфейса.

Составление баг-репортов по верстке

Вы освоите:
  • Как правильно описывать UI-баги
  • Прикреплять скриншоты и видео
  • Указывать шаги воспроизведения и ожидаемый результат

Сравнение с макетами (Figma)

Вы научитесь:
  • Сравнивать реальную верстку с дизайном в Figma
  • Находить даже мелкие pixel-perfect расхождения
  • Проверять адаптивные версии макетов
  • После прохождения модуля вы сможетеУверенно работать с DevTools для анализа верстки
  • Находить UI и UX-ошибки любой сложности
  • Проверять адаптивность и кроссбраузерность
  • Сравнивать верстку с макетами в Figma
  • Составлять качественные баг-репорты по фронтенду
  • Проводить полный UI-аудит веб-приложений
После прохождения модуля вы сможете
Вы познакомитесь с основными инструментами тестировщика фронтенда:
  • DevTools браузера — главный инструмент для анализа верстки
  • Проверка CSS-свойств, шрифтов, цветов и отступов в реальном времени
Made on
Tilda