One of the best ways to start your HTML journey is by creating a personal portfolio page. This project allows you to introduce yourself to the world of web development while learning the basics of HTML. It’s not just about coding; it’s about telling your story through the web.
The objective here is to craft a web page that effectively portrays your personal and professional persona. This includes detailing your biography, showcasing your skills, and possibly even including a portfolio of work or projects you've completed. This page will be a cornerstone in establishing your online presence and can evolve as you progress in your career.
<html>
<head>
<title>Your Name - Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<img src="https://i.imgur.com/KvEuBiI.png">
<h1>Your Name</h1>
<p>Web Developer | Designer | Tech Enthusiast</p>
</header>
<section id="bio">
<h2>About Me</h2>
<p>[Your biography]</p>
</section>
<section id="work">
<h2>My Work</h2>
<div class="project" id="project1">Project 1</div>
<div class="project" id="project2">Project 2</div>
<div class="project" id="project3">Project 3</div>
</section>
<footer>
<p>Contact me at [your email]</p>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
header {
text-align: center;
padding: 10px;
background-color: #f4f4f4;
}
header img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 10px;
}
section {
margin: 20px;
}
.project {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 10px;
display: inline-block;
text-align: center;
line-height: 200px;
}
h1, h2 {
color: #333;
}
#bio, #work {
background-color: #e9e9e9;
padding: 15px;
}
footer {
background-color: #f4f4f4;
text-align: center;
padding: 10px;
}