← Все уроки
Урок 02

Первый сайт за 15 минут

Установим Cursor, создадим лендинг и подключим отправку заявок в Telegram

CursorHTML/CSSTelegram Bot
Скролль вниз ↓

Что мы создадим

Полноценный лендинг с формой, которая отправляет заявки в Telegram

my-landing.com

Ваш Продукт

Решение которое изменит ваш бизнес

Быстро
Результат за 1 день
🎯
Точно
Под ваши задачи
💰
Выгодно
Без переплат
Оставить заявку
Hero-секцияПреимуществаФорма → Telegram

Установка Cursor

1

Скачай Cursor

Открой cursor.com и нажми Download for Windows

🌐
cursor.com

Нажми кнопку "Download for Windows"

2

Установи

Запусти скачанный .exe файл

→ Запусти Cursor-Setup.exe

→ Нажимай "Далее" / "Next"

→ Дождись окончания установки

3

Запусти Cursor

Найди в меню Пуск или на рабочем столе

При первом запуске выбери тему (тёмную) и войди в аккаунт

Знакомство с Cursor

4 зоны которые нужно знать

Cursor — my-landing
index.html×
<!DOCTYPE html>
<html>
<head>
  <title>Мой лендинг</title>
  <link rel="stylesheet"
    href="style.css">
</head>
<body>
  <h1>Привет!</h1>
</body>
</html>
Редактор кода
TERMINAL
$
Терминал
📁ExplorerФайлы проекта слева
✏️РедакторКод в центре
🤖AI ChatЧат с AI справа
⌨️ТерминалКоманды снизу
Шаг 1

Создаём проект

1.Создай папку my-landing на рабочем столе
2.В Cursor: File → Open Folder → выбери эту папку

Теперь открой AI-чат и напиши:

В Cursor AI Chat

Создай файл index.html с базовой структурой HTML-страницы. Заголовок — «Мой лендинг»

Cursor — my-landing
index.html×
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">
  <title>Мой лендинг</title>
</head>
<body>
  
</body>
</html>
Шаг 2

Генерируем лендинг

Пишем промпт — AI создаёт весь код

В Cursor AI Chat

Сделай красивый одностраничный лендинг в index.html со встроенными стилями: 1. Hero-секция: заголовок «Ваш Продукт», подзаголовок, кнопка «Оставить заявку» 2. Секция преимуществ: 3 карточки с иконками (⚡ Быстро, 🎯 Точно, 💰 Выгодно) 3. Секция «О нас»: короткий текст про компанию 4. Секция контактов: форма с полями Имя, Телефон, Сообщение и кнопка Отправить Стиль: современный, тёмная тема, градиенты, скруглённые углы. Шрифт — системный.

localhost:5500/index.html

Ваш Продукт

Решение которое изменит ваш бизнес навсегда

Быстро
Результат за 1 день
🎯
Точно
Под ваши задачи
💰
Выгодно
Без переплат

AI сгенерировал полный лендинг из одного промпта!

Шаг 3

Улучшаем стили

Не нравится что-то? Просто скажи AI что поменять. Не нужно знать CSS!

В Cursor AI Chat

Сделай кнопку больше и добавь ей анимацию при наведении

В Cursor AI Chat

Поменяй градиент Hero на сине-зелёный

В Cursor AI Chat

Добавь отступы между секциями побольше

Совет: описывай изменения простыми словами. "Сделай покрасивее" тоже работает!

Cursor — my-landing
style.css×
.hero {
  background: linear-gradient(
    135deg,
    #0ea5e9 0%,
    #10b981 100%
  );
  padding: 80px 20px;
  text-align: center;
}

.btn {
  padding: 14px 36px;
  border-radius: 12px;
  font-size: 18px;
  transition: transform 0.2s;
}

.btn:hover {
  transform: scale(1.05);
}
Шаг 4

Форма заявки

Форма уже есть в лендинге. Убедимся что у неё правильные поля.

В Cursor AI Chat

Проверь что в форме контактов есть поля: - Имя (обязательное) - Телефон (обязательное) - Сообщение (необязательное) - Кнопка «Отправить» Добавь красивую валидацию: если поле пустое и обязательное — подсвети красным.

Что получим:

  • Поля с плейсхолдерами
  • Валидация обязательных полей
  • Красная подсветка при ошибке
  • Кнопка отправки
localhost:5500/index.html

Оставить заявку

Создаём Telegram бота

Чтобы заявки приходили в Telegram, нужен бот

1

Найди @BotFather

Открой Telegram, найди @BotFather в поиске

2

Создай бота

Напиши /newbot и следуй инструкциям. Придумай имя.

3

Сохрани токен

BotFather выдаст токен вида 123456:ABC-DEF... Сохрани его!

4

Узнай Chat ID

Напиши боту /start, затем открой ссылку ниже

B
BotFather
bot
/newbot
Alright, a new bot. How are we going to call it? Please choose a name.
Мой лендинг бот
Good. Now choose a username. It must end in 'bot'.
my_landing_notify_bot
Done! Your new bot token is:
7012345678:AAF...
Keep it safe!
Узнать Chat ID
# 1. Напиши своему боту /start в Telegram
# 2. Затем открой в браузере:
# https://api.telegram.org/bot<ТВОЙ_ТОКЕН>/getUpdates

# В ответе найди "chat":{"id": 123456789}
# Это и есть твой Chat ID
Шаг 5

Подключаем Telegram

Попросим AI написать JavaScript который отправляет данные формы в Telegram

В Cursor AI Chat

Добавь JavaScript в index.html, который: 1. При отправке формы собирает данные (имя, телефон, сообщение) 2. Отправляет их в Telegram через Bot API: - Токен бота: СЮДА_ВСТАВЬ_ТОКЕН - Chat ID: СЮДА_ВСТАВЬ_ID 3. Показывает «Заявка отправлена!» при успехе 4. Показывает ошибку если что-то не так 5. Блокирует кнопку на время отправки

script — отправка в Telegram
<"text-[#a78bfa]">class="text-[#f472b6]">script>
const TOKEN = 'ВАШ_ТОКЕН';
const CHAT_ID = 'ВАШ_CHAT_ID';

document.querySelector('form')
  .addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = e.target.name.value;
    const phone = e.target.phone.value;
    const msg = e.target.message.value;

    const text = `Новая заявка!
Имя: ${name}
Телефон: ${phone}
Сообщение: ${msg}`;

    const url = `https://api.telegram.org/
      bot${TOKEN}/sendMessage`;

    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type':
          'application/json'
      },
      body: JSON.stringify({
        chat_id: CHAT_ID,
        text: text
      })
    });

    if (res.ok) {
      alert('Заявка отправлена!');
      e.target.reset();
    }
  });
</"text-[#a78bfa]">class="text-[#f472b6]">script>

AI сгенерирует этот код автоматически. Тебе нужно только вставить свой токен и Chat ID!

Тестируем!

Заполняем форму → заявка приходит в Telegram

localhost:5500/index.html

Оставить заявку

🤖
Мой Landing Бот
bot
Новая заявка!
Имя: Иван Петров
Телефон: +7 999 123-45-67
Сообщение: Хочу заказать

Что мы сделали

Установили Cursor
Создали проект одной командой
Сгенерировали лендинг промптом
Настроили стили без знания CSS
Добавили форму заявки
Создали Telegram-бота
Подключили отправку заявок
Протестировали всё от начала до конца

Следующий урок

Докрутим лендинг до premium: анимации, отзывы, тарифы и адаптив

Урок 3: Докручиваем до Premium →