“How to Build a Portfolio Website Using Only HTML – Beginner Friendly!”
CodeMeUpHey everyone! 👋
If you’re just starting with web development, building a portfolio website is one of the best beginner projects. And the good news? You don’t even need CSS or JavaScript to begin — just pure HTML!
Let’s build a clean and simple personal portfolio site that you can improve later.
🌟 What Is a Portfolio Website?
A portfolio website shows:
Who you are
What you’ve done
How others can contact you
Even with HTML alone, you can start showcasing your work or learning.
🧱 Folder Setup
1. Create a new folder and name it: my-portfolio
2. Inside that folder, create a file named: index.html
🧾 Basic HTML Structure
Here’s a simple HTML file to get you started:
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Hi, I'm Suraj 👋</h1>
<p>I’m a student passionate about coding and creativity.</p>
<h2>📂 Projects</h2>
<ul>
<li>Notion Study Planner</li>
<li>CodeMeUp Blog</li>
<li>Simple Calculator (Coming soon)</li>
</ul>
<h2>📞 Contact</h2>
<p>Email: yourname@example.com</p>
<p>Instagram: @yourhandle</p>
</body>
</html>
✅ Save it as index.html, then open it in any browser. Boom — your first website!
📥 Download Sample Code
https://github.com/Surajnk19/Html-portfolio-/blob/main/html-portfolio%20code
🧠 What You'll Learn:
HTML tags like <h1>, <ul>, <p>, etc.
How to structure your content
The basics of creating a personal website
---
🔁 What’s Next?
This is just Part 1. In the next part, I’ll show you how to add CSS to style your site and make it look professional! 🎨✨
So follow along, and stay tuned for more.
Subscribe to my newsletter
Read articles from CodeMeUp directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by