Lesson 3 - Build a Simple Personal Website with HTML & CSS (Step-by-Step)
So you want to create your first personal website but don’t know where to start? You're in the right place! In this tutorial, we'll build a simple but elegant personal site using only HTML and CSS. No frameworks, no JavaScript — just the essentials. Let’s dive in! 👇
WEB DEVELOPMENT
Leonardo Gomes Guidolin
4/18/20251 min read
Step 1: Set Up Your Project Folder
Create a new folder on your computer called my-website.
Inside it, create two files:
index.html
style.css
Your project structure should look like this:
my-website/
│
├── index.html
└── style.css
✍️ Step 2: Write Your HTML
Open index.html 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 John Doe</h1>
<p>Welcome to my personal website!</p>
</header>
<section class="about">
<h2>About Me</h2>
<p>I’m a beginner web developer learning HTML, CSS, and JavaScript. This is my first project!</p>
</section>
<section class="contact">
<h2>Contact Me</h2>
<p>Email: johndoe@example.com</p>
<p>GitHub: <a href="https://github.com/yourusername" target="_blank">yourusername</a></p>
</section>
<footer>
<p>© 2025 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
🎨 Step 3: Add Some CSS
Now open style.css and paste this:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
color: #333;
}
header {
background-color: #007BFF;
color: white;
padding: 2rem;
text-align: center;
}
section {
padding: 1.5rem;
max-width: 800px;
margin: auto;
}
.about, .contact {
background: white;
margin: 1rem 0;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 1rem;
background-color: #e9ecef;
font-size: 0.9rem;
}
🌐 Step 4: Open in Your Browser
Double-click index.html — your browser should open the page. Boom! Your personal website is live on your computer. 🎉
🚀 Bonus: Deploy Online (Optional)
You can publish your website for free using GitHub Pages:
Create a GitHub repo and upload your files
Go to Settings > Pages
Choose the branch and folder (usually /root)
Your site will be live at https://yourusername.github.io/your-repo-name
✅ Final Thoughts
You’ve just built a clean, simple personal website using only HTML and CSS. Now you can:
Customize the content and colors
Add a profile photo
Improve layout with flexbox or grid