✨ Build Your First Website with HTML & CSS (Free Beginner Lesson)

Welcome to this beginner-friendly web development lesson! In this tutorial, you’ll learn how to build your own personal website using only HTML and CSS. No prior experience needed.

🧰 What You’ll Need

A web browser (like Chrome)
A code editor (we recommend Visual Studio Code or CodePen)
Internet connection
About 30–45 minutes!

🚀 What You’ll Learn

✅ What HTML & CSS are
✅ How to structure a web page
✅ How to style your page with CSS
✅ How to publish your site for free

🔹 Step 1: Create Your Project Files

Make a new folder on your computer and name it:
personal-website

Inside that folder, create two files:

index.html
style.css

🔹 Step 2: Add the HTML Structure

Open the index.html file and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Personal Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Hello, I’m Ethan!</h1>
    <p>Welcome to my personal space on the web.</p>
  </header>
  <section>
    <h2>About Me</h2>
    <p>I love building websites and helping others learn how to code.</p>
  </section>
  <footer>
    <p>© 2025 Ethan. All rights reserved.</p>
  </footer>
</body>
</html>

🔹 Step 3: Add the CSS Styles

Open the style.css file and paste this code:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f5;
  margin: 0;
  padding: 0;
  color: #333;
}

header, section, footer {
  padding: 20px;
  text-align: center;
}

header {
  background-color: #6a5acd;
  color: white;
}

footer {
  background-color: #ddd;
}

🔹 Step 4: Preview Your Website

Open the index.html file in your browser.
You’ll see your new personal website!
Try editing some of the content or colors to make it your own.

🔹 Step 5: Publish It Online (Optional)

You have three easy options to publish your website online:

✅ Option 1: Get a Domain & Publish Through Us (Recommended)

Want your own .com website and a custom domain name like yourname.com?

We can take care of everything—from setting up your hosting to publishing your site.

🌐 Click here to get your domain & publish your site

You’ll get:

A custom domain name
Your personal website published online
Ongoing support and updates

Perfect for students, freelancers, and small businesses!

🌐 Option 2: Use Netlify (Free)

Visit Netlify
Drag and drop your project folder to publish it instantly

🖥️ Option 3: Use GitHub Pages (Free)

Create a GitHub account
Upload your files to a repository
Follow GitHub Pages setup guide

Great for those comfortable with version control or coding platforms.

❤️ If You Enjoyed This…

👉 Like and follow for more tutorials!
👉 Leave a comment or question below!
👉 Share your finished website with us!

CONNECT ON SOCIAL

Analytics Bosipha

Build Your First Website with HTML & CSS – Free Beginner Tutorial