✨ 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.htmlstyle.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.htmlfile 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!
Your words have the power to make the abstract feel concrete, to bring fleeting thoughts into sharp focus. I’ve read many articles and books in my time, but there’s something about your writing that makes me feel as though I’ve discovered a new way of thinking, a new way of being. You’ve truly unlocked something special in your words.