resources

HTML Xiaobai from 0 to 1: Learn the basics of web pages, and then use Agent to create a personal homepage

Everyone can use Agent to create their own web page: From web page structure to AI website building, now, everyone can use Agent to create their own […]

3 August, 202697 Reading13 minutes to read
article directories

Everyone can use Agent to create their own web page: From web page structure to AI website building

Now, everyone can create their own web pages with Agents.

Open an AI programming tool (such as Codex, Cursor, Claude Code) and tell it: "Help me make a personal homepage." It can create files, write code, adjust styles, and then launch a browser preview. Completing the first version of the web page has become very simple.

What really opened the gap was the second round of revisions.

People who understand the structure of a web page will tell the Agent:

"Check the relative path of the images folder."

"The mobile phone is changed to a single column layout."

"Just adjust CSS, not HTML content."

These instructions are clear and accurate, and the Agent can quickly locate problems and complete modifications.

People who don't understand the structure can usually only say:

"Why is the picture gone?"

"Be more advanced."

"Why is it different from just now?"

Agents can only keep guessing, the scope of modifications is getting larger and larger, and the page is getting more and more difficult to control.

Therefore, seemingly traditional web knowledge such as HTML, CSS, JavaScript, root directories, relative paths, and responsive design has become the core capabilities of using Agents in the AI era.

You don't need to rely on them to write hundreds of lines of code, but you need to use these concepts to describe the problem, limit the scope of changes, and determine whether the final result is correct.

This article is divided into two parts:

The first part is to understand the web project from scratch and complete a simple web page by hand.

The second part, enter the actual combat of Agents and use a yellow Punk style personal homepage to completely experience the entire process of "looking for reference → analyzing and designing → generating web pages → continuous modification → browser acceptance".

1. Understand web pages, websites and Web applications first

These three concepts are often confused.

It can be simply understood:

  • Web page: One page;
  • Website: A book;
  • Web application: One machine.

What you are creating now is a web page.

In the future, multiple pages such as work display, blog, and contact information will gradually develop into a website.

2. A web page item is actually a set of document structures

A web project does not have only one HTML file.

Usually includes:

  • Page structure;
  • style file;
  • Interactive scripts;
  • Picture resources;
  • Project description.

It can be understood as a house:

The root directory of the project is the house itself, with HTML, CSS, JavaScript and pictures placed in different rooms.

A common structure:

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

Among them:

  • index.html is the entry page;
  • css Storage style;
  • js Storage interactions;
  • images Store pictures;
  • README.md Record the project description.

The first step for novices is that they don't need to rush to write code.

Create first:

  • A project folder;
  • Three sub-folders: css, js, and images;
  • An index.html;
  • A README.md.

Only after setting up the structure correctly will the Agent know where the file should be placed.

3. What are HTML, CSS, and JavaScript responsible for?

A button on a web page usually requires three files to complete:

HTML：

Decide what is on the page.

CSS：

Decide what the page looks like.

JavaScript：

Decide what happens after clicking.

It can be written as:

HTML is the skeleton, CSS is the appearance, and JavaScript is the behavior.

For example:

Want to modify the text → Find HTML.

Want to change the color → Find CSS.

Button does not respond → Check JavaScript.

With the files separated, the web page is easier to maintain and the Agent is easier to locate problems.

4. Why is index.html important

In simple web projects,index.html It is usually the front page and the entry document.

When a user opens a website, the server usually prioritizes looking for:

index.html

Therefore:

  • It should be placed in the project root directory;
  • Don't change your name at will;
  • File names are in lower case.

An HTML page is mainly divided into two parts:

head
└── 网页设置

body
└── 用户看到的内容

head usually contains:

  • Page title;
  • Character encoding;
  • Mobile phone adaptation settings;
  • CSS and JavaScript addresses.

The body contains:

  • title;
  • text;
  • pictures;
  • button;
  • Page content.

Common structures:

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

These tags help browsers and search engines understand page structure.

5. Make a minimum webpage by yourself

Now create the first page that you can actually open.

First, put the avatar into:

images/avatar.jpg

then edit index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>

<body>

<h1>你好，这是我的第一个网页。</h1>

<p>我正在学习网页是怎样组成的。</p>

<img src="images/avatar.jpg">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

After saving, open it with a browser.

If you see:

  • title;
  • text;
  • pictures;
  • button;

This means that HTML has run successfully.

If the picture cannot be opened, usually check:

  • File name;
  • case;
  • extension;
  • path.

For example:

images/avatar.jpg

Must be exactly consistent with the real document.

6. CSS gives web pages a sense of design

HTML is responsible for content, and CSS is responsible for vision.

In:

css/style.css

Join:

