SlideShare ist ein Scribd-Unternehmen logo
1 von 77
Downloaden Sie, um offline zu lesen
Верстка и другие
развлечения
Юрий Артюх, SEConf, 2014
Привет!
• Меня зовут Юра	

• Я верстаю сайты	

• Давно
Зачем верстать?
проще всего начать
получать
удовольствие
можно показать
девушке
Написал код
Сверстал сайт
работать можно где-
угодно
как верстаю я
Постоянно
• 5-6 проектов одновременно	

• 10 часов в день
Текстовый редактор
!
Некоторые школы предпочитают
сверхдлинные мечи. Это слабые школы.
Они не принимают принципа «рубить врага
любыми средствами».
Они предпочитают особо длинный меч.	

Книга пяти колец, XVII век, Миямото Мусаси
Emmet
Hayaku
Emmet-Hayaku
•
https://gist.github.com/akella/9757676
Photoshop
CSS Hat
PNG Hat
Препроцессоры
Зачем они
• Чтобы работать быстрее	

• Так делают все модные пацаны (и
девчонки, ок)
Переменные
Вложенность
Свои функции
На самом деле:
+s(bigorel) - миксин
icons.png
Наследование
Чем это
компилировать
github.com/akella/sass
Методология верстки
• БЭМ
• MCSS
• UBERCSS
• PonyCSS
• WTFCSS
• MLP:FIM
плевать какая
лишь бы она была
Например БЭМ
Полезный Grunt
Что там есть
• Автоматическое тестирование
• Проверка вашего кода
• Сжатие файлов и картинок
• Автоматизация всех задач
HTML инклуды
https://github.com/alanshaw/grunt-include-replace
Сохранять только в SVG
PNG автоматически
https://github.com/filamentgroup/grunticon
Всякие модные слова
• Angular	

• Backbone	

• React	

• Responsive Web Design	

• SASS/LESS/Stylus	

• Node.js
Коммерческая верстка	

или как срубить бабла
• Почитать про все что я рассказал пару
месяцев (спросить меня что читать)	

• Сделать десяток любых сайтов используя
знания	

• Profit
занимайтесь только тем	

что вам интересно
занимайтесь только тем	

что вам интересно!
занимайтесь только тем	

что вам интересно!!
Изучайте новое каждый день
Получайте удовольствие от процесса
Идите и живите жизнь
Спасибо!
Спросите же хоть что-то!
!
Юрий Артюх
cssing.org.ua
facebook.com/akella
twitter.com/akella

Weitere ähnliche Inhalte

Was ist angesagt?

Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlexander Baumgertner
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаYandex
 
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥CodeFest
 
Павел Прищепа. Бббыстрый бэкенд на базе друпал
Павел Прищепа. Бббыстрый бэкенд на базе друпалПавел Прищепа. Бббыстрый бэкенд на базе друпал
Павел Прищепа. Бббыстрый бэкенд на базе друпалKsenia Rogachenko
 
Знакомство с ember.js
Знакомство с ember.jsЗнакомство с ember.js
Знакомство с ember.jsArtem Suschev
 
JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥ JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥ SQALab
 
практическое использование модуля Panels богуцкий виктор
практическое использование модуля Panels богуцкий викторпрактическое использование модуля Panels богуцкий виктор
практическое использование модуля Panels богуцкий викторdrupalconf
 

Was ist angesagt? (9)

Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
 
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
CodeFest 2013. Баяндин А. — JavaScript + Webdriver = ♥
 
Павел Прищепа. Бббыстрый бэкенд на базе друпал
Павел Прищепа. Бббыстрый бэкенд на базе друпалПавел Прищепа. Бббыстрый бэкенд на базе друпал
Павел Прищепа. Бббыстрый бэкенд на базе друпал
 
Знакомство с ember.js
Знакомство с ember.jsЗнакомство с ember.js
Знакомство с ember.js
 
