💼 Day 10 — Mini Project : Build Your HTML Portfolio Page

on

💻 Day 10 — Mini HTML Project: Personal Portfolio Page

Congratulations on reaching Day 10! 🎉 You’ve learned all the foundational elements of HTML — structure, forms, tables, multimedia, and semantics. Today, you’ll put that knowledge into action by building your first **mini HTML project** — a simple yet elegant **Personal Portfolio Page**. This project will combine everything you’ve learned into a cohesive, real-world web page.

🧩 1️⃣ Project Overview

The goal of this project is to create a personal portfolio web page that introduces yourself, showcases your skills, and includes links to your projects or social profiles. We’ll use semantic HTML for structure, forms for contact, lists for skills, and multimedia for visual appeal.

📘 2️⃣ Folder Setup

Create a folder named portfolio and inside it, create a file index.html. You can later add style.css for styling and script.js for interactivity when you move to CSS and JS modules.

🧱 3️⃣ Portfolio Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <h1>Rahul Naidu</h1>
    <p>Aspiring Web Developer | HTML Learner</p>
  </header>

  <nav>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I am a passionate learner exploring front-end web development. I love creating visually appealing and user-friendly websites using HTML.</p>
    </section>

    <section id="skills">
      <h2>My Skills</h2>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript (Basics)</li>
        <li>React.js (Beginner)</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <article>
        <h3>HTML Course Blog</h3>
        <p>A blog page containing day-wise HTML lessons with interactive editors and examples.</p>
        <a href="https://techcoursesandjobupdates.blogspot.com/" target="_blank">Visit Blog</a>
      </article>

      <article>
        <h3>Personal Website</h3>
        <p>A single-page portfolio showcasing my skills and contact info.</p>
      </article>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="40"></textarea><br><br>

        <input type="submit" value="Send Message">
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 Rahul Naidu. Built with ❤️ using HTML.</p>
  </footer>
</body>
</html>

🧩 4️⃣ Adding Multimedia

<figure>
  <img src="profile.jpg" alt="Profile Photo" width="150" height="150">
  <figcaption>Rahul Naidu - Frontend Developer</figcaption>
</figure>

🧠 5️⃣ Practice Enhancements

  1. Add an embedded video introduction using <iframe> from YouTube.
  2. Include a map iframe showing your city or region.
  3. Experiment with forms by adding dropdowns or radio inputs.
  4. Split sections with <hr> for a clean design.

🧮 Mini Quiz

  • Q1: What semantic elements did you use for structure?
  • Q2: Why is <figure> better than just using an image?
  • Q3: Which HTML tag is ideal for grouping related navigation links?

🎯 Summary

By completing this project, you’ve tied together everything you learned across 10 days — from basic tags and lists to multimedia and forms. You now have a working HTML-only portfolio that you can later enhance with CSS and JavaScript. In the next module, you’ll learn CSS to make your website visually stunning and responsive across all devices.

Comments

Post a Comment