Your First Website — HTML & CSS in 30 Minutes

DodaTech Updated 2026-06-22 6 min read

In this tutorial, you'll learn about Your First Website. We cover key concepts, practical examples, and best practices.

Build your first website with HTML and CSS in 30 minutes. Learn headings, paragraphs, links, images, and basic styling to create a personal homepage.

What You'll Learn

By the end of this tutorial, you will have built a real website hosted on your computer using HTML for structure and CSS for styling, and you will understand how the two work together.

Why It Matters

Building a website is the most satisfying first project a beginner can complete. You see immediate results in the browser. It teaches you the fundamental client-server model and gives you a tangible product you can share.

Real-World Use

Doda Browser renders HTML and CSS on every page you visit. Understanding how web pages are built helps you appreciate what happens behind the scenes and gives you the foundation for web development.

Your Learning Path

flowchart LR
  A[Search Effectively] --> B[First Website]
  B --> C[Choose a Language]
  C --> D[How to Debug]
  D --> E[Build Projects]
  B --> F{You Are Here}
  style F fill:#f90,color:#fff

ℹ️ Info

Prerequisites: You should know basic computer skills and how to use a text editor from the earlier tutorials.

What Is HTML?

HTML stands for HyperText Markup Language. It is not a programming language — it is a markup language that describes the structure of a webpage.

Think of HTML as the skeleton of a house. It defines where the walls, doors, and windows go. CSS, which we will use next, is the paint, wallpaper, and decorations.

Your First HTML Page

Create a new file called index.html in your Projects folder. Type the following:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Hello, I am Learning HTML!</h1>
    <p>This is my first webpage. It works!</p>
</body>
</html>

Expected behavior: Open this file in your browser by double-clicking it. You should see a heading and a paragraph. The browser tab shows "My First Website" as the page title.

Let us break down each part:

Element	Purpose
`<!DOCTYPE html>`	Tells the browser this is an HTML5 page
`<html>`	The root element that wraps everything
`<head>`	Contains metadata and the page title
`<title>`	The text shown in the browser tab
`<body>`	The visible content of the page
`<h1>`	A top-level heading (largest)
`<p>`	A paragraph of text

Adding More Content

Let us expand the page with common HTML elements:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>Welcome to My Page</h1>

    <h2>About Me</h2>
    <p>My name is Alex and I am learning to build websites.</p>

    <h2>My Hobbies</h2>
    <ul>
        <li>Reading</li>
        <li>Coding</li>
        <li>Hiking</li>
    </ul>

    <h2>My Favorite Website</h2>
    <a href="https://example.com">Visit Example</a>

    <h2>A Picture</h2>
    <img src="https://placehold.co/300x200" alt="A placeholder image">
</body>
</html>

New elements introduced:

Element	Purpose
`<h2>`	A sub-heading (smaller than h1)
`<ul>`	An unordered (bulleted) list
`<li>`	A single list item
`<a>`	A link, href specifies the destination
`<img>`	An image, src specifies the file path, alt provides text for accessibility

Expected output: You should see a heading, sub-headings, a bulleted list, a clickable link, and an image.

Introducing CSS

CSS stands for Cascading Style Sheets. It controls how HTML looks. Create a new file called style.css in the same folder:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 40px;
}

h1 {
    color: #333366;
    text-align: center;
}

h2 {
    color: #444466;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

ul {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
}

a {
    color: #3366cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Now link the CSS file to your HTML by adding this line inside the <head> section:

<link rel="stylesheet" href="style.css">

Your full HTML file should now look like this:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Page</h1>

    <h2>About Me</h2>
    <p>My name is Alex and I am learning to build websites.</p>

    <h2>My Hobbies</h2>
    <ul>
        <li>Reading</li>
        <li>Coding</li>
        <li>Hiking</li>
    </ul>

    <h2>My Favorite Website</h2>
    <a href="https://example.com">Visit Example</a>

    <h2>A Picture</h2>
    <img src="https://placehold.co/300x200" alt="A placeholder image">
</body>
</html>

Expected behavior: Refresh the page. The background changes to light gray, the headings turn blue, the list gets a white background with rounded corners, and the link is blue with no underline until you hover over it.

Understanding CSS Selectors

A CSS selector targets specific HTML elements:

Selector	Targets	Example
`element`	All elements of that type	`p { }` targets all paragraphs
`.class`	Elements with that class attribute	`.highlight { }`
`#id`	A specific element by its ID	`#header { }`

How HTML and CSS Work Together

HTML provides the structure. CSS provides the style. The browser combines them to render the final page. This separation makes it easy to change the look of an entire website by editing one CSS file.

Common Mistakes Beginners Make

1. Forgetting the Closing Tag

Every opening tag needs a closing tag. <p> needs </p>. <h1> needs </h1>. Forgetting the slash breaks the page layout.

2. Not Linking the CSS File Correctly

If style.css is not in the same folder as index.html, the <link> tag must include the correct path. Check that the file exists where you think it does.

3. Using Incorrect Quotes

The href and src attributes need quotes around the values. Missing a closing quote breaks the entire attribute.

<!-- Correct -->
<a href="https://example.com">Link</a>

<!-- Wrong -->
<a href=https://example.com>Link</a>

4. Typing the Filename Wrong

index.html is correct. index.htm also works but is older. Index.HTML might not work on some servers. Use lowercase for filenames.

5. Confusing HTML Attributes and CSS Properties

<img width="300"> is an HTML attribute. img { width: 300px; } is CSS. They both set width but work differently. Use CSS for styling.

6. Not Using alt Text on Images

The alt attribute improves accessibility for visually impaired users and helps with SEO. Always include it.

7. Forgetting the Viewport Meta Tag

For mobile-friendly pages, add this inside <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Practice Questions

1. What does HTML stand for? HyperText Markup Language. It defines the structure of a webpage.

2. What is the difference between HTML and CSS? HTML provides structure (headings, paragraphs, lists). CSS provides styling (colors, fonts, layout).

3. Why does every opening tag need a closing tag? Closing tags tell the browser where an element ends. Without them, the browser cannot determine which content belongs to which element.

4. What does the <a> tag do? It creates a hyperlink. The href attribute specifies the destination URL.

5. Challenge: Add a new section to your page with a class of "projects". Use CSS to give it a colored border, padding, and a different background color. You have just learned how classes work, which is fundamental to CSS.

Try It Yourself

Modify your page to make it truly personal:

Change the heading to your name
Replace the hobbies with your own interests
Find an image URL online and use it instead of the placeholder
Add a new CSS rule that changes the color of the <li> text
Add a second page called projects.html and link to it from your homepage

After you finish, open the page in Doda Browser to see how your creation looks in a real browser.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

← Previous How to Search Effectively — Google-Fu for Developers Next → Choosing Your First Programming Language

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Start Here