Лекция 9.
DevTools и тестирование UI

Во лекции мы поговорим о том, что такое клиентская часть приложения, зачем она нужна и какие можно выделить особенности тестирования клиентской части веб приложений.
Лекция 9
В данном видео рассмотрены следующие темы:
  • Что такое HTML, CSS, Javascript
  • Разбор html тегов
  • Применение css правил
  • Пример работы с javascipt
  • Тестирование клиентской части (Perfect Pixel)
  • PageRuler
  • Window Resizer
  • Чек-лист проверки UI сайта
Лекция 9. Тестируем клиентскую часть
Практическая часть 1
В данном видео мы с нуля создадим страницу сайта с использованием HTML и CSS.
Практика. Работа с HTML и CSS
Практическая часть 2
В данном видео мы научимся работать с HTML и CSS валидаторами.
Практика. Работа с HTML и CSS валидаторами
Практическая часть 3
Знакомимся с DevTools
Принципы работы с DevTools
Полезные ссылки:
  • Ссылка на сайт с кнопкой Player (из лекции) здесь.
  • CSS валидатор здесь.
  • HTML валидатор здесь.
  • Скачать Notepad++ можно здесь.
Домашнее задание 1

Ваша задача будет создать html страницу, которая должна содержать следующие:
  • Заголовок
  • Подзаголовок
  • Название, которое будет отображаться в шапке браузера
  • Список (нумерацию элементов)
  • Несколько абзацев
  • Картинку

Для страницы необходимо применить CSS стили:
  • Цвет фона
  • Цвет текста заголовка
  • Цвет текста абзацев
  • Отступы от края страницы (падинги)

Ментору на проверку вам необходимо выслать архив, который будет содержать минимум следующие файлы:
  • html
  • css
Отправка домашнего задания
Домашнее задание 2
На сайте https://www.surfcoffee.ru/ необходимо найти:

1) Теги, в которых обозначены картинки из блока Новые споты (выделены красным на скриншоте):

2) Для кнопок (внизу страницы) необходимо узнать цвет фона кнопки и текста (background color и color) :

3) Для отмеченной области меню необходимо узнать padding:

4) Для отмеченной области необходимо узнать размер картинки:

5) Разверните Меню и узнайте ширину блока (меню) и стиль текста (названия пунктов меню)

6) Покажите, где в HTML верстке указана ссылка, по которой перейдет пользователь при клике на пункт меню "Вопросы по лицензии серфера"

Отправка домашнего задания
Сделайте скриншоты экрана, где будут выделены искомые HTML блоки.
Домашнее задание 3
У вас есть чек-лист с требованиями к отображению сайта Archsyntaxis

Ваша задача - прогнать чек-лист и поставить статус каждой проверке (Passed либо Failed).
В случае, если статус проверки Failed - создайте баг в баг-трекинговой системе (например, Trello) и прикрепите ссылку на него в колонку Комментарии в чек-листе.

Ссылка на чек-лист здесь (сделайте копию на свой диск, данный лист будет доступен только НА ЧТЕНИЕ)

Отправка домашнего задания
Обсудим урок?
Показать комментарии