Landing page js: ananikets18/Responsive-landing-page-using-HTML-CSS-JS-: Responsive landing page using HTML CSS & Javascript

2. Перейдите на вкладку Код JavaScript и нажмите Добавить новый скрипт .

3.   Имя (1) ваш скрипт.

Выберите  Позиция (2)  для вашего кода:

• головка,
• верх кузова,
• днище кузова

и страница

• главная страница,
• конверсионная страница,
• оба.

Вставьте код в поле Content (4) .

Нажмите  Добавить скрипт   (5)  , чтобы добавить скрипт на целевую страницу.

4.  Проверьте, правильно ли работает код на вашей целевой странице.

Помните, что мы не можем предоставить техническую поддержку для пользовательских скриптов, добавленных на вашу целевую страницу.

5. Созданный скрипт можно отредактировать, временно отключить или удалить навсегда. Для этого перейдите на вкладку JavaScript Code и выберите одно из действий:

1. Отключить/Включить
2. Редактировать
3. Удалить

Как быстро создавать удобные для разработчиков целевые страницы

В этом посте вы узнаете, как быстро создавать быстрые и красивые целевые страницы, сохраняя при этом гибкость и полный контроль над исходным кодом.

Недавно мне пришлось создать целевую страницу для моего нового проекта — Spike Billing , и я искал лучшее решение для ее создания с отличным балансом простоты и гибкости.

Это полный пост моей ветки в Твиттере о создании целевых страниц, удобных для разработчиков:

Целевых страниц, удобных для разработчиков, всего за несколько часов:

1. @nuxt_js для серверных и быстрых страниц с использованием Vue
2. @tailwindui для предварительно созданных и стилизованных компонентов пользовательского интерфейса с использованием @tailwindcss
3. @vercel — бесплатный, быстрый и простой хостинг

Вот почему я сделал этот выбор:

— Арунас Скириус (@arukomp) 6 июня 2022 г.

Проблема с компоновщиками страниц

Как опытный разработчик, мне нравится контролировать свои сайты. Возможность просматривать, редактировать и публиковать любые точные изменения в HTML, CSS, JavaScript и всей логике бэкэнда. Это , а не , что могут дать или обещать многие «создатели целевых страниц».

На самом деле я рассматривал простые конструкторы страниц, такие как cardd.co, wix.com и некоторые другие. Но это было ошеломляюще по нескольким причинам:

• Это было ужасно . Я не смог найти дизайн, который искал, среди предоставленных шаблонов. Даже если я находил что-то по душе, возможности настройки были ограничены.
• Это был новый навык, который нужно было изучить . С расширенным редактором, таким как у Wix, я был ошеломлен количеством доступных опций. Почувствовал, что мне нужно изучить совершенно новый инструмент. Сколько времени это займет?
• Это было дорого . Многие конструкторы страниц можно использовать бесплатно, но как только вы захотите удалить брендинг/водяной знак, увеличить пропускную способность/просмотры страниц или добавить некоторые плагины, это будет стоить вам денег.

Я уже разбираюсь в HTML/CSS/JS, так зачем мне компоновщик страниц? Я не. И тогда я решил использовать инструменты, которые у меня уже есть на поясе.

Выбор инструментов

Лучше всего использовать инструменты, которые вы уже знаете, потому что это ускорит для вас весь процесс. Но ради примера я покажу те инструменты, которые выбрал лично для разработки своих лендингов.

Внешний интерфейс

Целевые страницы в основном представляют собой внешний интерфейс — HTML/CSS/JS. Я уже создал несколько продуктов с использованием Vue.js, и мне это очень удобно, поэтому я выбрал Nuxt.js v3 для создания внешнего интерфейса.

Почему бы не просто проект Vue.js? Потому что мне нравится тот факт, что Nuxt.js очень функционален и прост в использовании, при необходимости легко добавить больше страниц в будущем. У него также отличная экосистема, поэтому я верю, что он будет работать еще долгое время.

Но опять же, одним из основных моментов здесь является скорость — мы хотим создать целевую страницу как можно быстрее. Поэтому я выбрал Nuxt.js.

Кстати, я также писал о Nuxt.js и now.sh (ребрендинге в Vercel) 3 года назад, так что я давний поклонник Nuxt.js!

Плюсы Nuxt.js:

• легкая, быстрая, очень минимальная конфигурация
• маршрутизация по соглашению (файл «pages/cars.vue» представляет ваш /cars маршрут)
• использует Vite — инструменты нового поколения
• сервер -side rendering
• поддерживается Vercel (об этом поговорим позже)

Если вы не в экосистеме Vue.js и предпочитаете использовать React или Svelte, то для вас все еще есть несколько отличных вариантов:

• Next.js для React (сделано Vercel)
• Remix для React
• SvelteKit для Svelte

UI framework

Посмотрим правде в глаза — почти никто больше не пишет чистый CSS с нуля. Фреймворки CSS помогают разработчикам работать на быстрее, и более систематизированно.

TailwindCSS — хорошо известная CSS-инфраструктура, с которой я работаю уже давно. Я хорошо это понимаю, и это помогает мне быстрее создавать целевую страницу!

