added lesson8-9

Author: olegzmiuk

lesson_07-8/homework7-8.zip

@@ -0,0 +1,46 @@
+# Урок 7-8
+
+Домашнее задание:
+
+Сверстать [макет Pingbuller](/lesson_07-8/homework7-8.zip):
+
+1. Верстка должна быть адаптивной, в архиве есть несколько макетов, демонстрирующих как должен выглядеть сайт при разной ширине экрана
+2. Верстка должна быть с пиксельной точностью
+3. Для иконок в фиолетовом блоке с колонками "About our company" нужно использовать спрайт
+4. Нужно использовать html5-теги
+5. html-сруктуру, названия классов и стилизацию делаем с помощью методологии БЭМ
+
+Полезные ссылки:
+
+1. [Самые простые техники адаптивной верстки](http://habrahabr.ru/post/144003/)
+2. [Адаптивный и мобильный дизайн с CSS3 Media Queries](http://habrahabr.ru/post/119127/)
+3. [Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы](https://te-st.ru/2013/07/11/adaptive-web-design/)
+4. [Спрайты: меньше картинок — больше скорость](http://xiper.net/collect/html-and-css-tricks/overclock-site/sprite)
+5. [Лесенка спрайтов — сложный случай поклейки](http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprites-ladder.html)
+6. [CSS спрайты: основные техники и полезные инструменты](http://habrahabr.ru/post/159027/)
+7. [Наглядное сравнение JPEG и PNG](http://geektimes.ru/post/118026/)
+8. [PNG — not GIF!](http://habrahabr.ru/post/130472/)
+9. [Оптимизация PNG и JPEG без потери качества. Часть 1](http://habrahabr.ru/post/119009/)
+10. [Оптимизация PNG и JPEG без потери качества. Часть 2](http://habrahabr.ru/post/121096/)
+11. [Сохранение изображений для веб](http://xiper.net/learn/photoshop/saving-images-for-the-web)
+12. [Базовая оптимизация JPEG](http://xiper.net/learn/photoshop/optimization-jpeg)
+13. [Color quantizer. Основные опции](http://www.xiper.net/learn/soft-for-colder/graphics/color-quantizer-basic-options.html)
+14. [Оптимизация GIF и PNG-8](http://www.xiper.net/learn/photoshop/optimization-gif-and-png-8.html)
+15. [Оптимизация графики для Retina-экранов](http://habrahabr.ru/post/150071/) - очень доступно рассказано о ретина-экранах
+16. [Изображения в верстке. Хватит это терпеть](http://habrahabr.ru/post/231295/)
+17. [Головокружительное погружение в БЭМ](http://frontender.info/MindBEMding/)
+18. [Вёрстка независимыми блоками](http://noteskeeper.ru/527/)
+19. [Способы организации CSS-кода](http://habrahabr.ru/post/256109/)
+20. [Bootstrap](http://getbootstrap.com/)
+21. [pure.css](http://purecss.io/)
+
+
+Бонусное задание:
+
+Вместо обычного спрайта иконки сделать векторными. У кого нет Adobe Illustrator можно использовать [онлайн-сервис](http://image.online-convert.com/ru/convert-to-svg) для конвертации png в svg.
+При желании можно пойти ещё дальше, и сделать svg-спрайт или шрифтовые иконки.
+
+1. [SVG Sprites and Icon Systems Are Super](https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/)
+2. [Сервис для генерации шрифтовых иконок](http://fontello.com/)
+3. [Шрифтовые иконки и сервис IcoMoon](http://zencoder.ru/css-icomoon/)
+4. [Десять причин нашего перехода с иконочного шрифта на SVG](http://frontender.info/ten-reasons-we-switched-from-an-icon-font-to-svg/)