Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
ПРОГРАММА создатель Mind Map: ПРОГРАММА

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. подготовка форм к программированию.

24. Коллекция наворотов для вашего сайта