Project 1: Creating a Personal Portfolio Page

Introduction

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.

Objective

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.

Starter HTML Code

<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>

Starter CSS Code

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;
}

Quick Tips