Тестовое задание верстальщику

Последнее обновление: 20 мая, 2021

Для выполнения задач тестовое пространство будет предоставлено. Запрашивайте индивидуально.

Задача 1: popup с формой

  • Страница с белым фоном.
  • На странице произвольным шрифтом который не предустановлен по умолчанию в ОС Windows (можно подключать любой шрифт Google) 888 раз написано словосочетание «test task #1 «. Словосочетание вывести в цикле через php.
  • Перед текстом в произвольной форме размещены:
    1. Кнопка (button) с текстом «УТП 1»
    2. Ссылка «УТП 2»
    3. span «УТП 3»

клик по которым должен приводить к вызову popup-окна с формой. В форме должно быть скрытое поле, которое собирает информацию о том, по какому из элементов был совершен клик.

  • Клик вне формы или по крестику закрытия окна формы должен приводить к закрытию формы.
  • В форме должно быть 2 видимых поля (имя и телефон), а также чекбокс согласия с правилами конфиденциальности. Поле телефона и чекбокс должны быть обязательными для заполнения. При наличии решения по валидации/контроля заполненности следует прикрепить обычно используемое/рекомендуемое Вами решение.
  • В конце страницы вставить текст «Все права защищены, 2019-2021», причем второе число должно подтягиваться автоматически (php date Y).

Задача 2: сборка страниц через include

  • Создать 4 страницы которые должны отображаться по адресам (значком * помечаю что до адреса — путь к Вашему тестовому пространству):
    1. */
    2. */page/
    3. */thanks/
    4. */other/
  • На каждой из 4х страниц вывести произвольный тематический уникальный заголовок Н1.
  • Создать php файл с навигацией по страницам. Подключить этот файл с навигацией ко всем 4м страницам (php include) таким образом, чтобы навигация работала на всех 4х страницах корректно.

Задача 3: карточка товара (отверстать адаптивно)

в процессе.

Задача 4: одноэкранный адаптивный сайт

в процессе

Суть задачи: сверстать на первый взгляд простую страницу, так чтобы она была 100% в высоту на любом из используемых устройств.

Сложность: нужно учитывать особенность устройств на iOS и Android, в т.ч. поведение нижней/верхней панели управления браузера.

подложка андроид + iOS

Задача 5: pixel perfect

в процессе

Сверстать страницу pixel perfect. При сдаче работы указать, какую именно программу использовали.

Вариант (просто вариант, не рекомендация) — плагин для хрома: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nostrum!