Html5 css3 занятие 7
Html5 css3 занятие 7Html5 css3 занятие 7
Html5 css3 занятие 7
 
Playing in the browser
Playing in the browserPlaying in the browser
Playing in the browser
 
JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥ JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥
 
практическое использование модуля Panels богуцкий виктор
практическое использование модуля Panels богуцкий викторпрактическое использование модуля Panels богуцкий виктор
практическое использование модуля Panels богуцкий виктор
 

Andere mochten auch

Css part2
Css part2Css part2
Css part2ISsoft
 
Css part1
Css part1Css part1
Css part1ISsoft
 
Основы CSS.Позиционирование.
Основы CSS.Позиционирование.Основы CSS.Позиционирование.
Основы CSS.Позиционирование.n1zze
 
18. синтаксис css
18. синтаксис css18. синтаксис css
18. синтаксис cssSergei Dubrov
 
Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайтаSergei Dubrov
 
Использование css-спрайтов при верстке html-страниц
Использование css-спрайтов при верстке html-страницИспользование css-спрайтов при верстке html-страниц
Использование css-спрайтов при верстке html-страницKyrylo Melnychuk
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)Sergei Dubrov
 
основы Css позиционирование
основы Css позиционированиеосновы Css позиционирование
основы Css позиционированиеn1zze
 
Отредактированная презентация для защиты
Отредактированная презентация для защитыОтредактированная презентация для защиты
Отредактированная презентация для защитыn1zze
 
Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)Noveo
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Noveo
 
Гибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSГибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSEcommerce Solution Provider SysIQ
 
Premium-темы WordPress (Wordcamp Russia 2015)
Premium-темы WordPress (Wordcamp Russia 2015)Premium-темы WordPress (Wordcamp Russia 2015)
Premium-темы WordPress (Wordcamp Russia 2015)versusbassz
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документVasya Petrov
 
Дэвид Флэнаган — Javascript (5 издание)
Дэвид Флэнаган — Javascript (5 издание)Дэвид Флэнаган — Javascript (5 издание)
Дэвид Флэнаган — Javascript (5 издание)mlatushko
 
Робота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізаціяРобота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізаціяStfalcon Meetups
 

Andere mochten auch (20)

Css part2
Css part2Css part2
Css part2
 
Css part1
Css part1Css part1
Css part1
 
Основы CSS.Позиционирование.
Основы CSS.Позиционирование.Основы CSS.Позиционирование.
Основы CSS.Позиционирование.
 
18. синтаксис css
18. синтаксис css18. синтаксис css
18. синтаксис css
 
Bad CSS advice
Bad CSS adviceBad CSS advice
Bad CSS advice
 
CSS
CSSCSS
CSS
 
Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайта
 
Использование css-спрайтов при верстке html-страниц
Использование css-спрайтов при верстке html-страницИспользование css-спрайтов при верстке html-страниц
Использование css-спрайтов при верстке html-страниц
 
17. основы css (cascading style sheets)
17. основы css (cascading style sheets)17. основы css (cascading style sheets)
17. основы css (cascading style sheets)
 
основы Css позиционирование
основы Css позиционированиеосновы Css позиционирование
основы Css позиционирование
 
Отредактированная презентация для защиты
Отредактированная презентация для защитыОтредактированная презентация для защиты
Отредактированная презентация для защиты
 
Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)Структура HTML документа (HTML5 тема 01 - структура html документа)
Структура HTML документа (HTML5 тема 01 - структура html документа)
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
 
Гибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSSГибкость и Структурированность Oбъектно Oриентированноя CSS
Гибкость и Структурированность Oбъектно Oриентированноя CSS
 
Квест
КвестКвест
Квест
 
Premium-темы WordPress (Wordcamp Russia 2015)
Premium-темы WordPress (Wordcamp Russia 2015)Premium-темы WordPress (Wordcamp Russia 2015)
Premium-темы WordPress (Wordcamp Russia 2015)
 
Css
CssCss
Css
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
 
