TRACK · GENERAL · CHANNEL D

Your First Web Page

Build a personal profile page using AI-generated HTML and CSS.

1HTML Basics: What Are Tags?

Before we build our page, let us understand one key concept: HTML tags. Think of tags as labels on containers. Each tag tells the browser what kind of content is inside.

Tags Are Like Labeled Boxes

<h1>

Big heading (like a chapter title)

<p>

Paragraph of text

<ul> + <li>

Bulleted list with items

Every tag opens and closes: <h1>content</h1>. The browser reads these tags and displays the content accordingly. Click Run Code to see:

HTML

<!DOCTYPE html>
<html>
<head>
 <title>Understanding Tags</title>
</head>
<body>
 <h1>This is a heading</h1>
 <p>This is a paragraph of text.</p>
 <ul>
 <li>This is a list item</li>
 <li>This is another item</li>
 </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <title>Understanding Tags</title>
</head>
<body>
 <h1>This is a heading</h1>
 <p>This is a paragraph of text.</p>
 <ul>
 <li>This is a list item</li>
 <li>This is another item</li>
 </ul>
</body>
</html>

Output

The Selector

2Building a Profile Page with AI

3Make It Yours

4Level Up: Modern Styling with CSS

5Challenge: Build Your Own Profile Page

What is Vibe Coding?

ALL TUTORIALS

Making Things Interactive