Программа курса:
Блок 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
