Научитесь верстать сайты типа LandingPage за 14 дней под любой дисплей

Научитесь верстать сайты типа LandingPage за 14 дней под любой дисплей
Автор: Паскару Евгений



Получите знания которые гарантированно удвоят ваши доходы.

Всего за 14 дней пройдя курс (70 уроков), вы сможете начинать верстать самостоятельно, ощутив абсолютную свободу креатива на ваших сайтах.

Информация, в курсе, максимально практическая.

Ваш сайт будет до тончайших деталей отображаться на всех типах устройств.
Для кого этот курс?

● Для тех, кто устал от использования всевозможных однотипных шаблонов из сети и не может до сих пор сверстать свой сайт по своим желаниям.

● Для тех, кому надоело учить HTML месяцами, и так ничего и не понять, я решил максимально упростить задачу обучения верстке, я даю сразу HTML и CSS на практике методом постановки задачи, а после ее разрешения.

● Для тех, кого достали программы верстки, которые делают абсолютно не качественную работу и вам потом стыдно перед заказчиком, думая, что больше этот клиент к вам не вернется.

С чем можно столкнуться при разработки сайта или Landing page? ● Сайт медленно загружается. ● Сайт не адаптируется под разные устройства и имеет фиксированную ширину. ● Код на сайте не читабелен.

Нельзя ничего сделать кроме как создавать новый. ● Сайт не индексируется поисковыми системами.

Поискового трафика не будет. ● Низкая стоимость.

Подумайте сколько может стоить сайт сделанный на автомате за 5 мин?
Что в итоге?

● Недовольный заказчик, который скорее всего не рассчитается с вами.

● Деньги на рекламу потрачены в трубу, потому что никто не ждет пока ваш сайт загрузится.

● Сайт коряво отображается на мобильных у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)

● Дорабатываем меню и нижнюю часть

● Исправляем косяки

● Подключаем скрипт к кнопкам(с функцией отправки письма)

● Проверяем кросс-браузерность

● Заключение

Автор: Евгений Паскару

Тема: landing page, веб-дизайн

Продолжительность: ~30 часов

Язык: русский

Размер: 8.7 Gb

Курс продается здесь: Скрытая информация :: Авторизуйтесь для просмотра »

Скачать: Скрытая информация :: Авторизуйтесь для просмотра »