Ready to build your first website? HTML and CSS are the foundation of web development, and they're perfect for beginners! By the end of this tutorial, you'll have created your own personal website from scratch. No prior experience needed!

🌐 What Are HTML and CSS?

HTML (HyperText Markup Language): The structure and content of your website
CSS (Cascading Style Sheets): The styling and appearance of your website

Think of HTML as the skeleton of your website and CSS as the clothing and makeup that makes it look beautiful!

🛠️ What You'll Need

A computer with internet access
A text editor (we recommend VS Code - it's free!)
A web browser (Chrome, Firefox, Safari, etc.)
About 30 minutes of your time

📝 Step 1: Setting Up Your First HTML File

Let's start by creating a basic HTML file. Create a new file called "index.html" and 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 Website</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my very first webpage.</p>
</body>
</html>
            

Welcome to My Website!

This is my very first webpage.

This is how your page will look!

🏗️ Step 2: Understanding HTML Structure

Let's break down what each part does:

<!DOCTYPE html>: Tells the browser this is an HTML5 document
<html>: The root element that contains everything
<head>: Contains information about the page (not visible to users)
<title>: Sets the title shown in the browser tab
<body>: Contains all the visible content
<h1>: A large heading
<p>: A paragraph of text

🎯 Step 3: Adding More Content

Let's make our website more interesting by adding more elements:

<body>
    <h1>Welcome to My Website!</h1>
    <h2>About Me</h2>
    <p>Hi! I'm learning web development with ABCCoders.</p>
    
    <h2>My Hobbies</h2>
    <ul>
        <li>Playing video games</li>
        <li>Reading books</li>
        <li>Learning to code</li>
    </ul>
    
    <h2>Contact Me</h2>
    <p>Email: <a href="mailto:me@example.com">me@example.com</a></p>
</body>
            

🎨 Step 4: Adding CSS for Beautiful Styling

Now let's make our website look amazing with CSS! Add this between the <head> tags:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        
        h1 {
            color: #4F46E5;
            text-align: center;
            font-size: 2.5em;
        }
        
        h2 {
            color: #7C3AED;
            border-bottom: 2px solid #7C3AED;
            padding-bottom: 10px;
        }
        
        p {
            line-height: 1.6;
            font-size: 1.1em;
        }
        
        ul {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        li {
            margin-bottom: 10px;
        }
        
        a {
            color: #F97316;
            text-decoration: none;
            font-weight: bold;
        }
        
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
            

💡 CSS Explanation

font-family: Changes the text font
color: Changes text color
background-color: Changes background color
margin & padding: Controls spacing
border-radius: Makes rounded corners
box-shadow: Adds a shadow effect

🌈 Step 5: Adding Images and More Style

Let's make our website even more visually appealing:

<!-- Add this in your body section -->
<h2>My Photo</h2>
<img src="https://via.placeholder.com/200x200/4F46E5/FFFFFF?text=My+Photo" 
     alt="My photo" 
     style="border-radius: 50%; display: block; margin: 0 auto;">

<h2>Fun Facts</h2>
<div style="background: linear-gradient(135deg, #4F46E5, #7C3AED); 
            color: white; 
            padding: 20px; 
            border-radius: 15px; 
            text-align: center;">
    <p>I started learning to code with ABCCoders!</p>
    <p>My favorite programming language is Python 🐍</p>
</div>
            

📱 Step 6: Making It Mobile-Friendly

Add this CSS to make your website look great on phones too:

/* Add this to your CSS inside the <style> tags */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    h1 {
        font-size: 2em;
    }
    
    h2 {
        font-size: 1.5em;
    }
}
            

🎉 Your Complete Website Code

Here's what your complete index.html file should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        
        h1 {
            color: #4F46E5;
            text-align: center;
            font-size: 2.5em;
        }
        
        h2 {
            color: #7C3AED;
            border-bottom: 2px solid #7C3AED;
            padding-bottom: 10px;
        }
        
        p {
            line-height: 1.6;
            font-size: 1.1em;
        }
        
        ul {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        li {
            margin-bottom: 10px;
        }
        
        a {
            color: #F97316;
            text-decoration: none;
            font-weight: bold;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            h2 {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    
    <h2>About Me</h2>
    <p>Hi! I'm learning web development with ABCCoders.</p>
    
    <h2>My Photo</h2>
    <img src="https://via.placeholder.com/200x200/4F46E5/FFFFFF?text=My+Photo" 
         alt="My photo" 
         style="border-radius: 50%; display: block; margin: 0 auto;">
    
    <h2>My Hobbies</h2>
    <ul>
        <li>Playing video games</li>
        <li>Reading books</li>
        <li>Learning to code</li>
    </ul>
    
    <h2>Fun Facts</h2>
    <div style="background: linear-gradient(135deg, #4F46E5, #7C3AED); 
                color: white; 
                padding: 20px; 
                border-radius: 15px; 
                text-align: center;">
        <p>I started learning to code with ABCCoders!</p>
        <p>My favorite programming language is Python 🐍</p>
    </div>
    
    <h2>Contact Me</h2>
    <p>Email: <a href="mailto:me@example.com">me@example.com</a></p>
</body>
</html>
            

🚀 Next Steps

Congratulations! You've built your first website! Here are some ideas to make it even better:

Add more pages: Create about.html, contact.html, etc.
Learn CSS animations: Make elements move and fade
Add a navigation menu: Link between different pages
Include a contact form: Let visitors send you messages
Host it online: Share your website with the world!

💫 Pro Tips for Young Web Developers

🎨 Experiment with colors: Use online color pickers to find perfect shades
📱 Test on mobile: Always check how your site looks on phones
🔍 Learn by inspecting: Right-click → "Inspect Element" on any website
📚 Practice daily: Build something new every week
🤝 Share your work: Show friends and get feedback

🎓 Keep Learning with ABCCoders!

This is just the beginning of your web development journey! At ABCCoders, we offer comprehensive courses that will take you from HTML basics to advanced web applications with JavaScript, React, and backend development.

Join Our Web Development Course!

HTML & CSS for Beginners: Build Your First Website