HTML Basics First: The Only Prerequisite You Need Before Building Websites

Why You Should Not Start with WordPress

Many overseas website builders make the same mistake: they hear “no-code” and jump straight into WordPress. The logic seems sound — WordPress powers over 40% of the web, and you can install themes without touching code. But here is the problem: WordPress is built on PHP, a server-side programming language. When you want to customize a theme, change a layout, or fix a broken widget, you will be forced to read and edit PHP files. If you have no programming background, this is like trying to drive a car with the hood welded shut — you can go forward, but you cannot fix anything when it breaks.

The alternative is simpler and more powerful: learn the frontend trio — HTML, CSS, and JavaScript. These three languages run directly in the browser, require no server setup, and are the absolute foundation of every website you have ever visited. You do not need to learn PHP, Python, or any other backend language to build a working website. You only need HTML for structure, CSS for styling, and JavaScript for interactivity. That is it.

The smartest path for a complete beginner is to spend two weeks learning HTML basics, then return to website building with AI tools like ChatGPT. You will understand what the AI generates, you will be able to fix errors, and you will not feel lost when the code does not look like what you expected.

The 23-Lesson Video Course That Gets You Started

There is a free video course on Bilibili (China’s YouTube equivalent) called “Frontend Web Development from Zero” by an instructor named Yang Xiaoai. The course was published in December 2022 and consists of 23 lessons, each about 10 minutes long. The total runtime is roughly four hours — short enough to finish in a weekend, long enough to cover the essentials.

Here is the critical advice: you do not need to finish all 23 lessons before you start building websites. The course is structured so that the first 8 to 10 lessons cover HTML. Finish those HTML chapters first, then return to the website-building series. The later lessons on CSS and JavaScript can wait until you have built a few pages with AI assistance. This is the learning ladder: tutorial first, then AI-generated pages, then CSS/JS in practice.

Why this order? Because HTML is the skeleton of every page. Without understanding what a <div> is, what a <p> tag does, or how attributes like class and id work, you will be completely lost when an AI tool generates 50 lines of code for you. But once you understand HTML structure, you can read AI output like a native speaker reads a newspaper — you may not know every word, but you understand the meaning.

HTML4 vs HTML5: Why the Core Basics Never Change

One fear beginners have is that technology changes too fast. “If I learn HTML now, will it be outdated in six months?” The answer is a confident no. HTML was first standardized in 1993, and the core tags — headings, paragraphs, links, images, lists, and tables — have not changed in three decades. HTML4 was released in 1999, and HTML5 came in 2014. The difference between them is mostly about new semantic elements and multimedia support, not about replacing the basics.

What does this mean for you? When you learn the fundamentals — how to write <h1> through <h6> for headings, <p> for paragraphs, <a href="..."> for links, and <img src="..." alt="..."> for images — you are learning knowledge that will remain valid for your entire web-building career. The 23-lesson course teaches these stable fundamentals. The same cannot be said for WordPress themes, which change with every version update, or for JavaScript frameworks like React, which evolve every few months.

This stability is your biggest advantage. You can invest two weeks in learning HTML, and that investment will pay dividends for years. Compare that to learning a specific WordPress page builder, which might be obsolete in 18 months.

Semantic Tags: The One Concept That Unlocks AI-Assisted Coding

Here is the single most important concept in the entire HTML course: semantic tags. These are HTML elements that describe what their content means, not just how it looks. For example, <header> means “this is the top section of the page,” <nav> means “this is navigation,” <article> means “this is a self-contained piece of content,” and <footer> means “this is the bottom section.”

Why is this the key to AI-assisted coding? Because when you use semantic tags, you are giving the AI a clear map of your page’s structure. When you ask ChatGPT to “create a page with a header, a navigation menu with three links, a main article section, and a footer,” the AI can generate clean, correct HTML because you used the same vocabulary that the AI was trained on.

