Step 1 of 10

Introduction

📖 Lesson

What is vibe coding?

Vibe coding is a new way to build websites. Instead of writing every line of code, you describe to AI what you want - and it writes it for you.

Think of it as a conversation: you say "I want a red button with rounded corners" and AI generates the exact code.

Why "vibe"? Because you focus on the feeling and the result, not on syntax. You tune vibes, not semicolons.

What is Vibmy?

Vibmy is a platform that lets you:

  • Paste code (or have AI generate it)
  • Instantly deploy it to the internet
  • Get your own web address (yourproject.vibmy.com)

No installation, no configuration. Paste code, click "Deploy" and your page is live.

How will the course work?

In each step, you'll learn something new:

  1. Short lesson - we explain the concept
  2. Ready-made code - copy the example
  3. Try it - paste into Vibmy and see the result
You don't need to understand every line of code. What matters is that you see what it does and can modify it with AI.
💻 Example to try
index.php
🚀 Try on Vibmy 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            font-family: "Segoe UI", system-ui, sans-serif;
            overflow: hidden;
        }

        .container {
            text-align: center;
            padding: 3rem;
            animation: fadeUp 1s ease-out;
        }

        h1 {
            font-size: 3.5rem;
            background: linear-gradient(to right, #00d4aa, #7b68ee, #ff6b9d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            animation: glow 3s ease-in-out infinite;
        }

        p {
            color: #b8c5d6;
            font-size: 1.3rem;
            max-width: 500px;
            line-height: 1.8;
            margin-bottom: 2rem;
        }

        .emoji {
            font-size: 4rem;
            display: block;
            margin-bottom: 1.5rem;
            animation: bounce 2s ease infinite;
        }

        .badge {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            background: rgba(0, 212, 170, 0.15);
            border: 1px solid rgba(0, 212, 170, 0.3);
            border-radius: 50px;
            color: #00d4aa;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        /* Floating particles in background */
        .particle {
            position: fixed;
            width: 4px;
            height: 4px;
            background: rgba(0, 212, 170, 0.4);
            border-radius: 50%;
            animation: float linear infinite;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes glow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes float {
            from { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            to { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
        }
    </style>
</head>
<body>
    <!-- Background particles -->
    <div class="particle" style="left:10%;animation-duration:8s;animation-delay:0s"></div>
    <div class="particle" style="left:20%;animation-duration:12s;animation-delay:1s"></div>
    <div class="particle" style="left:35%;animation-duration:9s;animation-delay:2s"></div>
    <div class="particle" style="left:50%;animation-duration:11s;animation-delay:0.5s"></div>
    <div class="particle" style="left:65%;animation-duration:10s;animation-delay:3s"></div>
    <div class="particle" style="left:80%;animation-duration:7s;animation-delay:1.5s"></div>
    <div class="particle" style="left:90%;animation-duration:13s;animation-delay:2.5s"></div>

    <div class="container">
        <span class="emoji">&#x1F680;</span>
        <h1>Hello, World!</h1>
        <p>This is my first web page created with vibe coding. And it's amazing!</p>
        <span class="badge">Built with Vibmy</span>
    </div>
</body>
</html>
← Back to start 1 / 10 Next step →