Metadata
Notes
🎓 Project: Build Your First Web Developer Portfolio (HTML Only)
📌 Objective
To create a simple, professional portfolio website using only HTML. This will showcase your past projects and provide ways for potential clients, employers, or visitors to learn more about you, see your work, and even contact you.
🚀 Why Create a Portfolio Website?
A portfolio website is a central piece of any web developer’s professional presence. Here’s why:
-
🌍 It’s publicly accessible — anyone with the link can view your work.
-
🧾 It acts like your resume — but interactive and visual.
-
🖼️ It lets you show off what you’ve built (projects, apps, pages).
-
🔗 It contains links to your other work, About Me, and Contact Me sections.
This project is your first step in becoming a professional developer — your personal home on the web.
🧱 What Will You Build?
A single HTML page (called index.html) that includes:
-
A main title and subheading.
-
A list of past projects with:
-
Preview screenshots
-
Clickable links to each project
-
-
Navigation links to:
-
About Me page
-
Contact Me page
-
🎯 You’ll build a project that looks like this:
My Portfolio
------------
Hi, I'm a web developer. Check out some of my work!
1. Movie Ranking Project [link + preview image]
2. Birthday Invite Project [link + preview image]
----------------------
About Me | Contact Me
🧰 Tools You’ll Use
-
🖥️ VS Code – Your code editor
-
🌐 HTML – The only language used for this version
-
🖼️ Screenshots – For preview images of your projects
-
📁 Folder Structure – To organize assets like images and HTML files
📁 Project Folder Structure (After Setup)
portfolio-project/
│
├── index.html
├── about.html
├── contact.html
│
├── public/
│ ├── movie-ranking.html
│ └── birthday-invite.html
│
└── assets/
└── images/
├── movie-ranking-preview.png
└── birthday-invite-preview.png
🧑💻 Step-by-Step Instructions
Here’s how to build the project in 7 manageable steps — just like a real web developer breaking down a big task.
✅ Step 1: Create the HTML Boilerplate
Use the skills from the previous lesson to write a basic HTML5 boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Web Developer Portfolio</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>💡 Tip: Use the ! + Enter shortcut in VS Code to auto-generate this structure.
✅ Step 2: Add Your Past Projects’ HTML Files
-
Open your
public/folder. -
Replace the code in:
-
movie-ranking.html -
birthday-invite.html
-
With the actual HTML code you wrote earlier in previous projects.
📌 This step ensures the projects reflect your creativity and personal touches, not the default versions.
✅ Step 3: Take Screenshots of Your Projects
-
Preview each HTML file in the browser.
-
Take a screenshot of the entire project (Google “how to take a screenshot on [your OS]” if needed).
-
Save the screenshot in
assets/images/ -
Rename each file clearly (e.g.,
movie-ranking-preview.png)
💡 You can also use the pre-provided images if you have issues with your screenshots.
✅ Step 4: Add Titles and Headings in index.html
Use HTML headings to introduce yourself and your projects.
<h1>My Portfolio</h1>
<h2>Hi, I'm a Web Developer.</h2>
<hr />
<h2>My Projects</h2>✅ Step 5: Add Anchor Tags to Link Projects
Use anchor tags (<a>) to link to your .html project pages.
Example:
<h3><a href="./public/movie-ranking.html">Movie Ranking Project</a></h3>✅ Step 6: Add Preview Images
Use the <img> tag to insert screenshots of your projects.
Example:
<img src="./assets/images/movie-ranking-preview.png" height="200" alt="Movie Ranking Screenshot" />🛠️ Tip: Use the height attribute (e.g., height="200") to keep images at a consistent size.
The browser will auto-adjust the width to maintain the correct aspect ratio.
✅ Step 7: Add Footer Links – About Me and Contact Me
At the bottom of your index.html, add a horizontal line and navigation links.
Example:
<hr />
<a href="./about.html">About Me</a> |
<a href="./contact.html">Contact Me</a>Create about.html and contact.html with basic content:
<h1>About Me</h1>
<p>Hello! I'm a web developer learning HTML and building cool things.</p><h1>Contact Me</h1>
<p>You can reach me at: yourname@example.com</p>📝 Example index.html Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>John's Portfolio</title>
</head>
<body>
<h1>John's Web Developer Portfolio</h1>
<h2>Check out my work below!</h2>
<hr />
<h3><a href="./public/movie-ranking.html">Movie Ranking Project</a></h3>
<img src="./assets/images/movie-ranking-preview.png" height="200" alt="Movie Project" />
<h3><a href="./public/birthday-invite.html">Birthday Invite Project</a></h3>
<img src="./assets/images/birthday-invite-preview.png" height="200" alt="Birthday Project" />
<hr />
<a href="./about.html">About Me</a> |
<a href="./contact.html">Contact Me</a>
</body>
</html>🎯 Bonus Tips
-
Use proper indentation to keep code readable.
-
Check your links — clicking them should open the correct project or page.
-
Use meaningful alt text for images (for accessibility and SEO).
-
Preview often! Open your HTML file in a browser and see how it looks.
-
You’ll style it with CSS later — for now, focus on clean structure.
🔚 Summary: What You Should Have Built
| Feature | Description |
|---|---|
| Title & Subtitle | Intro to you and your work |
| Project Links | Movie Ranking & Birthday Invite |
| Project Screenshots | Small preview images |
| About Me Page | Text about who you are |
| Contact Me Page | Way to reach out to you |
| Clean Code | Proper indentation and nesting |