If you instead use only <div> tags (the generic container element), the AI has no idea what each section is for. Your prompt becomes vague, and the output becomes messy. Semantic tags are the shared language between you and the AI. Learn them, and you can communicate your intentions precisely.

Here is a practical example. A beginner might write:

<div class="top">My Site</div>
<div class="menu">Home | About | Contact</div>
<div class="content">Welcome to my page...</div>

A semantic version looks like:

<header>My Site</header>
<nav>Home | About | Contact</nav>
<main>Welcome to my page...</main>

The second version is not just more readable — it is more AI-friendly. When you paste this into ChatGPT and ask “how do I make the nav links into a horizontal menu?”, the AI immediately understands which part you mean. Skip the confusion and learn semantic tags from the start.

Setting Up VS Code: Your Only Tool

You need exactly one tool to follow this path: Visual Studio Code (VS Code). It is free, runs on Windows, macOS, and Linux, and is the most popular code editor in the world. Download it from code.visualstudio.com, install it, and you are ready.

Once installed, open VS Code and create a new folder on your computer called “my-first-site”. Inside that folder, create a new file and name it index.html. Type the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Save the file, then right-click on the file name in the VS Code sidebar and select “Open with Live Server” (you will need to install the Live Server extension first — go to the Extensions panel, search “Live Server”, and install it). A browser will open showing your page. Congratulations, you just built a website.

This is the entire workflow for your first week: write HTML in VS Code, preview it in the browser, and make changes. The video course will walk you through every tag, but this setup gives you a sandbox to experiment immediately.

The “Explain It in Your Own Words” Test of Real Understanding

Here is a trap that catches many beginners: you watch the video, the instructor explains <a> tags, you nod your head, and you think you understand. But do you? The only way to know is the “explain it in your own words” test.

After each HTML lesson, close the video and write a short summary in your own words. For example, after learning about lists, write: “An unordered list <ul> creates bullet points, and each item inside is wrapped in <li>. An ordered list <ol> creates numbered items. I can nest lists by putting a <ul> inside an <li>.”

If you cannot write this without looking at your notes, you do not actually understand it. Go back and re-watch that section. This test is brutal but effective — it forces your brain to process the information instead of just passively watching.

A practical way to do this: keep a text file called html-notes.md in your VS Code folder. After each lesson, add your explanation. After 10 lessons, you will have a personal HTML reference guide written in your own words. This is far more valuable than any textbook, because it uses your vocabulary and your examples.

The Learning Ladder: Tutorial → AI Pages → CSS/JS → Database Sites

Now you know the full path. Here is the ladder you will climb:

Step 1: Finish the HTML chapters of the video course (lessons 1-10). This takes about 100 minutes. You now understand tags, attributes, semantic structure, and how to write a basic page.

Step 2: Return to the website-building series and start generating pages with ChatGPT. When you ask for a page, add this to your prompt: “Please add comments to this code explaining what each part does.” This is the single most useful habit you can develop. The AI will annotate every line, and you will learn by reading its explanations.

Step 3: When you hit a wall with CSS or JavaScript, go back to the video course and finish those chapters. Now you understand the structure, so styling and interactivity will make sense. You can also ask the AI: “Explain this CSS rule in plain English” or “What does this JavaScript function do?”

Step 4: For advanced projects, study how database-driven multi-page websites work. This is where you will eventually need to understand how a CMS like WordPress stores content, but by now you will have the foundation to learn it quickly. The key is that you are not learning PHP from zero — you are learning how to integrate a backend into a structure you already understand.

The biggest mistake you can make is to skip Step 1. Without HTML basics, every AI-generated page is a mystery box. With HTML basics, every AI-generated page is a learning opportunity. The two-week investment in HTML will save you months of confusion later.

Start today: open the video course, watch lesson 1, and create your first index.html file. The rest will follow.

(Figures and case details in this article are as reported in the source material and have not been independently verified.)

Series: Overseas Website Building