What you'll build

You'll create your first personal web page using HTML and CSS, with AI help to generate the code. You'll create a folder, ask an AI to generate a page with your information, and open it in the browser. When you're done, you'll have a working index.html file that you can customize, improve, and eventually publish. It's the first step to creating portfolios, landing pages, or any static website.

Step 1: Create the structure

mkdir my-page
cd my-page

Step 2: Ask an AI to generate the code

Open Google AI Studio or any AI chat.

Create a simple web page with:
- A title "My First Page"
- A description about me
- Modern CSS styles
- Nice colors

Give me the complete HTML code in a single file.

Step 3: Create the file

Copy the code the AI gave you and save it as index.html

Step 4: Open it in the browser

System	Command
macOS	`open index.html`
Windows	`start index.html`
Linux	`xdg-open index.html`

Or just drag the file to your browser.

Basic HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <style>
        body { font-family: sans-serif; }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>My first web page.</p>
</body>
</html>

Optional improvements

Ask the AI:

"Add dark mode"
"Make it responsive for mobile"
"Add subtle animations"
"Add a projects section"

Publish for free

For others to see it, upload to GitHub Pages:

Create repository on GitHub
Upload your index.html
Go to Settings → Pages
Select "main" branch
Your page will be at your-username.github.io/repo-name

Next step

→ My Dev Environment — Configure VS Code

Static Web Page

📋 Suggested prerequisites