The First Step: Your First HTML Webpage in 5 Minutes

Go from zero to a live website with this simple, step-by-step guide.

Welcome to the world of web development! Every single website on the internet, from Google to your favorite blog, is built on a foundation of **HTML (Hypertext Markup Language)**. HTML provides the basic structure for a webpage, telling the browser what is a heading, what is a paragraph, and what is a link. The best way to learn is by doing, so let's build your very first webpage together in just a few simple steps.

Step 1: Get Your Tools

You don't need anything fancy. All you need is a simple text editor. On Windows, you can use Notepad. On Mac, use TextEdit. For a better experience, we recommend a free code editor like **VS Code**.

Open your text editor and create a new, blank file.

Step 2: Write the Basic HTML Structure

Every HTML file needs a standard skeleton. Copy and paste this code into your blank file:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

This code tells the browser that this is an HTML document. The `` section holds metadata (information about the page), and the `` is where all of your visible content goes.

Step 3: Add Your Content

Now, let's add some content to the `` section using HTML tags. Replace the comment (``) with the following:


    <h1>Hello, World!</h1>
    <p>This is my first paragraph on my first webpage.</p>
    <a href="https://www.google.com">Click me to visit Google!</a>

`
` is a heading.
`
` is a paragraph.
`` is a link (or anchor). The `href` attribute tells the link where to go.

Step 4: Save and View Your Page

Save your file with the `.html` extension (e.g., `index.html`). Then, simply double-click the file to open it in your web browser. Congratulations! You've just created your first webpage. This is the first step on an incredible journey into web development.

Labels

Search This Blog

📝 Latest Blog Post