Введение
Знакомство с PSD макетом.
Детальный разбор макета.
Создаем папки и базовый скелет LP.
Расширяем скелет и расписываем заголовки.
Делаем 2ю секцию на сайте
Доделываем 2ю секцию на нашем Landing Page
Верстаем скриншоты (картинки на сайте)
Работаем с таблицой
Делаем блок с отзывами
Работаем со списками
Стилизация lp, подключение шрифтов и выравнивание заголовков
Стилизуем желтую полосу и выравниваем картинку
Стилизуем, шаги (преимущества) 1-2-3-4-5-6.
Стилизуем зеленую секцию.
Стилизуем таблицу
Стилизуем блок отзывов
Стилизация футера(подвала)
Оптимизация картинок и кода. Финал.
Разбор того что будем делать.
Настройка папок сайта
Знакомство с темами и шаблонами для bootstrap. Метатеги(Добавляем ключевые слова и описание)
Раскройка макета из PSD
Сжимаем картинки и подкл. шрифты
Разбираем адаптивную сетку bootstrap. Основа верстки под мобильные устройства
Как сделать не адаптивный сайт, накидываем базу и немного поговорим о фоновых изображения
Верстаем полностью адаптивное меню
Ставим большую картинку на фон(Hero Image)
Делаем адаптивные заголовки, применяем @media и класс .hidden-* и .visible-*
Добавляем 2й раздел на сайте новый класс .img-responsive(адаптивный)
Добавляем слайдер на Javascript
Добавляем галерею с модальными окнами
Добавляем галерею с модальными окнами продолжение
Создаем список с изображениями класс .media-object
Стилизация Hero image и заголовков, убераем полоску меню.
Делаем адаптивную кнопку.
Анимация кнопок и элементов
Анимация изображений, мини-parallax эффект
Тени для текста и блоков (text-shadow, box-shadow)
Дорабатываем меню и нижнюю часть
Исправляем косяки
Подключаем скрипт к кнопкам(с функцией отправки письма)
Проверяем кросс-браузерность
Заключение