Constructing an HTML Personal Homepage: Core Steps from Scratch to Online
Begin by creating a new file with the .html extension using any text editor (e.g., VS Code, Sublime Text, or Notepad). Name it index.html.
Document Structure
Every HTML page starts with a standard skeleton. Open the file and add the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Rivera – Personal Site</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Adding Personal Details
Inside the <body>, introduce yourself with a heading and a short paragraph:
<body>
<h1>Hey, I'm Alex Rivera</h1>
<p>Full‑stack developer and open‑source enthusiast based in Berlin.</p>
</body>
Incorporating an Image
Use the <img> tag to display a profile photo. Place the image file in an images folder and reference it:
<img
src="images/profile.jpg"
alt="Portrait of Alex Rivera"
style="width:200px; border-radius:50%; display:block; margin:20px auto;"
>
Building Navigasion
Add a simple navigation bar so visitors can jump to different sections:
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Organizing Content with Sections
Use <section> elements to divide the page into logical blocks, each with an id that matches a navigation link:
<section id="about">
<h2>About Me</h2>
<p>I have over five years of experience building web applications...</p>
</section>
<section id="work">
<h2>Recent Projects</h2>
<p>Here you can showcase a portfolio or links to GitHub repositories.</p>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<p>Email: alex.r@example.com</p>
</section>
Styling the Page
Ancoding all styles inline becomes messy quickly. Instead, link an external CSS file. Inside the <head> add:
<link rel="stylesheet" href="styles.css">
Create styles.css with basic rules:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 2rem;
background: #f9f9f9;
color: #333;
}
a {
color: #007acc;
text-decoration: none;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 1.5rem;
}
Optional JavaScript
If you plan to add interactivity, place another link in the <head>:
<script src="script.js" defer></script>
The defer attribute ensures the script runs after the HTML is parsed.
Preview and Deployment
Open index.html directly in a browser to test local. To publish it, upload all files (HTML, CSS, image folder) to a web server. Free static hosting services like GitHub Pages or Netlify work well for personal pages. Once deployed,15 share the URL with your network.