Дэвид Флэнаган — Javascript (5 издание)
Дэвид Флэнаган — Javascript (5 издание)Дэвид Флэнаган — Javascript (5 издание)
Дэвид Флэнаган — Javascript (5 издание)
 
Робота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізаціяРобота з CSS. Методології, інструменти, оптимізація
Робота з CSS. Методології, інструменти, оптимізація
 

Ähnlich wie Верстка и другие развлечения, Seconf

Сучасні підходи у верстці
Сучасні підходи у верстціСучасні підходи у верстці
Сучасні підходи у верстціStfalcon Meetups
 
Как верстать сайты быстрее, чем их рисуют
Как верстать сайты быстрее, чем их рисуютКак верстать сайты быстрее, чем их рисуют
Как верстать сайты быстрее, чем их рисуютFDConf
 
Юрий Артюх (Coderiver)
Юрий Артюх (Coderiver)Юрий Артюх (Coderiver)
Юрий Артюх (Coderiver)Ontico
 
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерRoman Dvornov
 
Как верстать сайты быстрее чем их рисуют
Как верстать сайты быстрее чем их рисуютКак верстать сайты быстрее чем их рисуют
Как верстать сайты быстрее чем их рисуютYuriy Artyukh
 
Краткая презентация курса HTML5 и CSS3: От новичка до профи
Краткая презентация курса HTML5 и CSS3: От новичка до профиКраткая презентация курса HTML5 и CSS3: От новичка до профи
Краткая презентация курса HTML5 и CSS3: От новичка до профиProfPoint
 

Ähnlich wie Верстка и другие развлечения, Seconf (6)

Сучасні підходи у верстці
Сучасні підходи у верстціСучасні підходи у верстці
Сучасні підходи у верстці
 
Как верстать сайты быстрее, чем их рисуют
Как верстать сайты быстрее, чем их рисуютКак верстать сайты быстрее, чем их рисуют
Как верстать сайты быстрее, чем их рисуют
 
Юрий Артюх (Coderiver)
Юрий Артюх (Coderiver)Юрий Артюх (Coderiver)
Юрий Артюх (Coderiver)
 
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьер
 
Как верстать сайты быстрее чем их рисуют
Как верстать сайты быстрее чем их рисуютКак верстать сайты быстрее чем их рисуют
Как верстать сайты быстрее чем их рисуют
 
Краткая презентация курса HTML5 и CSS3: От новичка до профи
Краткая презентация курса HTML5 и CSS3: От новичка до профиКраткая презентация курса HTML5 и CSS3: От новичка до профи
Краткая презентация курса HTML5 и CSS3: От новичка до профи
 

Mehr von Yuriy Artyukh

Когда хуже - лучше
Когда хуже - лучшеКогда хуже - лучше
Когда хуже - лучшеYuriy Artyukh
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиковYuriy Artyukh
 
Microformats and coding
Microformats and codingMicroformats and coding
Microformats and codingYuriy Artyukh
 
How to make your site accessible
How to make your site accessibleHow to make your site accessible
How to make your site accessibleYuriy Artyukh
 
Microsoft Expression Web
Microsoft Expression WebMicrosoft Expression Web
Microsoft Expression WebYuriy Artyukh
 

Mehr von Yuriy Artyukh (6)

Когда хуже - лучше
Когда хуже - лучшеКогда хуже - лучше
Когда хуже - лучше
 
IE9 для разработчиков
IE9 для разработчиковIE9 для разработчиков
IE9 для разработчиков
 
Coding for iPhone
Coding for iPhoneCoding for iPhone
Coding for iPhone
 
Microformats and coding
Microformats and codingMicroformats and coding
Microformats and coding
 
How to make your site accessible
How to make your site accessibleHow to make your site accessible
How to make your site accessible
 
Microsoft Expression Web
Microsoft Expression WebMicrosoft Expression Web
Microsoft Expression Web
 

Верстка и другие развлечения, Seconf