Frontend и тестирование верстки
Изучите, как тестировать фронтенд: от основ HTML, CSS и JavaScript до поиска UI/UX-ошибок и проверки соответствия макетам.
О модуле
Модуль «Frontend и тестирование верстки» учит вас проверять клиентскую часть веб-приложений.
Вы научитесь находить типичные ошибки верстки, проблемы с интерфейсом и несоответствия дизайну. Эти навыки критически важны, потому что большинство багов, которые видит пользователь, находятся именно на фронтенде.
В рамках модуля мы разберём основы HTML, CSS и JavaScript на уровне тестировщика, типовые проблемы верстки, адаптивность и кроссбраузерность. Эти знания используются на реальных проектах при проведении UI-тестирования и составлении подробных баг-репортов.
Вы научитесь находить типичные ошибки верстки, проблемы с интерфейсом и несоответствия дизайну. Эти навыки критически важны, потому что большинство багов, которые видит пользователь, находятся именно на фронтенде.
В рамках модуля мы разберём основы 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-свойств, шрифтов, цветов и отступов в реальном времени
Есть вопросы? Напиши нам на почту — нажми на кнопку и задай любые интересующие тебя вопросы.
