A practical beginner's guide
Your first website with AI: step by step
Your first website can be one simple page showing examples of your work and a way to get in touch. AI can draft it, but you remain responsible for its content, code and publication. These small, checkable steps use a fictional personal portfolio as an example.
Define the goal of one page, write real content, ask AI for simple HTML and CSS, then read and test every change. Publish the static page only after local, mobile and keyboard checks. A working contact form requires a separate service or server.
1. Define the page's purpose and limits
Write one sentence: “This page presents my learning projects and a way to contact me.” Identify the audience, their question and three necessary sections. A sample portfolio only needs a short introduction, two projects and an email address. Avoid payments, accounts or data-collection forms unless you can actually support them.
MDN advises beginners to start small and decide on content and appearance before writing code. Write your own copy before asking AI for help, so generated placeholders do not become a fictional biography or invented achievements.
2. Give AI a small, testable task
Example prompt: “Draft HTML and CSS for a one-page personal portfolio. Include an introduction, two projects and contact details. Use only the text I provide, invent no facts, keep a logical heading order and make the layout work on a narrow screen. Explain what each file does.” This is a suggested prompt, not a tested result from an external AI service.
An index.html file and separate style.css file are enough to begin. HTML structures content; CSS controls its appearance. Add JavaScript only when a specific action needs it. Ask AI to explain unfamiliar code and change one part at a time: a large unexplained rewrite is hard to verify.
3. Read the code and replace placeholders
Open the files and find every displayed name, address, link and image. Remove placeholders; publish real photos or text only if you have the right to use them. Do not give AI passwords, access keys or personal data, and do not put them in published files.
GitHub's official guidance says AI-generated code needs review and testing because it can contain mistakes and security issues. Open every link, check image paths and confirm that a promised action really works. Do not publish code whose purpose you cannot explain.
4. Test the page as a visitor
Open index.html locally, then check narrow and wide screens. Read without zooming, make sure there is no horizontal overflow, and verify visible links point to the right places. Move through the page with Tab: the focused link should be visible. Use one main h1 heading and a sensible sequence of section headings.
Give informative images meaningful alternative text and decorative images an empty alt. W3C explains both page structure and image purposes in its accessibility tutorials. For the sample portfolio, also verify the project links and contact address.
5. Publish only what is ready
GitHub Pages is one possible host for a static HTML, CSS and JavaScript page; its official description covers serving static files from a repository. Read the current setup and visibility instructions before using it, then open the live address on a phone and computer. A local file working does not prove that live links and images load.
Drawing a form in HTML does not send or store messages by itself; you need a separate service or server and clear data-handling rules. You can begin by listing an email address instead. Repeat link, keyboard and narrow-screen checks after each change.
Make one small improvement
Once the page is available, note three things: what visitors can understand, where information is hard to find and which action is missing. Choose one improvement, describe it to AI as a limited task, and check the result again. That builds your ability to control the site instead of accepting one fast generated draft.
Key takeaways
- Start with one page and real, verified content.
- Read and test AI code; make small changes.
- Check mobile, keyboard access, links and images.
- A static page does not receive messages by itself.
Frequently asked questions
Must I know programming for a first website?
Deep experience is not required for a simple first draft, but you should understand basic HTML structure and check AI changes. Do not publish functionality you cannot explain.
Can AI fully verify its own code?
No. Its explanations can help, but check links, layout and actions yourself in a real browser.
Will a contact form work on GitHub Pages?
HTML alone is insufficient. GitHub Pages serves static pages; receiving messages needs a separate service or server.
When should I publish?
After checking facts and rights to materials, confirming the page reads on a narrow screen and works with a keyboard, and testing links and images at the published address.
Sources
Checked: