Погружение в тему
Этапы создания сайта. От интервью до публикации сайта.
– 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
Отзывы
Отзывов пока нет.