✓ [Евгений Паскару] Landing Page за 14 дней под любой дисплей [2015]

Название: Landing Page за 14 дней под любой дисплейАвтор: Евгений ПаскаруПолучите знания которые гарантированно удвоят ваши доходы. Всего за 14 дней пройдя курс (70 уроков), вы сможете начинать верстать самостоятельно, ощутив абсолютную свободу креатива на ваших сайтах. Информация, в курсе, максимально практическая. Ваш сайт будет до тончайших деталей отображаться на всех типах устройств.✔ Для кого этот курс?● Для тех, кто устал от использования всевозможных однотипных шаблонов из сети и не может до сих пор сверстать свой сайт по своим желаниям.● Для тех, кому надоело учить HTML месяцами, и так ничего и не понять, я решил максимально упростить задачу обучения верстке, я даю сразу HTML и CSS на практике методом постановки задачи, а после ее разрешения.● Для тех, кого достали программы верстки, которые делают абсолютно не качественную работу и вам потом стыдно перед заказчиком, думая, что больше этот клиент к вам не вернется.✔ С чем можно столкнуться при разработки сайта или Landing page?● Сайт медленно загружается.● Сайт не адаптируется под разные устройства и имеет фиксированную ширину.● Код на сайте не читабелен. Нельзя ничего сделать кроме как создавать новый.● Сайт не индексируется поисковыми системами. Поискового трафика не будет.● Низкая стоимость. Подумайте сколько может стоить сайт сделанный на автомате за 5 мин? .SpoilerTarget]Спойлер: Описание далее ✔ Что в итоге?● Недовольный заказчик, который скорее всего не рассчитается с вами.● Деньги на рекламу потрачены в трубу, потому что никто не ждет пока ваш сайт загрузится.● Сайт коряво отображается на мобильных уcтройствах, что делает его неприспособленным к мобильному трафику.● Опять теряем конверсию, даже если там просто убойное УТП.✔ Что конкретно вы получите после прохождения курса?● Вы получите базовые знания HTML и CSS, достаточные для того чтобы полностью сделать Landing Page самостоятельно.● Научитесь понимать чужой код и копировать понравившиеся Landing page.● Получите начальные знания Adobe Photoshop для веб-дизайна.● Сможете тестировать свои и сторонние сайты на скорость, удобство пользования и качество.● Ваши Landing Page будут отображаться на 98% дисплеев безупречно.● Вы выучите сверх-адаптивный и самый популярный фреймворк bootstrap 3 (twitter).● Сможете подключать разнообразные скрипты и устанавливать код отслеживания трафика на сайт(Yandex Metrika/ Google Analytics).● Если у вас уже есть сайты, сделанные ранее в (Adobe Muse, Dreamweaver, WSYWiG и т.д) сможете ихоптимизировать и ускорить.✔ Программа курса:● Введение● Знакомство с 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)● Дорабатываем меню и нижнюю часть● Исправляем косяки● Подключаем скрипт к кнопкам(с функцией отправки письма)● Проверяем кросс-браузерность● ЗаключениеПродажник:

Скачать: