Введение

Целевая страница — важная часть любого веб-сайта. Это первое, что заметят ваши посетители, так что произведите хорошее первое впечатление. Сегодня в этой статье мы покажем, как создать целевую страницу с помощью Tailwind CSS и технологий без кода.

Что такое Tailwind CSS?

Tailwind CSS — это ориентированная на утилиты CSS-инфраструктура для быстрого создания индивидуальных пользовательских интерфейсов. Он предоставляет набор предварительно разработанных классов CSS, которые можно использовать для простого создания сложных дизайнов без необходимости использования уникального кода CSS. Tailwind CSS — популярный выбор для фронтенд-разработчиков и дизайнеров, пытающихся создавать современные, гибкие веб-сайты и приложения, поскольку он ориентирован на скорость и эффективность.

Что такое инструменты без кода?

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

Эти инструменты предназначены для нетехнических пользователей, таких как владельцы бизнеса, маркетологи и предприниматели, которые хотят создавать свои собственные продукты, не нанимая команду разработчиков. Limey, Webflow, Bubble, Adalo, Wix и Squarespace — вот некоторые известные решения без кода.

Как создать сайт с помощью Tailwind CSS

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

Теперь давайте создадим базовую целевую страницу с помощью Tailwind CSS. Этот код использует HTML для содержимого и CSS для оформления с помощью Tailwind CSS.

Создайте на своем компьютере папку с именем tailwindcss-app, а затем создайте в ней файл index.html. Это все, что нам нужно для этого очень простого примера CSS Tailwind. Конечно, можно создавать еще более продвинутые проекты, сочетающие фреймворки JavaScript, такие как React, с конфигурацией Tailwind CSS. Понимание основных понятий в этом примере значительно облегчит вам работу с более сложными CSS-проектами Tailwind в будущем, если вы все еще новичок.

Просто скопируйте и вставьте этот код в свой файл index.html, а затем откройте файл в веб-браузере, чтобы увидеть целевую страницу.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <title>My landing page</title>
  </head>
  <body>
    <header class="bg-indigo-900 p-5 shadow-md">
      <h1 class="text-2xl font-bold text-white">My landing page</h1>
      <nav class="mt-5 flex">
        <a href="#" class="mr-5 font-bold text-white hover:text-white">Home</a>
        <a href="#" class="mr-5 font-bold text-white hover:text-white">About</a>
        <a href="#" class="mr-5 font-bold text-white hover:text-white"
          >Services</a
        >
        <a href="#" class="font-bold text-white hover:text-white">Contact</a>
      </nav>
    </header>
    <main class="p-5">
      <h1 class="text-2xl font-bold text-gray-700">Hello World</h1>
      <p class="text-gray-700 mb-5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla
        mauris, sodales vitae viverra ut, tempus ut sem. Aenean vel libero
        pharetra elit feugiat varius. Praesent hendrerit venenatis velit id
        hendrerit. Fusce tristique tortor at suscipit condimentum. Maecenas eu
        neque nibh. Curabitur interdum non nibh ut pharetra. Proin pulvinar
        pharetra turpis, nec ullamcorper neque ultricies a. Ut et porta nibh, in
        feugiat risus. Morbi nec feugiat felis. Proin placerat dui id feugiat
        lobortis. Sed sed libero ligula. Phasellus molestie turpis odio, a
        convallis diam euismod a.
      </p>
      <img
        src="https://picsum.photos/200/300"
        alt="Random Image"
        class="w-64 mb-5"
      />
      <p class="text-gray-700">
        Praesent tincidunt magna vitae tellus dapibus, quis ultrices libero
        ornare. Etiam ligula nisi, sagittis ut vestibulum non, pulvinar
        ullamcorper ex. In tincidunt tortor et dui sagittis, quis posuere sem
        condimentum. Integer a fermentum quam, vitae gravida lorem. Sed bibendum
        et nunc eget laoreet. Nulla eget auctor nulla, a convallis tortor.
        Curabitur blandit risus in velit efficitur, commodo consequat turpis
        lobortis. Maecenas suscipit sed dolor accumsan bibendum. Curabitur
        laoreet ligula at semper tempus. Donec ac nibh nec orci elementum
        accumsan at id diam. Vivamus dui nibh, ultricies ut fermentum sit amet,
        dapibus quis dui. Donec lacinia leo quis consequat pharetra. Ut
        malesuada lacinia mi eget efficitur.
      </p>
    </main>
  </body>
</html>

Вы должны увидеть целевую страницу с текстом-заполнителем и изображением, которое автоматически меняется при перезагрузке веб-страницы. Взгляните на документацию на сайте Tailwind CSS, и вы увидите, как легко изменить стиль целевой страницы. Поля, отступы, цвета и макет страницы можно настроить с помощью всего нескольких изменений класса. Честно говоря, документация Tailwind CSS — лучшее место для изучения того, как использовать код.

Когда ваша целевая страница готова, пришло время опубликовать ее в Интернете. Существует множество бесплатных бессерверных платформ, которые позволяют вам это делать, например GitHub Pages, Vercel и Netlify. Информацию о других установках Tailwind CSS, использующих интерфейс командной строки и такие фреймворки, как Next.js, Laravel и Vite, см. в разделе страницы Начало работы с Tailwind CSS.

Как создать сайт с помощью инструментов без кода

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

У инструмента без кода Webflow есть действительно хороший пример этого на своем веб-сайте, который вы можете увидеть ниже в этом анимированном gif-файле.

Шаг 1: Выбор инструмента без кода для целевой страницы

Инструменты без кода — это платформы, которые позволяют создавать веб-сайты и приложения без написания кода. Выберите инструмент, с которым вы знакомы и который соответствует вашим требованиям. Лично я выбрал Limey из-за его простоты использования и гибкости.

Шаг 2: Мозговой штурм для контента целевой страницы

Крайне важно спланировать целевую страницу до того, как вы начнете ее разрабатывать. Определите цель вашей целевой страницы, информацию, которую она будет предоставлять, и ее функции, такие как графика, текст, кнопки и т. д.

Шаг 3: Выбор хорошего шаблона

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

Шаг 4. Интеграция шаблона с Tailwind CSS

Tailwind CSS — это CSS-фреймворк, ориентированный на функциональность и упрощающий создание индивидуального дизайна. Чтобы добавить CSS Tailwind на свою целевую страницу, добавьте файл CSS в инструмент без кода или ссылку на него в заголовке HTML-файла.

Шаг 5: Настройка дизайна целевой страницы

Настройте свою целевую страницу, используя функции и инструменты, предоставляемые вашим решением без кода. Сделайте свою целевую страницу эстетически привлекательной и удобной для пользователя, добавив фотографии, текст, кнопки и другие функции. Перед публикацией протестируйте целевую страницу, чтобы убедиться, что все работает должным образом. Изучите макет, функциональность и удобство использования на наличие недостатков.

Шаг 6. Разверните целевую страницу в Интернете

Пришло время опубликовать вашу целевую страницу после того, как вы протестировали ее и убедились, что все работает правильно. Сделайте целевую страницу доступной на своем веб-сайте или в домене.

Последние мысли

Подводя итог, можно сказать, что создание целевой страницы с помощью Tailwind CSS и без инструментов кодирования — отличный способ создать профессионально выглядящую целевую страницу без написания кода. Вы можете создать целевую страницу, которая произведет фантастическое первое впечатление на ваших посетителей, немного подумав, настроив ее и протестировав. Еще один отличный вариант — использовать такую ​​платформу, как Tailmars, где выполняется большая часть работы, и вам просто нужно перемещать код, чтобы ваша страница выглядела так, как вы хотите.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.