Слайд 2Что такое Web-разработка и с чем её едят?
![Что такое Web-разработка и с чем её едят?](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-1.jpg)
Слайд 3Что такое Web-разработка и с чем её едят?
Одного блокнота мало
Инструментов много -
![Что такое Web-разработка и с чем её едят? Одного блокнота мало Инструментов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-2.jpg)
результат один
Языков много - результат один
Качество и скорость? Возможно
Как корабль «построишь» - так и поплывет
Слайд 4"Чтобы не поломалось" - выбираем рабочее окружение
!["Чтобы не поломалось" - выбираем рабочее окружение](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-3.jpg)
Слайд 5"Чтобы не поломалось" - выбираем рабочее окружение
Only *NIX
Серверный язык: PHP, Ruby, NodeJS,
!["Чтобы не поломалось" - выбираем рабочее окружение Only *NIX Серверный язык: PHP,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-4.jpg)
ASP и т.д.
Среда разработки
Bower
GIT
Слайд 6Notepad vs IDE - плюсы и минусы
![Notepad vs IDE - плюсы и минусы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-5.jpg)
Слайд 7Notepad vs IDE - плюсы и минусы
Notepad:
Скорость работы
Сторонние плагины
IDE:
Анализаторы кода
Подсказки, интеграция с
![Notepad vs IDE - плюсы и минусы Notepad: Скорость работы Сторонние плагины](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-6.jpg)
системами
Слайд 8Notepad vs IDE - плюсы и минусы
Рекомендации:
Windows: Sublime Text, Notepad++
*NIX: Sublime Text,
![Notepad vs IDE - плюсы и минусы Рекомендации: Windows: Sublime Text, Notepad++](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-7.jpg)
JetBrains Product
Для извращенцев: VIM
Слайд 9Web-стандарты: HTML5, CSS3, JavaScript
![Web-стандарты: HTML5, CSS3, JavaScript](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-8.jpg)
Слайд 10Web-стандарты: HTML5, CSS3, JavaScript
HTML5 тэги улучшают семантику разметки, упрощают читабельность
CSS3 решает многие
![Web-стандарты: HTML5, CSS3, JavaScript HTML5 тэги улучшают семантику разметки, упрощают читабельность CSS3](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-9.jpg)
задачи, которые раньше решали картинками
JavaScript есть везде. За его отсутствие пусть платит заказчик
Слайд 11Что такое CSS framework и для чего он нужен
![Что такое CSS framework и для чего он нужен](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-10.jpg)
Слайд 12Что такое CSS framework и для чего он нужен
Быстрое прототипирование
Удобная сетка
Единый стиль
![Что такое CSS framework и для чего он нужен Быстрое прототипирование Удобная](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-11.jpg)
всех элементов
Богатый выбор компонентов
Слайд 13"Как я раньше жил без них" - препроцессоры CSS
!["Как я раньше жил без них" - препроцессоры CSS](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-12.jpg)
Слайд 14"Как я раньше жил без них" - препроцессоры CSS
Использование элементов программных конструкций
!["Как я раньше жил без них" - препроцессоры CSS Использование элементов программных](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-13.jpg)
в языке стилей: переменные, условия, циклы, функции
Вложенность, быстрое и точное наследование
Подключение внешних файлов дает больше возможностей в организации структуры
Слайд 15Task Runner - ускоряем разработку
![Task Runner - ускоряем разработку](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-14.jpg)
Слайд 16Task Runner - ускоряем разработку
Автоматизация процесса
Тонкая настройка
Большое количество плагинов
![Task Runner - ускоряем разработку Автоматизация процесса Тонкая настройка Большое количество плагинов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-15.jpg)
Слайд 17Логика на клиенте? Без проблем! Обзор MVVC framework для JavaScript
![Логика на клиенте? Без проблем! Обзор MVVC framework для JavaScript](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1168919/slide-16.jpg)