[Академия Вёрстки] Веб-разработчик 9.0 [Артем Исламов]

Блок 1
Погружение в тему
Этапы создания сайта. От интервью до публикации сайта.
— 6 основных этапов создания сайта
— Кто отвечает за каждый этап
— Что такое прототип сайта и зачем он нужен
— Где проектировать прототип
— Регистрация на Ninjamock
— Рисуем первый прототип

Установка программ для работы
— Знакомство с Sublime Text 3 (Редактор кода) + плагины
а) Package Control
б) AutoFileName
в) Emmet
г) BracketHighlighter
д) All Autocomplete
— Установка Filezilla
— Установка Яндекс.Диск + Скриншоты + Punto

Блок 2
Photoshop
Работа над дизайн-макетом. Фотошоп.
Почему дизайн должны рисовать не вы?
Основные требования к макету перед версткой.
— Правильная ширина контента
— Разбивка по слоям и папкам
— Исходники шрифтов и графики
— Соблюдение сетки в 12 колонок
— Отрисованные эффекты при наведении

Фотошоп для front-end разработчика
— Создание документы
— Быстрые клавиши для работы в фотошоп
— Работа со слоями и папками
— Смарт объекты в макете
— Шрифты и начертания
— Как правильно вырезать графику из макета
— Иконки и изображения с прозрачным фоном для сайта
— Как сохранить графику для сайта (формат, имя, размер)

Блок 3
Знакомство с Html и CSS
Что такое html. Особенности CSS.
— Что такое html. Структура html-документа
— Как писать html быстро
— Виды тегов (требуюшие/не требующие закрытия)
— Разметка текста для SEO
— CSS — каскадная таблица стилей
— Идентификаторы и классы
— Основные css свойства

Фреймворки для ускорения работы
— Как вставить javascript на сайт
— Использование готовых библиотек JQuery
— Подключение фреймворка bootstrap 3
— Сайт bootstrap 3. Скачиваем архив
— Подключение базового файла стилей
— Подключение скриптов
Формируем исходный документ для верстки.

Блок 4
Тонкости работы
Колоночная верстка и компиляторы.
— Как делать адаптивный дизайн сразу
— На что обратить внимание перед версткой
— Готовые классы bootstrap. Примеры применения
— Препроцессор less. Зачем он нуже и, что дает
— Быстро форматируем элементы на странице

Верстка элементов интерфейса
— Красивое (сложное) всплывающее окно
— Видео/фото во всплывающем окне
— Галереи на сайте
— Как прилепить навигацию сверху страницы
— Стандартный слайдер bootstrap
— Видео-фон на сайт
— Формы на сайте
— Меняющийся заголовок на сайте

Блок 5
Работа за доллары
Как продвигать себя и на ходить заказы
— Виды бирд фриланса. Где больше денег?
— Как быстро получить первый заказ?
— Правило поведения на Биржах
— Платежные системы для фрилансера
— У кого покупают чаще? Как стать таким человеком?
— Предложение, от которого глупо отказываться
— Работа на себя или в студии?

Зарубежные площадки
— Как получить заказ в долларах?
— Где регистрироваться?
— Как правильно написать приветственное письмо иностранному заказчику?
— Как получить заказ, не имея портфолио?
— Чего не стоит ожидать от зарубежных площадок?
— Монетизация своего навыка, где еще заработать верстальщику?

Блок 6 — Бонус
Введение в JS (jQuery)
Синтаксис и общие правила работы с jQuery
— Как подключать сторонние библиотеки?
— Как подключить свой файл со скриптами?
— Переменные, функции, данные
— Как изменить элемент при клике/двойном клике/наведении/перетаскивании?
— Как изменить класс у элемента?
— Как добавить CSS свойства в jQuery?
— Делаем всплывающее окно без Javascript и при помощи jQuery
— Как сделать кнопку наверх?
— Пишем свои первые скрипты
— Анимация на jQuery с добавлением CSS
— Обработчик форм на jQuery + Ajax
— Как написать скрипт под любую задачу самому?
— Напишем с нуля калькулятор на сайт!

Блок 7 — Бонус
Работа с WordPress
Посадка сайта на CMS WordPress
— Установка WordPress на локальный сервер (Open Server)
— Вертска темы под WordPress на Bootstrap
— Посадка адаптивного шаблона на WordPress
— Настройка статей для блога на WordPress
— Как правильно подключить и оптимизировать скрипты?
— Добавление и удаление страниц в тему WordPress