1. Смежные
1.1. ОСНОВЫ
1.1.1. Рабочее окружение профессионального разработчика
1.1.2. HTML
1.1.3. CSS
1.1.4. Самые основы JS
2. Курсы
2.1. Профессия Front-End разработчик
2.1.1. 1 месяц
2.1.1.1. Рабочее окружение профессионального разработчика
2.1.1.2. HTML
2.1.1.3. CSS
2.1.1.4. Самые основы JS
2.1.2. 2 месяц
2.1.2.1. Bootstrap
2.1.2.2. Сторонние API
2.1.2.3. Анимация
2.1.2.4. Тестирование и отладка
2.1.3. 3 месяц
2.1.3.1. proCODING
2.1.3.2. MsterClass – Пошаговая инструкция верстки
2.1.3.3. MsterClass – Пошаговая инструкция программирования
2.1.3.4. Переделывание Шаблона
2.2. Степень Front-End Middle
2.2.1. 1 месяц
2.2.1.1. HTML advanced
2.2.1.2. ...
2.2.1.3. Базовый NODE.js
2.2.1.4. FrontEnd developer tool
2.3. Степень MODx разработчик
2.3.1. 1 месяц
2.3.1.1. Переделывание шаблона
2.3.1.2. MODx base
2.3.1.3. MODx pro
2.3.1.4. MODx commerce
2.4. Профессия Веб-Мастер (краткий курс)
2.4.1. 1 месяц
2.4.1.1. HTML
2.4.1.2. CSS
2.4.1.3. Самые основы JS
2.4.1.4. Bootstrap
2.4.2. 2 месяц
2.4.2.1. Сторонние API
2.4.2.2. Переделывание шаблона
2.4.2.3. MODx base
2.4.2.4. MODx pro
2.5. Профессия Веб-Мастер (полный курс)
2.5.1. 1 месяц
2.5.1.1. Рабочее окружение профессионального разработчика
2.5.1.2. HTML
2.5.1.3. CSS
2.5.1.4. Самые основы JS
2.5.2. 2 месяц
2.5.2.1. Bootstrap
2.5.2.2. Сторонние API
2.5.2.3. Переделывание шаблона
2.5.2.4. MODx base
2.5.3. 3 месяц
2.5.3.1. MODx pro
2.5.3.2. Анимация
2.5.3.3. MODx commerce
2.5.3.4. Must-Have для Веб-Мастера
2.6. Степень HTML5 кодер
2.6.1. 1 месяц
2.6.1.1. proCODING
2.6.1.2. Тестирование и отладка
2.6.1.3. MsterClass – Пошаговая инструкция верстки
2.6.1.4. MsterClass – Пошаговая инструкция программирования и отладки
2.7. Основы HTML/CSS/JS для дизайнеров
2.7.1. 1 месяц
2.7.1.1. HTML
2.7.1.2. CSS
2.7.1.3. Самые основы JS
2.7.1.4. Bootstrap
2.7.2. 2 месяц
2.7.2.1. Анимация
2.7.2.2. proCODING
2.7.2.3. MasterClass – Пошаговая инструкция верстки
2.7.2.4. MasterClass – Пошаговая инструкция программирования и отладки
3. Students
3.1. Students
3.1.1. Web-Master
3.1.1.1. sezon-I
3.1.1.1.1. japan
3.1.1.1.2. boris
3.1.1.1.3. nadiya
3.1.1.2. sezon-II
3.1.1.2.1. anastasia
3.1.1.2.2. father
3.1.2. Front-End
3.1.2.1. sezon-I
3.1.2.1.1. antonina
3.1.2.2. sezon-II
3.1.2.2.1. brusnikin
4. подключение CSS для старых IE:
4.1. old_ie;
4.2. заглушка для IE6.
5. Тестирование и отладка
5.1. Кроссбраузерность
5.1.1. хаки для браузеров;
5.1.2. сервисы, проверяющие кроссбраузерность;
5.1.3. мобильные симуляторы.
5.2. Как искать баги
5.2.1. ошибки в консоли;
5.2.2. дебажим через alert() и console.log().
5.3. ...
5.4. Оптимизация скорости загрузки сайта и удобства пользования через google-pagespeed
5.4.1. оптимизация HTML;
5.4.2. оптимизация CSS;
5.4.3. оптимизация картинок;
5.4.4. использование кэша.
5.5. Сервисы для сканирования сайта
6. MasterClass – Пошаговая инструкция программирования и отладки
6.1. Подключение и настройка скриптов
6.2. Подключение сторонних API
6.2.1. google-map;
6.2.2. кнопка поделиться;
6.2.3. виджеты vk + fb.
6.3. Анимация деталей
6.3.1. transition.
6.4. Тестирование
6.4.1. кроссбраузерность;
6.4.2. мобильные;
6.4.3. оптимизация JS.
6.5. Скорость загрузки и удобство использования
6.5.1. анализ network;
6.5.2. google-pagespeed.
7. FrontEnd developer tool
7.1. GIT
7.1.1. для чего нужна система контроля версий?
7.1.2. установка и настройка git;
7.1.3. первый коммит;
7.1.4. работаем с github;
7.1.5. мерж веток.
7.2. SCRUM
7.2.1. гибкие методологии управления проектами;
7.2.2. SCRUM команда;
7.2.3. SPRINT:
7.2.3.1. project backlog;
7.2.3.2. sprint backlog;
7.2.3.3. scrum pocker;
7.2.3.4. sprint iteration.
7.2.4. ритуалы SCRUM:
7.2.4.1. ежедневный scrum;
7.2.4.2. планирование спринта;
7.2.4.3. ретроспектива.
7.2.5. Canban доска.
7.3. Система управления проектами
7.3.1. Basecamp;
7.3.2. Worksection;
7.3.3. Trello.
7.4. Учет бухгалтерии
7.4.1. toggl;
7.4.2. freshbooks.
7.5. Сайты с работой
7.5.1. fl.ru;
7.5.2. odesk.com.
8. Сторонние API
8.1. Подключение шрифтов
8.1.1. Google Font;
8.1.2. Adobe TypeKit;
8.1.3. Font Awesome;
8.1.4. Fontastic.
8.2. Подключение карт
8.2.1. Google map;
8.2.2. Yandex map.
8.3. Виджеты социальных сетей
8.3.1. vk;
8.3.2. facebook;
8.3.3. youtube.
8.4. Полезные сервисы
8.4.1. кнопка поделиться;
8.4.2. онлайн комментарии;
8.4.3. онлайн консультант;
8.4.4. заказ звонка с сайта.
8.5. ...
9. proCODING
9.1. Fotoshop для верстальщиков
9.1.1. как работать со слоями:
9.1.1.1. методология слоев;
9.1.1.2. как быстро находить нужный слой;
9.1.1.3. склеивание слоев;
9.1.1.4. техника с Alt.
9.1.2. работа с панелью инструментов:
9.1.2.1. масштаб;
9.1.2.2. стрелочка;
9.1.2.3. текст.
9.1.3. вырезание и сохранение картинок для Web.
9.2. SASS/COMPASS base
9.2.1. что такое препроцессор?
9.2.2. установка и настройка SASS/COMPASS:
9.2.2.1. установка Ruby;
9.2.2.2. установка SASS, установка COMPASS;
9.2.2.3. файл config с настройками.
9.2.3. как это работает?
9.2.4. возможности SASS:
9.2.4.1. создание переменных;
9.2.4.2. вложенность;
9.2.4.3. импорт;
9.2.4.4. миксины;
9.2.4.5. парсинг стилей.
9.2.5. семантика SASS.
9.3. SASS/COMPASS advanced
9.3.1. миксины:
9.3.1.1. подключение @compass;
9.3.1.2. зачем нужны миксины?
9.3.1.3. @compass миксины;
9.3.1.4. собственные миксины.
9.3.2. что такое спрайты?
9.3.3. ручное создание спрайтов;
9.3.4. создание спрайтов через COMPASS.
9.4. Методология верстки part I
9.4.1. понимание модульности элементов;
9.4.2. HTML-архитектура:
9.4.2.1. общая структура документа:
9.4.2.1.1. базис;
9.4.2.1.2. враперы;
9.4.2.1.3. сетка;
9.4.2.1.4. модули.
9.4.2.2. семантическая разметка:
9.4.2.2.1. header;
9.4.2.2.2. h1;
9.4.2.2.3. secton:
9.4.2.2.4. ...
9.4.2.2.5. footer.
9.4.2.3. иконки в спрайтах;
9.4.2.4. нэйминг классов.
9.4.3. SASS-архитектура:
9.4.3.1. общая структура документа;
9.4.3.2. порядок записи CSS-свойств;
9.4.3.3. шрифтовой миксин;
9.4.3.4. адаптивный миксин;
9.4.3.5. использование @compass миксинов;
9.4.3.6. кроссброузерные .clear и .inline-block.
9.4.4. JS-архитектура:
9.4.4.1. общая структура документа:
9.4.4.1.1. скрипты сверху, функции снизу;
9.4.4.1.2. все вызовы в document.ready().
9.4.4.1.3. проверка скрипта через length().
9.4.4.2. создание оглавления.
9.5. Методология верстки part II
9.5.1. дерево документов проекта:
9.5.1.1. структура папок и файлов;
9.5.1.2. нэйминг для файлов.
9.5.2. Дзен-Кодинг:
9.5.2.1. HTML;
9.5.2.2. CSS.
9.5.3. чистый код:
9.5.3.1. требования к верстке;
9.5.3.2. выравнивание HTML и CSS кода лесенкой;
9.5.3.3. оптимизация кода;
9.5.3.4. комментарии в коде.
9.5.4. FieBug – ваш лучший друг!
9.5.4.1. HTML;
9.5.4.2. CSS;
9.5.4.3. консоль.
9.5.5. 10 заповедей.
9.5.6. Что можно использовать?
10. MasterClass – Пошаговая инструкция верстки
10.1. Создание архитектуры
10.1.1. визуализация всей структуры;
10.1.2. сетка Bootstrap;
10.1.3. семантическая разметка;
10.1.4. нэйминг классов.
10.2. Работа с типографикой
10.2.1. подключаем шрифты;
10.2.2. используем шрифтовой микcин;
10.2.3. доводим шрифты "до ума".
10.3. Работа с модулями
10.3.1. доведение модуля до нужной структуры;
10.3.2. первичная стилизация модуля.
10.4. Pixel-Perfect
10.4.1. работа с каждым модулем персонально;
10.4.2. работа со всем макетом, не включая модули.
10.5. Адаптивность
10.5.1. использование адаптивного миксина.
11. Рабочее окружение профессионального разработчика
11.1. Браузер
11.1.1. Program
11.1.1.1. Программы для скриншотов
11.1.1.2. плагины;
11.1.1.3. инструменты разработчика;
11.1.1.4. мой IP;
11.1.1.5. обзор браузеров;
11.1.1.6. война браузеров;
11.1.1.7. браузер или броузер?
11.1.2. Students
11.1.2.1. Web-Master
11.1.2.1.1. sezon-I
11.1.2.1.2. sezon-II
11.1.2.2. Front-End
11.1.2.2.1. sezon-I
11.1.2.2.2. sezon-II
11.2. Редактор кода
11.2.1. on-line редакторы кода;
11.2.2. установка и настройка Sublime;
11.2.3. установка плагинов для Sublime;
11.2.4. Настройка Sublime;
11.2.5. Students
11.2.5.1. Web-Master
11.2.5.1.1. sezon-I
11.2.5.1.2. sezon-II
11.2.5.2. Front-End
11.2.5.2.1. sezon-I
11.2.5.2.2. sezon-II
11.3. Хостинг
11.3.1. что такое хостинг?
11.3.1.1. адрес сайта (URL) и DNS-сервера;
11.3.2. локальный сервер.
11.3.3. ISP-manager и CPanel:
11.3.3.1. файловый менеджер;
11.3.3.2. где лежит мой сайт?
11.3.3.3. базы данных и PHPMyadmin;
11.3.3.4. создание FTP;
11.3.3.5. создание электронных ящиков.
11.3.4. работа с FTP-клиентами;
11.3.5. Students
11.3.5.1. Web-Master
11.3.5.1.1. sezon-I
11.3.5.1.2. sezon-II
11.3.5.2. Front-End
11.3.5.2.1. sezon-I
11.3.5.2.2. sezon-II
11.4. Поиск решения
11.4.1. как правильно составить запрос в Гугл?
11.4.1.1. сервисы для разработчиков;
11.4.1.2. Googling VS Youtubing;
11.4.2. 15 способов, как лучше гуглить.
11.4.3. гугл-тренды;
11.4.4. хром-эксперементы;
11.4.5. on-line журналы для поиска вдохновения;
11.4.6. Students
11.4.6.1. Web-Master
11.4.6.1.1. sezon-I
11.4.6.1.2. sezon-II
11.4.6.2. Front-End
11.4.6.2.1. sezon-I
11.4.6.2.2. sezon-II
11.5. Классификация IT-технологий
11.5.1. из чего состоит веб-проект?
11.5.2. отличие Front-End от Back-End;
11.5.3. технологии для создания веб-сайтов;
11.5.4. обзор CMS;
11.5.5. технологии для создания веб-сервисов;
11.5.6. NODE.js и MVC-фреймворки;
11.5.7. сервисы для on-line образования.
11.5.8. где искать работу
11.5.9. Students
11.5.9.1. Web-Master
11.5.9.1.1. sezon-I
11.5.9.1.2. sezon-II
11.5.9.2. Front-End
11.5.9.2.1. sezon-I
11.5.9.2.2. sezon-II
12. HTML
12.1. Вступление в HTML
12.1.1. Web 1.0 и Web 2.0;
12.1.2. понимание HTML;
12.1.3. адаптивная верстка;
12.1.4. логика разметки сайта;
12.1.5. что такое теги и атрибуты?
12.1.6. технически верный HTML-документ.
12.1.7. Students
12.1.7.1. Web-Master
12.1.7.1.1. sezon-I
12.1.7.1.2. sezon-II
12.1.7.2. Front-End
12.1.7.2.1. sezon-I
12.1.7.2.2. sezon-II
12.2. Теги типографики
12.2.1. теги заголовков H1-H6;
12.2.2. параграф <p>;
12.2.3. теги выделения <strong>, <em>, <mark>;
12.2.4. списки <ul> и <ol>, вложенности;
12.2.5. описание свойств через <dl> и <dt>
12.2.6. цитата <blockquote>;
12.2.7. разделители <br> и <hr>;
12.2.8. таблица <table>;
12.2.9. добавление картинок <img>:
12.2.9.1. figure;
12.2.9.2. figcaption.
12.2.10. ссылка <a>;
12.2.11. HTML5:
12.2.11.1. address;
12.2.11.2. hgroup;
12.2.11.3. del;
12.2.11.4. code.
12.2.12. Students
12.2.12.1. Web-Master
12.2.12.1.1. sezon-I
12.2.12.1.2. sezon-II
12.2.12.2. Front-End
12.2.12.2.1. sezon-I
12.2.12.2.2. sezon-II
12.3. Теги форм
12.3.1. логика работы форм;
12.3.2. тег <form>;
12.3.3. элемент ввода <input> и его type:
12.3.3.1. text;
12.3.3.2. checkbox;
12.3.3.3. radio;
12.3.3.4. search;
12.3.3.5. email;
12.3.3.6. url;
12.3.3.7. number;
12.3.3.8. tel;
12.3.3.9. range;
12.3.3.10. date;
12.3.3.11. month;
12.3.3.12. week;
12.3.3.13. time;
12.3.3.14. datetime;
12.3.3.15. datetime-local;
12.3.3.16. color.
12.3.4. элемент выбора <select>;
12.3.5. элемент ввода <textarea>;
12.3.6. атрибуты элементов форм:
12.3.6.1. name;
12.3.6.2. value.
12.3.7. кнопка:
12.3.7.1. button;
12.3.7.2. input type="submit".
12.3.8. тег <label>.
12.3.9. Students
12.3.9.1. Web-Master
12.3.9.1.1. sezon-I
12.3.9.1.2. sezon-II
12.3.9.2. Front-End
12.3.9.2.1. sezon-I
12.3.9.2.2. sezon-II
12.4. Теги "строительные"
12.4.1. блочные и строчные теги;
12.4.2. табличная верстка;
12.4.3. DIV-ная верстка;
12.4.4. принцип адаптивной сетки;
12.4.5. HTML5:
12.4.5.1. header, footer;
12.4.5.2. nav;
12.4.5.3. section;
12.4.5.4. article;
12.4.5.5. aside.
12.4.6. Students
12.4.6.1. Web-Master
12.4.6.1.1. sezon-I
12.4.6.1.2. sezon-II
12.4.6.2. Front-End
12.4.6.2.1. sezon-I
12.4.6.2.2. sezon-II
12.5. Заключение HTML
12.5.1. учим Emmet ;
12.5.2. тег "элемент списка";
12.5.3. HTML5 form types;
12.5.4. типы верстки.
12.5.5. Students
12.5.5.1. Web-Master
12.5.5.1.1. sezon-I
12.5.5.1.2. sezon-II
12.5.5.2. Front-End
12.5.5.2.1. sezon-I
12.5.5.2.2. sezon-II
12.6. Бонус BOOTSTRAP
12.6.1. Students
12.6.1.1. Web-Master
12.6.1.1.1. sezon-I
12.6.1.1.2. sezon-II
12.6.1.2. Front-End
12.6.1.2.1. sezon-I
12.6.1.2.2. sezon-II
13. HTML advanced
13.1. Microdata
13.2. Добавление видео, звука и настройка плеера
13.3. Теги для социальных сетей
13.4. ...
13.5. Геолокация, определение местонахождения
14. CSS
14.1. Понимание CSS
14.1.1. как выглядит сайт без CSS?
14.1.2. знакомство со свойствами;
14.1.3. наследование в CSS;
14.1.4. организация CSS;
14.1.5. из чего состоит CSS оформление?
14.1.6. Students
14.1.6.1. Web-Master
14.1.6.1.1. sezon-I
14.1.6.1.2. sezon-II
14.1.6.2. Front-End
14.1.6.2.1. sezon-I
14.1.6.2.2. sezon-II
14.2. CSS типографика
14.2.1. единицы измерения;
14.2.2. color;
14.2.3. font-family;
14.2.4. font-weight;
14.2.5. локальное подключение шрифтов;
14.2.6. font-size;
14.2.7. line-height;
14.2.8. letter-spacing;
14.2.9. стилизация списков;
14.2.10. text-shadow;
14.2.11. эффекты наведения.
14.2.12. Students
14.2.12.1. Web-Master
14.2.12.1.1. sezon-I
14.2.12.1.2. sezon-II
14.2.12.2. Front-End
14.2.12.2.1. sezon-I
14.2.12.2.2. sezon-II
14.3. Позиционирование компонентов
14.3.1. размеры:
14.3.1.1. width;
14.3.1.2. height;
14.3.1.3. max-width / min-width.
14.3.2. CSS-блочная модель:
14.3.2.1. margin;
14.3.2.2. padding;
14.3.2.3. border;
14.3.2.4. box-sizing.
14.3.3. display:
14.3.3.1. block;
14.3.3.2. inline;
14.3.3.3. inline-block;
14.3.3.4. flex:
14.3.3.4.1. flex-flow;
14.3.3.4.2. justify-content.
14.3.4. float:
14.3.4.1. left;
14.3.4.2. right;
14.3.4.3. очищение обтекания.
14.3.5. position:
14.3.5.1. relative;
14.3.5.2. absolute;
14.3.5.3. fixed;
14.3.5.4. top/right/bottom/left.
14.3.6. Students
14.3.6.1. Web-Master
14.3.6.1.1. sezon-I
14.3.6.1.2. sezon-II
14.3.6.2. Front-End
14.3.6.2.1. sezon-I
14.3.6.2.2. sezon-II
14.4. CSS стилизация
14.4.1. блоки:
14.4.1.1. background:
14.4.1.1.1. size:cover.
14.4.1.2. закругленные края border-radius;
14.4.1.3. тени box-shadow.
14.4.2. формы:
14.4.2.1. способы обращения к форме через [type];
14.4.2.2. состояния форм:
14.4.2.2.1. focus;
14.4.2.2.2. blur.
14.4.2.3. placeholder;
14.4.2.4. стильные checkbox и radiobuton;
14.4.2.5. кроссбраузерная загрузка файлов.
14.5. Часто используемые практики CSS
14.5.1. ul > li как архитектурное решение:
14.5.1.1. повторяющиеся элементы ставим в ul > li;
14.5.1.2. верстка навигации:
14.5.1.2.1. верхняя;
14.5.1.2.2. боковая;
14.5.1.2.3. нижняя.
14.5.1.3. first-child, last-child, nth-child.
14.5.2. центрирование элементов:
14.5.2.1. центрирование через text-align: center;
14.5.2.2. центрирование через margin: 0 auto;
14.5.2.3. абсолютное центрирование по высоте и ширине;
14.5.2.4. центрирование через table;
14.5.2.5. выравнивание картинок;
14.5.2.6. верстка пагинации.
14.5.3. положение элементов "рядом":
14.5.3.1. два блока рядом (верстка новости-превью );
14.5.3.2. три блока рядом:
14.5.3.2.1. через margin;
14.5.3.2.2. через flex.
14.5.4. позиционирование:
14.5.4.1. зафиксировать хедер;
14.5.4.2. прижать футер.
14.5.5. before + after.
15. Bootstrap
15.1. Сетка Bootstrap
15.1.1. логика создания сетки;
15.1.2. смещенные колонки;
15.1.3. вложенные столбцы;
15.1.4. своя сетка для каждого типа устройств;
15.1.5. утилиты адаптивности;
15.1.6. Normalize.css.
15.2. Типографика Bootstrap
15.2.1. заголовки и параграфы;
15.2.2. выделения и выравнивания;
15.2.3. адрес и аббревиатура;
15.2.4. цитаты;
15.2.5. списки;
15.2.6. теги для отображения кода;
15.2.7. таблицы;
15.2.8. изображения;
15.2.9. сообщение;
15.2.10. загрузчик;
15.2.11. ячейки.
15.3. Элементы форм Bootstrap
15.3.1. горизонтальные и вертикальные;
15.3.2. элементы управления форм;
15.3.3. состояния и размеры форм;
15.3.4. сетка из форм + справка;
15.3.5. группировка форм;
15.3.6. все про кнопки;
15.3.7. иконки;
15.3.8. группировка кнопок.
15.4. Другие компоненты Bootstrap
15.4.1. выпадающее меню;
15.4.2. навигация;
15.4.3. хлебные крошки;
15.4.4. пагинация;
15.4.5. значки и метки;
15.4.6. эскизы:
15.4.6.1. Jumbotron;
15.4.6.2. превьюшки;
15.4.6.3. новости;
15.4.6.4. комментарии;
15.4.6.5. списки групп;
15.4.6.6. панели.
15.5. Скрипты Bootstrap
15.5.1. modal.js;
15.5.2. dropdown.js;
15.5.3. scrollspy.js;
15.5.4. tab.js;
15.5.5. tooltip.js;
15.5.6. popover.js;
15.5.7. alert.js;
15.5.8. button.js;
15.5.9. collapse.js;
15.5.10. carousel.js;
15.5.11. affix.js.
16. Самые основы JS
16.1. Работаем с консолью
16.1.1. математические операции;
16.1.2. операции со строками:
16.1.2.1. toUpperCase();
16.1.2.2. length().
16.2. Возможности JS
16.2.1. типы переменных var;
16.2.2. массивы Arrays;
16.2.3. циклы Loops;
16.2.4. условие if/else;
16.2.5. создание функции function();
16.2.6. регулярные выражения regExp().
16.3. Использование jQuery
16.3.1. jQuery - библиотека, написанная на JavaScript;
16.3.2. подключение jQuery;
16.3.3. возможности jQuery:
16.3.3.1. выбор HTML-элемента через $('');
16.3.3.2. $(this) / parent() / siblings() / find();
16.3.3.3. show() / hide();
16.3.3.4. slideUp() / slideDown() / slideToogle();
16.3.3.5. addClass() / removeClass() / toggleClass().
16.4. Подключение скриптов
16.4.1. общий принцип вызова скриптов;
16.4.2. jQuery UI;
16.4.3. подключение owl-carousel;
16.4.4. подключение bPopup;
16.4.5. подключение fancyBox;
16.4.6. навигация по Landing Page (переход по разделам сайта в пределах одной страницы).
16.5. События и методы, которые вам пригодятся
16.5.1. document.ready();
16.5.2. hover() и click();
16.5.3. focus() и blur();
16.5.4. window.load;
16.5.5. window.scroll;
16.5.6. window.resize;
16.5.7. setTimeout();
16.5.8. animate().
17. Анимация
17.1. CSS3 transform
17.1.1. translate;
17.1.2. scale;
17.1.3. rotate;
17.1.4. transition.
17.2. CSS3 keyframe
17.2.1. создание анимации;
17.2.2. запуск анимации;
17.2.3. анимация в спрайте через CSS3;
17.2.4. easing.
17.3. JS приемы для работы с CSS3 анимацией
17.3.1. подключаем animate.CSS;
17.3.2. анимация по наведению/по клику;
17.3.3. анимация при пролистывании;
17.3.4. анимация элементов форм:
17.3.4.1. label + input;
17.3.4.2. checkbox + radio;
17.3.4.3. button.
17.4. Parallax
17.4.1. Nike и примеры параллакса;
17.4.2. чистый CSS3 паралакс;
17.4.3. Wow-плагин;
17.4.4. Parallax-плагин.
17.5. Slider-Revolution
17.5.1. подключение плагина;
17.5.2. HTML разметка;
17.5.3. анимация слайдов;
17.5.4. анимация элементов в слайдере;
17.5.5. настройка вызова плагина.
18. MODx base
18.1. Установка MODx
18.1.1. установка последней версии;
18.1.2. установка нашей сборки MODx;
18.1.3. знакомство с админкой.
18.2. Создание структуры сайта
18.2.1. создание шаблонов;
18.2.2. создание чанков.
18.3. Кастомизация статичных компонентов сайта
18.3.1. создание и внедрение TV-параметров;
18.3.2. прямая ссылка на документ [*~id~*].
18.4. Программирование динамичных компонентов
18.4.1. меню через [Wayfinder];
18.4.2. хлебные крошки [Breadcrumbs];
18.4.3. новости через [Ditto];
18.4.4. галерея через [Multiphoto].
18.5. Программирование форм обратной связи
18.5.1. подключение необходимых скриптов:
18.5.1.1. ajaxForm.js;
18.5.1.2. feelForm.js;
18.5.1.3. ajaxHandler.php.
18.5.2. использование встроенного сниппета для форм:
18.5.2.1. атрибуты формы;
18.5.2.2. id для form;
18.5.2.3. data-атрибуты.
19. MODx pro
19.1. Расширенная шаблонизация сниппетов
19.1.1. Wayfinder;
19.1.2. Ditto:
19.1.2.1. пагинация.
19.1.3. Multiphoto:
19.1.3.1. оптимизация lightBox;
19.1.3.2. оптимизация категорий для фильтра isotope / masonrу.
19.2. Часто использующиеся сниппеты
19.2.1. [*parent*] и [*firstchildredirect*];
19.2.2. getTV;
19.2.3. PHX;
19.2.4. галочка "публиковать на главной";
19.2.5. если поле не заполнено, то не выводить его;
19.2.6. создание XML-карты;
19.2.7. программирование поиска.
19.3. MasterClass – программирование каталога с большим количеством характеристик и несколькими галлереями
19.4. Создание удобного вида админки
19.4.1. понятная архитектура;
19.4.2. настройка {{mm-rules}};
19.4.3. порядок TV-параметров;
19.5. Разграничение прав пользователей
19.5.1. управление ролями;
19.5.2. управление менеджерами.
20. MODx commerce
20.1. Установка сборки магазина
20.2. Программирование корзины товаров
20.3. Программирование фильтра товаров
20.4. ...
20.5. Подключение платежной системы WebPay
21. Must-to-KNOW для Веб-Мастера
21.1. Оптимизация сайта
21.1.1. SEO оптимизация сайта;
21.1.2. Google page speed оптимизация;
21.1.3. robots.txt;
21.1.4. favicon.ico;
21.1.5. ошибки в консоли;
21.1.6. ТОП 10 факторов, влияющих на продвижение сайта в интернете.
21.2. GoogleWebmaster
21.2.1. регистрация в GoogleWebmaster и Google Analytics;
21.2.2. верификация и подключение счетчика Google Analytics;
21.2.3. добавление сайта в Google;
21.2.4. настройка GoogleWebmaster;
21.2.5. обзор Google Analytics и AB-тестирование.
21.3. YandexWebmaster
21.3.1. регистрация в YandexWebmaster и YandexMetrica;
21.3.2. верификация и подключение счетчика YandexMetrica;
21.3.3. добавление сайта в Yandex;
21.3.4. настройка YandexWebmaster;
21.3.5. обзор YandexMetrica.
21.4. Подключение UTM-меток
21.4.1. что такое UTM-метки и куда они ведут?
21.4.2. как создавать UTM-метки;
21.4.3. подключение UTM-меток на сайт.
21.5. ТОП сервисов для Вебмастеров
22. Базовый NODE.js
22.1. NPM
22.2. Grunt
22.2.1. server watch;
22.2.2. build.
22.3. Bower
22.4. Шаблонизатор
22.5. Автоматические тесты
23. MasterClass – Переделывание Шаблона
23.1. Выбор шаблона
23.1.1. как искать шаблоны на ThemeForest;
23.1.2. выбор качественного кода шаблона на Bootstrap;
23.1.3. работа с типографикой:
23.1.3.1. подбор шрифтов;
23.1.3.2. выравнивание.
23.2. Формирование структуры
23.2.1. поиск решения — перестановка блоков;
23.2.2. использование Bootstrap;
23.2.3. подбор иконок;
23.2.4. выравнивание.
23.3. Работа с шаблоном
23.3.1. доработка дизайна через CSS;
23.3.2. внедрение анимации;
23.3.3. подключение недостающих скриптов;
23.3.4. исправление ошибок.
23.4. Содержание сайта
23.4.1. поиск и интеграция картинок:
23.4.1.1. правильный выбор размеров;
23.4.1.2. обработка картинок через Fotoshop;
23.4.1.3. прием в Fotoshop для улучшения фоновых картинок.
23.4.2. наполнение контентом;
23.4.3. стурктуризация заголовков.
23.5. Оптимизация сайта
23.5.1. удаление лишних файлов в структуре сайта;
23.5.2. удаление лишних скриптов;
23.5.3. подготовка форм к программированию.