[Академия Вёрстки] Веб-разработчик 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