Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
design
dist
html
img
js
styles
gruntfile.js
index.html
package.json
readme.md

readme.md

Финальный экзамен

Сделать макет

  1. Кроссбраузерность IE8+
  2. Пиксельная точность для Chrome latest
  3. Верстка должна быть responsive, там есть три макета для разных девайсов. "Mobile first"
  4. Подключить нестандартные шрифты, сами файлы есть в папке fonts. Можно использовать GoogleFonts
  5. Использовать препроцессор на ваш выбор
  6. Применить BEM
  7. Никакого Bootstrap или Pure
  8. Максимально использовать возможности HTML5 и CSS3, но в рамках кроссбраузерности
  9. Применить подход gracefull degradation
  10. Все файлы должны собираться с помощью grunt
  11. На макете есть слайдеры, их нужно сделать с помощью jQuery-плагина
  12. В нижней части макета есть блок картинок (будем называть его плиткой) с заголовком "Discover holiday activity ideas". Их нужно расположить с помощью плагина Masonry, либо с помощью Isotope, либо взять любой другой аналог
  13. Сами картинки нужно взять с помощью ajax-запроса с сервиса или с любого другого сервиса для поиска картинок
  14. После блока "плитки" есть поле поиска. При введении в поле текста и нажатии кнопки "Search partners" нужно отправить запрос на получение картинок с нашего сервиса, и заменить картинки в плитке на новые, соответствующие нашему запросу. Можно использовать шаблонизатор и заново проинициализировать masonry. В качестве текста для каждой картинки можно использовать поле word из ответа сервера
  15. При первой загрузке страницы в плитке должны выводиться случайные картинки

Бонусное задание:

  1. Для сборки вместо grunt использовать gulp
  2. Настроить сжатие картинок с помощью сборщика
  3. Сделать спрайты с помощью сборщика
  4. Сделать поддержку ретины
  5. Сделать все с помощью чистого js, без использования jQuery. Masonry это позволяет, слайдер без jQuery можно найти

Успехов!

решение

Выполнены все пятнадцать пунктов основного задания.

  1. В качесте сервиса картинок использован Flicr.
  2. Для вывода "плитки" используется плагин masonry v3, обеспечивающий полную совместимость с IE8.
  3. Реализовано бонусное задание №2.
  4. Посмотреть результат можно здесь