body {
  margin:0;
  padding:48px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

img {
  width:240px;
  border-radius:24px;
}

button {
  padding:12px 20px;
  border-radius:999px;
}

After saving and refreshing:

  • Change of background;
  • Picture zooms out;
  • The button appears rounded.

CSS can be simply understood:

Find who → what to modify → what to change.

7. JavaScript makes web pages interactive

Connection:

<script src="js/script.js"></script>

Then in:

js/script.js

Join:

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

Refresh the page and click the button.

If a pop-up window appears, it means that HTML, CSS, and JavaScript have been successfully connected.

8. File paths are the most common mistake places for novices

Webpages need to know where the pictures, CSS, and JavaScript are.

This is the path.

For example:

css/style.css

js/script.js

images/avatar.jpg

They are all relative paths.

Remember three rules:

Same catalog:

file.jpg

Next level:

folder/file.jpg

Upper level:

../file.jpg

At the same time:

  • File name cannot be wrong;
  • The case cannot be wrong;
  • The extension cannot be wrong.

Many "pictures disappear" and "styles are not loaded" are essentially path problems.

9. Develop the correct process for modifying web pages

The most important habits of web development:

修改
 ↓
保存
 ↓
刷新
 ↓
验证

Change only one place at a time.

Don't modify it at the same time:

  • HTML;
  • CSS;
  • JavaScript。

Otherwise, if a problem occurs, it will be difficult to determine the cause.

This habit also applies to Agents.

After the Agent modifies the code, you still need to:

Open the browser → check the effect → determine whether it is correct.

10. Enter the Agent website from a handwritten web page

The knowledge ahead is not meant to make you a programmer.

You only need to master three things:

First, know the keywords.

For example:

  • CSS;
  • File path;
  • root directory;
  • Responsive.

This way you can tell the Agent exactly where the problem is.

Second, maintain verification habits.

After changing the Agent:

Modify → Browser check → Continue optimizing.

Third, have the ability to judge.

Picture cracked:

It could be a path problem.

Button does not respond:

Maybe JavaScript is not connected.

The mobile phone side of the page is chaotic:

It could be a responsive layout issue.

You don't have to repair it yourself, but you know where to ask the Agent to look.

11. Use Agent to create a yellow Punk personal homepage

Now enter full actual combat.

Goals:

Create a yellow Punk style personal homepage.

Content:

  • Name: Punk;
  • Introduction: I use AI, design and content to turn ideas into works;
  • Identity: MBA of USTC, Chief Designer of HerName, Executive Dean of Stanley Business School;
  • Page: About me, work, contact information;
  • Photo: images/punk.jpg.

Step 1: Find reference pages

Don't just ask the Agent to start writing.

Find 1 or 2 design references first.

Focus on:

  • Color matching;
  • Page layout;
  • Font level;
  • Picture scale;
  • Dynamic method.

Do not copy:

  • Logo;
  • pictures;
  • Copywriting;
  • Source code.

Learn the rules of design.

Step 2: Let the Agent analyze first and not make it

The first instruction only conducts design analysis.

Tell the Agent:

  • Analyze page structure;
  • Analyze colors;
  • Analyze fonts;
  • Analyze button;
  • Analyze changes in mobile phones;
  • Summarize design DNA.

Don't let it write code right away.

The reason is simple:

If you go in the wrong direction, the faster the code is written, the more rework it will be.

Step 3: Confirm the design before letting the Agent make it

Production requirements:

  • Use native HTML, CSS, JavaScript;
  • Clear document structure;
  • Do not use frameworks;
  • Use your own pictures and content;
  • Maintain originality;
  • Complete computer and mobile phone testing.

At the same time, the Agent is asked to:

  • Launch local preview;
  • Check 1440×900;
  • Check 390×844;
  • Check button;
  • Check pictures;
  • Check for console errors.

Don't just listen to the Agent saying "Done".

Be sure to look at the browser results.

12. How to continue to optimize the first edition

The first edition is usually not perfect.

Don't say when revising:

"Be more advanced."

This description is too vague.

It should be said:

"Keep the structure unchanged and increase the brightness of the yellow background."

"The avatar is zoomed in by 20%, but remains fully displayed."

"Only modify CSS, not HTML."

The more specific the Agent is, the easier it is to execute accurately.

XIII. Final acceptance

Give it to Agent:

Check:

  • Desktop;
  • Mobile phone;
  • Image loading;
  • CSS loading;
  • JavaScript;
  • Button function;
  • Scroll the page;
  • Console error.

Problems found:

Repair → Re-check.

14. Deploy online

On the computer:

localhost

Only you can access it.

Deployment is uploading the project to a public server.

For simple HTML/CSS/JavaScript projects, you can use GitHub Pages.

Basic process:

  1. Create a GitHub repository;
  2. Upload project files;
  3. Confirm that index.html is in the root directory;
  4. Open Pages;
  5. Obtain public website;
  6. Check the web page again.

Check before going online:

Do not upload:

  • API Key;
  • Private phone calls;
  • home address;
  • Internal information;
  • Unauthorized pictures.

Conclusion: In future web development, it is not whether you can write code, but whether you can describe problems

AI makes creating web pages easy.

But what really determines the outcome is not whether you will let the Agent generate code, but:

Whether you understand the structure of the web page;

Whether you can accurately describe the problem;

Do you know how to accept the results?

Basic knowledge such as HTML, CSS, and JavaScript will not be obsolete because of the advent of AI.

Instead, they are becoming the new language for collaboration between people and agents.

In future website development, it is likely that programmers will not write code alone, but people who understand the structure will quickly complete design, implementation and iteration through Agents.