378 lines
20 KiB
HTML
378 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Обучение вайбкодингу | Vibe42</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0f1218; color: #f4f4f5; line-height: 1.6; }
|
||
a { color: #00b8cc; text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
.nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(15, 18, 24, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #1f2937; z-index: 1000; padding: 12px 0; }
|
||
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
|
||
.nav-brand { font-size: 20px; font-weight: bold; color: #00b8cc; }
|
||
.nav-links { display: flex; gap: 24px; }
|
||
.nav-links a { color: #f4f4f5; font-size: 14px; transition: color 0.3s; }
|
||
.nav-links a:hover { color: #00b8cc; text-decoration: none; }
|
||
|
||
.hero { padding: 160px 20px 100px; text-align: center; background: linear-gradient(180deg, #0f1218 0%, #1a1f2e 100%); }
|
||
.hero h1 { font-size: clamp(36px, 6vw, 64px); margin-bottom: 24px; line-height: 1.2; }
|
||
.hero p { font-size: clamp(18px, 2.4vw, 24px); color: #9ca3af; max-width: 700px; margin: 0 auto 40px; }
|
||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
.btn { padding: 14px 28px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; }
|
||
.btn-primary { background: #00b8cc; color: #0f1218; }
|
||
.btn-primary:hover { background: #00d4e8; transform: translateY(-2px); }
|
||
.btn-secondary { background: transparent; border: 2px solid #00b8cc; color: #00b8cc; }
|
||
.btn-secondary:hover { background: #00b8cc; color: #0f1218; }
|
||
|
||
section { padding: 80px 20px; max-width: 1000px; margin: 0 auto; }
|
||
section h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 40px; color: #00b8cc; text-align: center; }
|
||
|
||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||
.card { background: #1a1f2e; border-radius: 12px; padding: 28px; border: 1px solid #2d3748; transition: transform 0.3s, border-color 0.3s; }
|
||
.card:hover { transform: translateY(-4px); border-color: #00b8cc; }
|
||
.card h3 { font-size: 22px; margin-bottom: 16px; color: #f4f4f5; }
|
||
.card p { color: #9ca3af; font-size: 16px; }
|
||
.card-icon { font-size: 36px; margin-bottom: 16px; }
|
||
|
||
.timeline { position: relative; padding-left: 40px; }
|
||
.timeline-item { margin-bottom: 40px; position: relative; }
|
||
.timeline-item::before { content: ""; position: absolute; left: -40px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #00b8cc; }
|
||
.timeline-item::after { content: ""; position: absolute; left: -32px; top: 24px; bottom: -40px; width: 2px; background: #2d3748; }
|
||
.timeline-item:last-child::after { display: none; }
|
||
.timeline-year { font-size: 14px; color: #00b8cc; font-weight: bold; margin-bottom: 8px; }
|
||
.timeline-title { font-size: 20px; font-weight: bold; margin-bottom: 12px; }
|
||
.timeline-desc { color: #9ca3af; font-size: 16px; }
|
||
|
||
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 40px; }
|
||
.stat-card { text-align: center; padding: 32px 20px; background: #1a1f2e; border-radius: 12px; border: 1px solid #2d3748; }
|
||
.stat-number { font-size: 42px; font-weight: bold; color: #00b8cc; margin-bottom: 8px; }
|
||
.stat-label { color: #9ca3af; font-size: 14px; }
|
||
|
||
.platform-list { list-style: none; }
|
||
.platform-list li { padding: 16px 0; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 16px; }
|
||
.platform-list li:last-child { border-bottom: none; }
|
||
.platform-icon { width: 48px; height: 48px; background: #2d3748; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||
.platform-name { font-weight: bold; font-size: 18px; }
|
||
.platform-desc { color: #9ca3af; font-size: 14px; }
|
||
|
||
.steps { counter-reset: step; }
|
||
.step { position: relative; padding-left: 60px; margin-bottom: 32px; }
|
||
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: #00b8cc; color: #0f1218; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; }
|
||
.step h3 { font-size: 20px; margin-bottom: 8px; }
|
||
.step p { color: #9ca3af; }
|
||
|
||
.quote { background: #1a1f2e; border-left: 4px solid #00b8cc; padding: 24px 32px; margin: 40px 0; border-radius: 0 12px 12px 0; }
|
||
.quote p { font-size: 18px; font-style: italic; color: #e5e7eb; margin-bottom: 16px; }
|
||
.quote-author { color: #9ca3af; font-size: 14px; }
|
||
|
||
.cta { text-align: center; padding: 100px 20px; background: linear-gradient(180deg, #1a1f2e 0%, #0f1218 100%); }
|
||
.cta h2 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 24px; }
|
||
.cta p { font-size: 18px; color: #9ca3af; max-width: 600px; margin: 0 auto 40px; }
|
||
|
||
footer { background: #1a1f2e; padding: 60px 20px; text-align: center; border-top: 1px solid #2d3748; }
|
||
footer p { color: #9ca3af; font-size: 14px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.hero { padding-top: 120px; }
|
||
section { padding: 60px 20px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="nav">
|
||
<div class="nav-container">
|
||
<div class="nav-brand">🎓 Vibe42</div>
|
||
<div class="nav-links">
|
||
<a href="#what">Что это</a>
|
||
<a href="#history">История</a>
|
||
<a href="#stats">Статистика</a>
|
||
<a href="#platforms">Платформы</a>
|
||
<a href="#learn">Обучение</a>
|
||
<a href="#start">С чего начать</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<h1>Обучение вайбкодингу</h1>
|
||
<p>Как создавать приложения без написания кода — история, теория и практика no-code/low-code разработки</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn btn-primary" onclick="document.getElementById('what').scrollIntoView({behavior: 'smooth'})">Начать обучение</button>
|
||
<button class="btn btn-secondary" onclick="window.open('obuchenie_vaybkodingu.pptx', '_blank')">Скачать презентацию</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="what">
|
||
<h2>📖 Что такое вайбкодинг?</h2>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<div class="card-icon">🚀</div>
|
||
<h3>Vibe coding</h3>
|
||
<p>Современное название подхода к разработке без написания кода. Создание приложений через визуальные интерфейсы и конфигурацию.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🎨</div>
|
||
<h3>No-code</h3>
|
||
<p>Полное отсутствие написания кода. Использование готовых шаблонов, drag-and-drop интерфейсов и визуальных конструкторов.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">⚡</div>
|
||
<h3>Low-code</h3>
|
||
<p>Минимальное использование кода для кастомизации. Визуальная разработка + возможность добавить код при необходимости.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>No-code/low-code платформы позволяют создавать приложения в 10-20 раз быстрее традиционной разработки, делая программирование доступным каждому.</p>
|
||
<div class="quote-author">— Gartner Research</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="history">
|
||
<h2>📅 История развития</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">1990-е</div>
|
||
<div class="timeline-title">Рождение RAD</div>
|
||
<div class="timeline-desc">Visual Basic (1991) и Delphi (1995) — первые визуальные среды разработки с drag-and-drop интерфейсами. Принцип: перетаскивание элементов вместо написания кода.</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2000-е</div>
|
||
<div class="timeline-title">End-User Development</div>
|
||
<div class="timeline-desc">Microsoft Access, Excel, SharePoint Designer. Salesforce.com (1999) — облачные CRM с конструктором приложений. Рост автоматизации бизнес-процессов.</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2011</div>
|
||
<div class="timeline-title">Зарождение рынка</div>
|
||
<div class="timeline-desc">Появление первых специализированных low-code платформ. Начало формирования отдельного рынка инструментов.</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">9 июня 2014</div>
|
||
<div class="timeline-title">Термин «low-code»</div>
|
||
<div class="timeline-desc">Аналитики Forrester Research (Клэй Ричардсон) вводят термин «low-code» в отчёте «New Development Platforms Emerge For Customer-Facing Applications».</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2017</div>
|
||
<div class="timeline-title">Признание Forbes</div>
|
||
<div class="timeline-desc">Forbes называет no-code/low-code движение «чрезвычайно разрушительной технологией», которая изменит разработку ПО.</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-year">2020-2025</div>
|
||
<div class="timeline-title">Бум no-code</div>
|
||
<div class="timeline-desc">Пандемия ускорила цифровизацию. Gartner: к 2024 году 65% приложений создаются на low-code. Рынок достиг $25 млрд. Интеграция ИИ (ChatGPT, автогенерация).</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="stats">
|
||
<h2>📊 Статистика рынка</h2>
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number">$15.5 млрд</div>
|
||
<div class="stat-label">Рынок low-code к 2020 (Forrester)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">65%</div>
|
||
<div class="stat-label">Приложений на low-code к 2024 (Gartner)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">10-20x</div>
|
||
<div class="stat-label">Быстрее традиционной разработки</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">80%</div>
|
||
<div class="stat-label">No-code разработчиков без тех. образования</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">70%</div>
|
||
<div class="stat-label">Экономия затрат vs наём разработчиков</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">$25 млрд</div>
|
||
<div class="stat-label">Рынок no-code/low-code к 2025</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="platforms">
|
||
<h2>🛠 Популярные платформы</h2>
|
||
<ul class="platform-list">
|
||
<li>
|
||
<div class="platform-icon">🌐</div>
|
||
<div>
|
||
<div class="platform-name">Webflow, Tilda</div>
|
||
<div class="platform-desc">Лендинги и сайты с визуальным редактором</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="platform-icon">💻</div>
|
||
<div>
|
||
<div class="platform-name">Bubble</div>
|
||
<div class="platform-desc">Полноценные веб-приложения без кода</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="platform-icon">📊</div>
|
||
<div>
|
||
<div class="platform-name">Airtable, Notion</div>
|
||
<div class="platform-desc">Базы данных и управление проектами</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="platform-icon">⚙️</div>
|
||
<div>
|
||
<div class="platform-name">Zapier, Make</div>
|
||
<div class="platform-desc">Автоматизация процессов между сервисами</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="platform-icon">📱</div>
|
||
<div>
|
||
<div class="platform-name">Glide, Adalo</div>
|
||
<div class="platform-desc">Мобильные приложения из таблиц</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="platform-icon">🤖</div>
|
||
<div>
|
||
<div class="platform-name">Vibe42</div>
|
||
<div class="platform-desc">Учебная платформа: сайты, боты, приложения за 15 минут</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="learn">
|
||
<h2>🎓 Принципы обучения</h2>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<h3>📈 От простого к сложному</h3>
|
||
<p>Начинай с визитки или лендинга, затем переходи к формам, данным и интеграциям. Не пытайся сделать всё сразу.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>⚡ Практика сразу</h3>
|
||
<p>Первый результат за 10-15 минут. Не зубри теорию — создавай проекты с первой минуты.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>🧠 Понимать логику</h3>
|
||
<p>Не копируй слепо — разбирайся, почему работает именно так. Это поможет создавать свои решения.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>🔄 Итерации</h3>
|
||
<p>Сделал → показал → получил фидбек → улучшил. Повторяй цикл как можно чаще.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>Цель обучения — не выучить инструменты, а развить мышление создателя. Инструменты меняются, мышление остаётся.</p>
|
||
<div class="quote-author">— Vibe42 Methodology</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="start">
|
||
<h2>🚀 С чего начать новичку?</h2>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<h3>Выбрать простую идею</h3>
|
||
<p>Лендинг-визитка, персональное резюме, афиша мероприятия или Telegram-бот. Что-то, что можно сделать за один вечер.</p>
|
||
</div>
|
||
<div class="step">
|
||
<h3>Открыть Vibe42</h3>
|
||
<p>Ты уже в проекте! Следуй рецептам из AGENTS.md — там готовые шаблоны для каждого типа проекта.</p>
|
||
</div>
|
||
<div class="step">
|
||
<h3>Создать первую версию</h3>
|
||
<p>Используй design.md как основу для стилей. Скопируй структуру из презентации или создай свою.</p>
|
||
</div>
|
||
<div class="step">
|
||
<h3>Опубликовать</h3>
|
||
<p>Нажми «Опубликовать» — сайт мгновенно появится на pages.git.vibe42.kz/Medet/твой-проект.</p>
|
||
</div>
|
||
<div class="step">
|
||
<h3>Поделиться и улучшить</h3>
|
||
<p>Покажи друзьям, получи фидбек, добавь формы, данные или ИИ-интеграции.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>⚠️ Типичные ошибки</h2>
|
||
<div class="card-grid">
|
||
<div class="card">
|
||
<div class="card-icon">❌</div>
|
||
<h3>Всё и сразу</h3>
|
||
<p>Желание сделать идеальный продукт с первого раза. Решение: начни с MVP за 15 минут.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">📚</div>
|
||
<h3>Учить программирование</h3>
|
||
<p>Параллельное изучение JavaScript или Python замедлит прогресс. No-code работает без кода!</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🏗️</div>
|
||
<h3>Сложные инструменты</h3>
|
||
<p>Использование Bubble для лендинга или React для бота. Выбирай стек по таблице в AGENTS.md.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🔒</div>
|
||
<h3>Не публиковать</h3>
|
||
<p>Проект живёт только когда его видят другие. Публикуй после каждой итерации.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>💼 Карьерные возможности</h2>
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number">$50-100K</div>
|
||
<div class="stat-label">No-code разработчик (США)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">∞</div>
|
||
<div class="stat-label">Фриланс: сайты и боты на заказ</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">🚀</div>
|
||
<div class="stat-label">Свой стартап без программиста</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">📊</div>
|
||
<div class="stat-label">Бизнес-аналитик с автоматизацией</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="cta" id="cta">
|
||
<h2>🎯 Готов начать?</h2>
|
||
<p>Твой первый сайт или бот — за 15 минут. Не нужно быть программистом, нужно просто начать.</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn btn-primary" onclick="document.getElementById('start').scrollIntoView({behavior: 'smooth'})">Создать проект</button>
|
||
<button class="btn btn-secondary" onclick="window.open('obuchenie_vaybkodingu.pptx', '_blank')">Скачать презентацию</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2025 Vibe42 | Образовательная платформа по вайбкодингу</p>
|
||
<p style="margin-top: 12px;">
|
||
<a href="https://pages.git.vibe42.kz/Medet/">Pages</a> •
|
||
<a href="https://git.vibe42.kz/Medet">Git</a> •
|
||
<a href="https://wiki.ai-kt.kz">Alem AI</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// Плавная прокрутка для якорных ссылок
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|