При этом у меня уже была лицензия на TailwindUI — набор предварительно созданных компонентов пользовательского интерфейса с использованием TailwindCSS, поэтому я могу просто скопировать/вставить код в свою собственную кодовую базу в качестве отправной точки. Что быстрее, чем копирование/вставка? 🤷‍♂️

Плюсы TailwindUI:

• готовых примеров кода HTML/React/Vue. Просто скопируйте и вставьте!
• предлагает широкий спектр компонентов пользовательского интерфейса приложений, маркетинга и электронной коммерции
• отзывчивый!

Минусы TailwindUI:

• дорого — 239 евро (+ налоги) это дороже, но это покупка на всю жизнь, и команда постоянно добавляет больше компонентов/примеров в свою библиотеку

Опять же, есть доступны несколько различных вариантов построения пользовательского интерфейса. Одни дешевле, другие лучше:

• Flowbite Pro — альтернатива TailwindUI, которая постоянно развивается. У него также есть бесплатные компоненты, которые можно использовать, если вы можете создать пользовательский интерфейс самостоятельно.
• UntitledUI — обширная библиотека компонентов пользовательского интерфейса, все в Figma. Это позволяет вам быстро перетаскивать компоненты в Figma, чтобы опробовать различные дизайны, но вам придется самостоятельно преобразовать это в HTML/CSS. Просто посмотрите на эти примеры целевых страниц!
• Tailgrid — красивые компоненты, сделанные с помощью TailwindCSS
• ThemeForest — торговая площадка шаблонов. Если вы не можете найти то, что ищете выше, попробуйте просмотреть эти шаблоны. С предоставленным HTML/CSS вам придется внести очень много изменений перед запуском.

Хостинг

Для хостинга целевой страницы вам нужно что-то, что просто работает быстро из коробки. Это означает глобальные функции CDN, SSL и, возможно, Edge. К счастью, в настоящее время эти опции становятся стандартными, и есть довольно много услуг на выбор.

Vercel был моим выбором для размещения статических страниц или страниц, отображаемых на сервере, и поддерживает Nuxt.js из коробки с развертыванием в один клик.

После того, как я сделал целевую страницу в Nuxt.js, развернуть ее через Vercel стало проще простого! Это быстро, просто, а главное — бесплатно (для некоммерческих/личных сайтов).

Плюсы Vercel:

• самая простая в мире настройка развертывания (просто подключите свой репозиторий GitHub!)
• начать работу бесплатно (20 долларов США в месяц, если у вас есть коммерческие сайты, но вы можете иметь неограниченное количество сайтов)
• бессерверные функции, если они нужны (и они мне были нужны)

Вот несколько сильных альтернатив:

• Netlify — очень похож на Vercel тем, что он бесплатный, быстрый, простой в использовании и поддерживает Nuxt.js из box, а также имеет бессерверные функции (лямбды)!
• Render — бесплатный и простой в использовании хостинг приложений, включая приложения javascript, такие как Nuxt. js. Он поддерживает более продвинутые сервисы, такие как PostgreSQL/Redis, если это необходимо!
• Платформа приложений DigitalOcean — недавнее предложение от DO позволяет легко и бесплатно развертывать простые приложения, такие как наши целевые страницы.

Создание целевой страницы за 2 часа

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

1. Создайте новый проект Nuxt.js

Для этого я выбрал новейшую версию Nuxt.js-кандидата на выпуск, чтобы использовать Vue.js 3, с которым я знаком:

 npx nuxi init целевая страница
 

2. Добавьте TailwindCSS в проект

Установите зависимости:

 npm install -D tailwindcss [электронная почта защищена]
 

Создайте новый файл конфигурации tailwind. config.js :

 npx tailwindcss init
 

Обновите nuxt.config.ts и включите конфигурацию postcss для попутного ветра

 export default defineNuxtConfig({
    // ... другие настройки
    посткссс: {
        плагины: {
            попутный ветер: {},
            автопрефикс: {},
        },
    }
})
 

Создайте новый файл — assets/css/main.css — со следующим содержимым:

 @tailwind base;
компоненты @tailwind;
утилиты @tailwind;
 

Затем вернитесь к nuxt.config.ts и добавьте параметр конфигурации для загрузки этого файла CSS в макет:

 export default defineNuxtConfig({
    CSS: [
        'активы/css/main.css',
    ],
    
    // другие опции
})
 

Обновите файл tailwind.config.js , включив в него файлы содержимого, которые следует сканировать на наличие классов Tailwind:

 модуль.экспорт = {
  содержание: [
    "./компоненты/**/*.{js,vue,ts}",
    ".

  
 /макеты/**/*.vue",
    "./страницы/**/*.vue",
    "./плагины/**/*.{js,ts}",
    "./прил.{js,vue,ts}",
  ],
  тема: {
    продлевать: {},
  },
  плагины: [],
}
 

Хорошая работа! Теперь TailwindCSS установлен в вашем проекте Nuxt.js.

3. Начните создавать свой пользовательский интерфейс в Nuxt.js

Здесь вы ищете вдохновение или копируете/вставляете маркетинговые компоненты из таких мест, как TailwindUI. Я свои скопировал в отдельные разделы, вот так:

 компонентов
 ﹂HeroSection.vue
 ﹂FeatureSection.vue
 ﹂CtaSection.vue
 ﹂Footer.vue
 

Который я позже добавил в app.vue вот так: