Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
homework7-8.zip
readme.md

readme.md

Урок 7-8

Домашнее задание:

Сверстать макет Pingbuller:

  1. Верстка должна быть резиновой, в архиве есть несколько макетов, демонстрирующих как должен выглядеть сайт при разной ширине экрана. Нужно использовать подход Responsive дизайна
  2. Верстка должна быть с пиксельной точностью
  3. Для иконок в фиолетовом блоке с колонками "About our company" нужно использовать спрайт
  4. Нужно использовать html5-теги
  5. html-сруктуру, названия классов и стилизацию делаем с помощью методологии БЭМ
  6. Слайдер только верстаем, никаких плагинов прикручивать не надо. Стрелки слайдера можете не делать
  7. Макет должен хорошо выглядеть для диапазона экранов от 320px до 1920px. Максимальная ширина самого контента - 960px

Полезные ссылки:

  1. Самые простые техники адаптивной верстки
  2. Адаптивный и мобильный дизайн с CSS3 Media Queries
  3. Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы
  4. Спрайты: меньше картинок — больше скорость
  5. Лесенка спрайтов — сложный случай поклейки
  6. CSS спрайты: основные техники и полезные инструменты
  7. Наглядное сравнение JPEG и PNG
  8. PNG — not GIF!
  9. Оптимизация PNG и JPEG без потери качества. Часть 1
  10. Оптимизация PNG и JPEG без потери качества. Часть 2
  11. Сохранение изображений для веб
  12. Базовая оптимизация JPEG
  13. Color quantizer. Основные опции
  14. Оптимизация GIF и PNG-8
  15. Оптимизация графики для Retina-экранов - очень доступно рассказано о ретина-экранах
  16. Изображения в верстке. Хватит это терпеть
  17. Головокружительное погружение в БЭМ
  18. Вёрстка независимыми блоками
  19. Способы организации CSS-кода
  20. Bootstrap
  21. pure.css
  22. 30 CSS-фреймворков для адаптивного веб-дизайна

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

Вместо обычного спрайта иконки сделать векторными. У кого нет Adobe Illustrator можно использовать онлайн-сервис для конвертации png в svg. При желании можно пойти ещё дальше, и сделать svg-спрайт или шрифтовые иконки.

  1. SVG Sprites and Icon Systems Are Super
  2. Сервис для генерации шрифтовых иконок
  3. Шрифтовые иконки и сервис IcoMoon
  4. Десять причин нашего перехода с иконочного шрифта на SVG
  5. Адаптивные изображения: переключение разрешений