Видео урока скоро будет доступно
Создаём полноценный лендинг для школы иностранных языков с помощью AI — от структуры до публикации.
После этого урока вы:
Лендинг (посадочная страница) — это сайт, который создаётся для одной цели: чтобы посетитель совершил нужное действие (запись на пробный урок, подписка, заявка).
Отличие от обычного сайта:
Для школы или курса лендинг — это визитная карточка, которая должна вызывать доверие и желание записаться.
| Блок | Что должно быть | Зачем |
|---|---|---|
| Хедер | Логотип, меню, контакты | Сразу понятно, кто вы и как связаться |
| Hero (первый экран) | Заголовок-оффер, подзаголовок, кнопка «Записаться» | Захватить внимание за 3 секунды |
| О нас | Миссия, история, цифры | Сформировать доверие |
| Программы | Карточки курсов с описанием | Показать, чему вы учите |
| Преимущества | 3–4 ключевые фишки | Почему именно вы |
| Отзывы | Цитаты учеников + фото | Социальное доказательство |
| Лицензия | Номер лицензии, адрес | Законность и доверие |
| Форма связи | Имя, телефон, email, кнопка | Конверсия — сбор заявок |
| Футер | Контакты, соцсети, копирайт | Завершение и доп. контакты |
Адаптивный дизайн — сайт должен одинаково хорошо выглядеть на телефоне, планшете и компьютере.
Ключевой принцип — Mobile First:
Совет: Проверяйте адаптивность через инструменты разработчика (F12 → Toggle Device Toolbar) — так вы увидите, как сайт выглядит на разных экранах.
Откройте DeepSeek и вставьте промпт:
«Создай HTML-структуру лендинга для школы иностранных языков. Блоки: 1) Хедер с логотипом и контактами. 2) Первый экран: заголовок "Изучай английский с удовольствием", подзаголовок, кнопка "Записаться на пробный урок". 3) Блок "О нас": текст о школе, 3 цифры. 4) Блок "Программы": 3 карточки курсов. 5) Блок "Преимущества": 4 иконки с текстом. 6) Блок "Отзывы": 3 цитаты. 7) Блок "Лицензия и документы". 8) Форма связи: имя, телефон, email, кнопка. 9) Футер. Всё на русском, адаптивно, современный дизайн. Весь код в одном HTML-файле.»
Скопируйте полученный код в VS Code, создайте файл index.html и сохраните.
Запустите Live Server и посмотрите результат.
Оцените структуру: все ли блоки на месте? Понятно ли выглядит?
Попросите DeepSeek написать тексты для вашего лендинга. Вот промпты:
«Напиши текст для блока "О нас" для школы английского языка. Год основания, количество выпускников, методика (коммуникативный подход), сертификаты. Тон — дружелюбный, профессиональный. 100-150 слов.»
«Напиши 3 преимущества школы для блока "Преимущества". Например: индивидуальный подход, опытные преподаватели, современные методики.»
«Напиши 3 отзыва от учеников для школы английского. Имена вымышленные, текст от 2 до 4 предложений.»
Вставьте полученные тексты в соответствующие блоки лендинга.
Попросите AI предложить цветовую палитру:
«Предложи цветовую палитру для образовательного сайта. Хочу спокойные, но яркие цвета, вызывающие доверие и вдохновение. Дай коды HEX для основного, вторичного, акцентного цветов, а также для текста и фона.»
Вставьте полученные цвета в CSS-переменные в секции <style>:
Совет: Не обязательно использовать предложенные цвета —экспериментируйте! Попросите AI предложить 2-3 варианта палитры.
Замените текстовые плейсхолдеры в блоке преимуществ на иконки из Font Awesome.
Добавьте подключение в секцию <head> (если ещё нет):
Примеры иконок для преимуществ:
fa-user-graduate — индивидуальный подходfa-chalkboard-teacher — опытные преподавателиfa-laptop-code — современные методикиfa-users — группы разного уровняСпросите у AI: «Какие иконки Font Awesome использовать для блока преимуществ школы?»
Попросите AI улучшить стиль лендинга:
«Добавь стили для моего лендинга: современный, с округлыми углами, тенями, приятными цветами. Сделай адаптивным для телефона (Mobile First). Используй CSS-переменные для цветов.»
Проверьте адаптивность:
Если элементы «съезжают» — попросите AI исправить:
«На мобильном экране блок "Программы" не помещается. Сделай карточки курсов в одну колонку на телефоне.»
Добавьте JavaScript-код для обработки формы. Пока без отправки на сервер — просто показываем сообщение об успехе.
Вставьте перед закрывающим тегом </body>:
<script>
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Спасибо! Мы свяжемся с вами');
this.reset();
});
</script> e.preventDefault() — предотвращает перезагрузку страницы при отправке формы.
Протестируйте: заполните форму и нажмите «Отправить».
school-landing).Через 1–2 минуты сайт будет доступен по ссылке https://ваш_логин.github.io/school-landing/
Откройте опубликованный лендинг и проверьте:
Совет: Если что-то не так — скопируйте ошибку в DeepSeek и попросите исправить. Это и есть вайбкодинг!
Поздравляю! Вы создали полноценный лендинг для школы с помощью AI и опубликовали его в интернете.
Теперь:
Это уже не просто страница — это готовый инструмент для привлечения учеников!
https://picsum.photos/400/300).Что мы узнали?
Главный итог: Вы создали полноценный лендинг для школы (или другой организации) с помощью AI и опубликовали его в интернете. Это уже не просто страница — это готовый инструмент для привлечения учеников!
Дополнительные материалы: prompts.md, checklists.md