Beginner practice · One file, one complete project
Build your first personal webpage
Start by describing what you need, then save, open, edit and check a page yourself. Begin now and return to the basics whenever a concept needs explanation.
Download blocked? View the full source
Copy all the text below, save it as index.html in UTF-8, then open it in your browser.
What you need before starting
- A computer that can save files, a browser and a plain-text editor.
- Optional: an AI chat or coding tool you already use. It may require internet access, an account or payment; check its current terms. No purchase is required for this tutorial.
- The reference example needs no account, server, API key or extra dependencies. Once downloaded, it works offline.
- This project uses standard HTML and CSS. Completion time depends on your experience and tools; work through the steps at your own pace.
From an idea to a working page
1. Prepare a project folder
Create a first-website folder. Open a plain-text editor and create index.html. Show file extensions in your operating system and check that it is not index.html.txt.
Check the result:The folder contains a file ending in .html. You do not need Node.js or any dependencies at this stage.
2. Give your requirements to AI, or run the reference example first
Paste the prompt below into an AI tool you already use, adding your introduction and project description. Copy the complete HTML without the opening and closing code-fence backticks. If AI is unavailable, download the complete example above.
Check the result:You have a complete file from <!doctype html> to </html>, not disconnected snippets.
3. Save and open the page
Save the complete code as index.html with UTF-8 encoding. Double-click the file or drag it into a browser. If the downloaded example has a .txt extension, rename it to index.html first.
Check the result:The browser shows a styled introduction, project and learning notes. A file: address is normal for a local preview.
4. Make your own change
In your editor, replace Lin with your nickname and the project description with your own text. Save and refresh the browser. Then change #5b21b6 in the CSS to #1e40af and observe the accent color.
Check the result:Your nickname, introduction and colors change. Edit one type of content at a time so problems are easier to locate.
5. Check links and the mobile layout
Click My work, About and the main button to check their destinations. Narrow the browser window, then use Tab and Enter to operate the links.
Check the result:Every button has a real destination, text is not clipped, focus is visible and there is no horizontal overflow.
6. Verify your project and continue
Check your file against the checklist below. Once it passes, use “Mark complete” to record your learning status, then continue to the skills lesson.
Check the result:You have a project you can open, edit and explain. Marking it complete records your progress; it is not an automatic review of your work.
Requirements prompt
Copy the prompt and replace the text in brackets. AI outputs can vary; use the acceptance criteria below to judge the result.
Help me build a personal webpage. Output only a complete index.html file.
Goal: introduce myself, show one project and record what I learned.
Requirements:
1. Use only HTML and inline CSS. No frameworks, JavaScript, external fonts or images.
2. Include a name, short introduction, project section and learning notes.
3. Navigation and the main button must link to existing sections using page anchors.
4. Make the page readable on phones, with sufficient text contrast and visible keyboard focus.
5. Use fictional sample information. Do not add sign-in, payments, analytics or form submission.
6. Include UTF-8 encoding and a viewport tag.
My introduction: [add a non-sensitive introduction here]
Project description: [describe what you want to show here]My project acceptance checklist
Check each item yourself. These boxes are only for this self-check; use “Mark complete” to save lesson completion.
When you run into a problem
The file opens as source code
Check that the filename is index.html, not index.html.txt, and open it in a browser rather than an editor.
Text is garbled or edits do not appear
Save as UTF-8 and keep the meta charset tag. Make sure the file you edit is the one you open, then save and refresh.
The AI asks me to install dependencies or configure keys
This project does not need those steps. Add: rewrite it as a single HTML file with inline CSS, without frameworks, scripts or external services.
The page has no styling or a button does not navigate
Check that you copied the entire style section and closing tags. Link targets #work and #about must exactly match the destination ids. Compare your file with the downloaded example section by section.
The AI keeps adding more features
Keep just three sections: introduction, one project and learning notes. Put additional features on a future list and first make the current version meet the checklist.
Take the next step
Add a second project while keeping the narrow-screen layout working. Write the acceptance criteria first, ask AI to make the change, then check it yourself.
Publishing is optional. Other people cannot automatically access your local file. Before choosing a host, check account requirements, costs and what will be public, and remove sensitive personal details. When needed, study Deployment and operations。
To try other projects, explore Full-stack practice、Webpage generation tools or Fabric workflow。
Sources and feedback
Sources checked: 2026-09-22. Reference example v1; no third-party framework dependencies.
Report an issue with this tutorial, explaining the step where you got stuck and what you actually saw.