Курс по созданию Landing Page
О курсе
Создание лендингов — автономных интернет-страниц, нацеленных на конкретное действие пользователя — один из трендов веб-разработки. Чаще всего их создают для мероприятий, отдельных продуктов или услуг. Если вы владеете базовыми знаниями языков верстки HTML и CSS и при этом намерены научиться создавать эффективные лендинги, этот курс идеально подойдет вам.
Читать дальше…
Этот курс входит в специальности:
Frontend Developer Верстальщик сайтов
Предварительные Требования
Знание языков верстки HTML & CSS
Читать дальше…
Вы научитесь
- Верстать привлекательные лендинги
- Рационально организовывать процесс верстки
- Понимать назначение и принципы работы препроцессоров SASS и PUG
- Разрабатывать интерактив страницы при помощи JavaScript
- Пользоваться менеджером заданий Gulp
- Работать с системой контроля версий Git и сервисом хостинга проектов — GitHub
Читать дальше.
..
Скачать материалы курса Для получения материалов курса нужно авторизоваться
Получить сертификат Для получения сертификата нужно авторизоваться
Сергей Рубец
Front-end developer в компании Speroteck
Другие курсы автора
- Длительность: 8 ч 14 м
- Курс создан: 15.05.2017
- Уроков: 9
- Обновлен: 17.12.2020
- Язык: русский
Что входит в курс
- 9 видео уроков
- Домашние задания
- Тестирование
- Сертификат
- Консультация с тренером
СМОТРЕТЬ
Для прохождения теста нужно авторизироваться
Войти Регистрация
×
Вы открыли доступ к тесту! Пройти тест
Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Войти Регистрация
№1
Организация рабочего процесса
1:33:02
Материалы урокаДомашние заданияТестирование
Первый видео урок является вводным.
В нем автор расскажет о структуре практического курса. Также вы узнаете, как настроить свое рабочее пространство при помощи инструментов Git и Gulp.
Читать дальше…
Препроцессор PUG
0:40:24
Материалы урокаДомашние заданияТестирование
Знакомство с синтаксисом препроцессора pug, что это и чем он может помочь в верстке.
Читать дальше…
Препроцессор SASS
0:46:49
Материалы урокаДомашние заданияТестирование
Знакомство с синтаксисом препроцессора sass, что это и чем он может помочь в верстке.
Читать дальше…
Начало верстки
0:51:22
Материалы урокаДомашние заданияТестирование
Соберем иконки в спрайт, подключим кастомные шрифты, начнем разметку блока header.
Читать дальше…
Верстка Часть 2
0:43:50
Материалы урокаДомашние заданияТестирование
Продолжение верстки.
Сверстаем два следующих блока hero и about us.
Читать дальше…
Верстка Часть 3
0:32:49
Материалы урокаДомашние заданияТестирование
Сверстаем блок our approch.
Читать дальше…
Верстка Часть 4
0:38:31
Материалы урокаДомашние заданияТестирование
Сверстаем блок our work.
Читать дальше…
Окончание верстки
1:06:19
Материалы урокаДомашние заданияТестирование
Доделаем оставшиеся блоки
Читать дальше…
Интерактив на JS
1:21:20
Материалы урокаДомашние заданияТестирование
Напишем открытие/закрытие попапа на чистом JS, поговорим о распространенных задачах на языке JS при верстке лендингов.
Читать дальше…
Следующий курс:
Видео курсы TypeScript Fundamentals — видео уроки TypeScript Fundamentals для разработчиков — ITVDN
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:01:53
Знакомство с Git
0:05:58
Структура проекта
0:18:01
Знакомство с таск-менеджером Gulp.
js
0:21:04
Практика создание проекта
0:30:25
Создание README файла
0:43:13
Настройка файла gitignore
0:46:00
Добавление изменение в git репозиторий
0:50:38
Настройка файла package.json
0:53:10
Установка необходимых пакетов
0:56:20
Практическая работа с gulp.js
1:28:07
Подведение итогов урока и домашнее задание
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖Создание и верстка лендинга для детей — обучение в Волгограде
Выбрать язык
- RU
- US
- AE
- ES
- DE
- IL
- GE
- KZ
- BY
- RS
- AZ
- AR
- CZ
- PL
- IT
- FR
- LV
- CH
- AT
- HR
- ME
- BG
- ТМ
- KG
Модуль познакомит с понятием «лендинг». Дети узнают основные отличительные стороны лендинга от сайта, научатся пользоваться основными конструкторами лендингов, создадут свой первый лендинг.
- Длительность модуля — 1 месяц
Забронировать место
Вашего ребенка невозможно оторвать от смартфона или планшета? Модуль «Создание сайта за 24 часа. Лендинг на Tilda» в международной КиберШколе KIBERone поможет направить его увлечение в правильное русло — даже первоклашки без навыков дизайна и написания кода смогут пользоваться этим мощным конструктором для создания привлекательных одностраничных сайтов и эффектных посадочных страниц.
Особенности модуля «Создание сайта. Лендинг на Tilda» в КиберШколе
Tilda — конструктор сайтов и идеальный инструмент для быстрого создания landing page. Для работы в нем не требуется знания языков программирования, так как все web-ресурсы создаются из нескольких сотен готовых блоков-модулей, а настройки осуществляются при помощи мышки и клавиатуры.
У Tilda есть около 500 шаблонов разнообразных сайтов и на этой платформе можно реализовать любой ресурс: от уникального лендинга, сайта-визитки, сайта-резюме и блога до интернет-магазинов и информационных порталов.
Занятия в КиберШколе KIBERone проводят креативные тьюторы с солидным опытом работы в сфере IT-технологий и умеющие находить общий язык с детьми. Учебный процесс — это 80% практических занятий, на которых ребята не только узнают, что такое лендинг, как он работает и чем отличается от одностраничного сайта, но и научатся:
- составлять дизайн обложки, подбирать цвета, шрифты и изображения, чтобы выдержать один стиль;
- проектировать, оформлять и запускать конверсионные лендинги;
- продумывать структуру, делать адаптивы и вставлять HTML-код;
- добавлять текст, фото, интерактивные изображения или видео в несколько кликов;
- «упаковывать» landing page онлайн-чатом, системами аналитики, формой регистрации или обратной связи, приемом онлайн-платежей, интерактивными картами, таймлайнами;
- устанавливать интеграцию с социальными сетями, почтовыми рассылками, подключать статистику, настраивать цели, тестирование и SEO;
- редактировать, делать редизайн страницы, менять заголовок, удалять блоки.
По окончании модуля школьники смогут самостоятельно разрабатывать одностраничные сайты и лендинги.
Этот модуль станет важным шагом для вашего ребенка на пути к высокооплачиваемой работе в IT-сфере. Полученные навыки позволят ему решать любые задачи своего бизнеса или зарабатывать на создании сайтов, лендингов, визиток, корпоративных порталов и т.д.
5 Уроки дизайна целевых страниц от розничных магазинов
Вспомните свой последний опыт посещения магазина. В какие отделы магазина вы заходили? Какие предметы привлекли ваше внимание? Вы нашли то, что искали, или нечто большее?
Розничные торговцы часто организуют свои магазины определенным образом, чтобы облегчить покупательский путь. Это означает, что товары-лидеры продаж должны быть на уровне глаз на полках, товары расположены в проходах ближе к кассе, а дополнительные покупки можно легко сделать возле кассы. Это стратегические решения, которые предприятия используют для увеличения заказов и стимулирования продаж с минимальными усилиями.
Точно так же вы должны разрабатывать свою целевую страницу с таким же мышлением.
Разместите основные точки продажи или товары там, где они будут естественным образом привлекать внимание посетителей. Отображайте ваш приоритетный контент заранее и сохраняйте менее важную информацию на заднем плане. И точно так же, как в розничном магазине, вам нужно обновить свой макет — добавить новые продукты и контент, реорганизовать на основе данных о клиентах и создать новые потоки для покупок.
В конце концов, организация розничного магазина и разработка целевой страницы преследуют две общие цели: использование интереса для повышения конверсии.
Итак, давайте углубимся в некоторые ключевые выводы, которые все маркетологи могут извлечь из этих розничных стратегий.
Соответствуйте ожиданиям клиентов, а затем расширяйте их интересы
Независимо от того, разрабатываете ли вы витрину магазина или целевую страницу, вам необходимо учитывать, как ваша аудитория нашла ваш бизнес.
Для веб-сайтов и целевых страниц это обычно означает поиск в Google, цифровую рекламу или публикацию в социальных сетях. Клиенты приходят в ваш бизнес с конкретным намерением, и очень важно соответствовать этому мотиву.
Подумайте о первоначальном любопытстве, которое привлекло вашу аудиторию. В розничном магазине это может быть связано с интересом к категории продаж или рекламными объявлениями, размещенными на внешней стороне здания. Первое, что делает магазин, — это размещает вывески и рекламные материалы, чтобы подтвердить текущие специальные предложения и категории предлагаемых товаров.
Представьте себе предложение «купи один — получи один бесплатно», также известное как BOGO. Когда эти специальные предложения действуют, магазин стратегически размещает рекламу всех продуктов, подпадающих под действие предложения.
Ваша целевая страница должна быстро показать, что представляет собой ваше предложение и как его применить.
Первое, что увидят клиенты, должно быть связано с их интересами и продуктами, которые вы разместили в своем объявлении.
Если в рекламе вы сосредоточились на высококачественных сверхмягких свитерах из хлопка пима, эти свитера должны быть в центре вашей целевой страницы. Эта стратегия позволяет поддерживать интерес и извлекать выгоду из импульсивных решений. Потребителям должно быть легко принять меры, прежде чем они потеряют интерес к вашему предложению.
Сосредоточьтесь на бестселлерах
Успешные розничные торговцы усвоили девиз «На уровне глаз — на уровне покупки». Эта философия основана на идее, что вы хотите разместить свои самые продаваемые товары на средней полке, которая находится на уровне глаз большинства взрослых.
Покупатели уделяют больше внимания товарам, которые находятся на уровне их глаз, а не товарам, спрятанным на нижних или верхних полках. По этой причине товары для детей могут быть ниже, чем типичные бестселлеры, а товары для мужчин могут быть немного выше. В любом случае, размещение продуктов или контента одинаково важно для стратегии вашей целевой страницы.
Клиенты не должны бороться за то, чтобы найти ваши самые выгодные предложения или ценностные ориентиры, особенно когда окно возможностей невелико.
Подумайте, куда обычно падает взгляд клиента на целевой странице. Вы не хотите, чтобы важные детали вашего предложения были спрятаны слишком далеко внизу или сбоку страницы, где люди могут их не заметить. Попробуйте сравнить макет вашей целевой страницы с Z-образным или F-образным дизайном. Эти методы используют естественную схему чтения для отображения контента в потоке, который соответствует их привычкам просмотра.
Не знаете, какой контент привлекает внимание клиентов на вашей странице? Такие инструменты, как тепловые карты, дают вам визуальное представление о поведении ваших клиентов на вашей целевой странице, чтобы помочь вам оптимизировать макет.
Создайте связный поток
Размещение товара — важное решение в розничном бизнесе — не только при размещении на полке, но и применительно к UX и UI.
Рассмотрим обувной магазин. Цели покупателей обуви могут сильно различаться, поэтому сторонний продавец обуви должен охватывать множество типов товаров.
Но они не могут просто разбрасывать товары по всему магазину и рассчитывать на продажи.
Например, размещение кроссовок рядом с официальной одеждой может быть не самой выгодной идеей. Вместо этого кроссовки могут быть где-то рядом с походными ботинками или баскетбольными кроссовками. С помощью этой стратегии обувной ритейлер может стимулировать покупателей-спортсменов просматривать различные аспекты своих интересов в одном разделе магазина. Если менеджер магазина понимает, что большинство его покупателей — спортсмены, он может поставить спортивную обувь спереди, а модельные туфли — вдоль задней стены.
Думайте о потоке вашей целевой страницы таким же образом.
Клиент, который нажимает на ваше объявление, проявляет особый интерес. Когда они переходят на вашу целевую страницу, опирайтесь на это любопытство и предоставляйте новый контент по мере их дальнейшего изучения. Если вы рекламируете непромокаемые куртки, начните с подробностей о том, как ваши куртки ведут себя под дождем.
Затем вы можете использовать функции ветровки и, ближе к концу, предложить дополнительные функции или дополнительные продукты, такие как непромокаемые ботинки.
Создавайте ценные пакеты
Поток контента выходит за рамки представления продуктов в порядке интереса. Размещение товара в розничных магазинах — это создание возможностей для дополнительных и перекрестных продаж. Однако эта тактика должна быть стратегической и применяться таким образом, чтобы покупатель чувствовал, что он делает открытие о дополнительном продукте, а не подвергается давлению. На своей целевой странице вы можете увеличить заказы на покупку и ценность ваших кликов.
Представьте себя в продуктовом магазине. Вы заканчиваете добавлять все свои продукты в корзину и направляетесь к кассе. Пока вы стоите в очереди, ваш взгляд падает на выбор конфет и жевательной резинки. Вы понимаете, что быстрый перекус звучит аппетитно, поэтому берете плитку шоколада, но потом беспокоитесь о неприятном запахе изо рта, поэтому на всякий случай берете мятную жевательную резинку.
В обувном магазине эта часть процесса оформления заказа может выглядеть иначе. Кто-то, покупающий эти новые полностью белые кроссовки, на которые он копил деньги, может заинтересоваться чистящими средствами для обуви или гидроизоляционными средствами в списке по реестру. Или кассир может предложить бесплатную пару спортивных носков при заказе на определенную сумму.
Вы можете сделать все это так же эффективно на своей целевой странице или странице оформления заказа.
Когда покупатель добавляет товар в свою корзину, у вас есть возможность составить набор или предложить дополнительные продукты, которые могут повысить интерес. Например, если кто-то решит, что готов купить вашу непромокаемую куртку, это может быть отличной возможностью сообщить им и о ваших непромокаемых ботинках.
Вы можете представить эту информацию в разделе «Часто покупаемые вместе». Или включите визуализацию, например изображение образа жизни клиента, использующего несколько предметов, инфографику о том, как набор предметов работает вместе, или изображение похожих предметов, объединенных вместе.
Не заставляйте клиентов выбирать между всем или ничем. Сосредоточьтесь на основном предложении и представьте дополнительные предложения как предложения, а не как необходимость. Вы хотите, чтобы покупатели чувствовали, что они делают открытие и узнают больше о вашем бренде, а не размещают в своей ленте товары со скидкой.
Обновления, основанные на знаниях
Эти стратегии основаны на решениях, основанных на знаниях. Розничные магазины используют эти методы на основе ценных данных и информации, полученной в магазине. Они зависят от фокус-групп, опросов клиентов и продаж продуктов, чтобы определить свою стратегию. Что еще более важно, ни одна из этих стратегий не является статической.
Новый товар в задней части магазина вызывает большой интерес? Попробуйте переместить его на передний план, чтобы увидеть, продается ли он еще больше. Нужно распространить информацию о новом типе продукта? Предложите BOGO в разделе магазина, чтобы связать его с популярными продуктами.
Розничные торговцы знают, что им необходимо обновлять свои магазины не только сезонно, но и часто, чтобы не отставать от потребительских тенденций и изменения интереса к товарам. Они используют данные и опыт клиентов для уточнения этих решений, так же, как вы должны это делать со своей целевой страницей.
Как продавец электронной коммерции у вас есть значительное преимущество при принятии решений на основе данных. Ваша аналитика должна сообщать вам, что конвертируется, а что нет, когда клиенты теряют интерес и какая часть вашей воронки продаж отстает. Более того, вы можете провести целенаправленное тестирование, чтобы расширить эти знания и принять твердые решения.
Вы должны постоянно корректировать свои целевые страницы в соответствии с новыми знаниями. От дизайна до повествования — каждый аспект вашей целевой страницы можно адаптировать и нужно быть готовым к изменениям. Если вы не обновляете свой контент часто, вы рискуете потерять постоянных клиентов, ограничить охват новых клиентов и отстать от отраслевых стандартов.