Module 3: AI Code Generation

Before you can host a website, you need the code! This module will show you how to use powerful AI tools like Gemini and ChatGPT to generate a professional, complete website design in seconds. This eliminates the need to learn complex coding from scratch, making web design accessible to everyone.

Crafting the Perfect Prompt

The key to getting great code from an AI is providing a clear, detailed prompt. Think of the AI as your personal web developer; the more specific your instructions, the better the result. Here are some examples of prompts you can use to generate a custom website for your needs:

  • "Generate a clean, modern HTML5 and CSS code for a one-page portfolio website. The site should have a dark theme, a hero section with a photo of me, an 'About Me' section, and a projects gallery with three cards. All CSS should be in a single `style` tag."
  • "Create the HTML and CSS for a professional landing page for a coffee shop. It should have a full-width background image, an animated call-to-action button, and a contact form section. Ensure all code is responsive and self-contained."
  • "Write the complete HTML and CSS for a simple blog homepage. Include a header with a navigation menu, a main section with a blog post summary, and a footer. The design should be minimalist and light-colored."

Example AI-Generated Code

Below is a sample of a complete website code generated by an AI using a prompt similar to the examples above. You can copy and paste this code to practice the conversion process in the next module. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <style>
        /* General Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #1a1a1a;
            color: #f0f0f0;
            line-height: 1.6;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }
        /* Header */
        header {
            text-align: center;
            padding: 40px 0;
        }
        header h1 {
            margin: 0;
            font-size: 2.5rem;
            color: #fff;
        }
        /* Hero Section */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 80px 0;
            text-align: center;
        }
        .hero img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #3498db;
        }
        /* ... more CSS for other sections ... */
        /* Media Queries */
        @media (max-width: 768px) {
            .hero {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>My Portfolio</h1>
    </header>

    <main>
        <section class="hero">
            <img src="https://via.placeholder.com/150" alt="My Photo">
            <h2>Hello, I'm a Web Developer</h2>
            <p>I specialize in building responsive and modern websites.</p>
        </section>

        <!-- Projects Section -->
        <!-- About Section -->

    </main>
</body>
</html>

With AI, generating a website is as simple as asking for it. The code is ready for you to use in the next crucial step: converting it into a format that works perfectly on Blogger. You're just one step away from turning a simple idea into a live, professional website.

> Next Module