Create a Portfolio Homepage Using Only HTML – Beginner Project

on
Create a Portfolio Homepage Using Only HTML – Beginner Project

Create a Portfolio Homepage Using Only HTML – Beginner Project

📖 Aaj Ke Blog Mein Aap Seekhenge:

  • Kaise ek structured personal portfolio homepage banayein
  • HTML ke real-world use kaise hota hai
  • Kaise semantic tags se layout banate hain
  • Kaise contact form, links, image add karte hain

🧩 1. Page Structure Overview

Hum banayenge ek simple, clean portfolio homepage with these sections:

  • Header with name and tagline
  • Navigation bar
  • About Me section
  • Skills section (using list)
  • Projects section (using cards layout)
  • Contact form
  • Footer

🧱 2. Complete HTML Code – Step-by-Step

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>

  <header>
    <h1>Rahul Sharma</h1>
    <p>Frontend Web Developer</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>Hello! I’m Rahul, a passionate frontend developer learning HTML, CSS & JavaScript.</p>
    </section>

    <section id="skills">
      <h2>My Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS (learning)</li>
        <li>JavaScript (upcoming)</li>
      </ul>
    </section>

    <section id="projects">
      <h2>My Projects</h2>
      <article>
        <h3>Project 1: Basic Portfolio</h3>
        <p>This page you are seeing now!</p>
      </article>
      <article>
        <h3>Project 2: Coming Soon</h3>
        <p>Once I learn CSS, I'll build better projects.</p>
      </article>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form action="#" method="post">
        <label>Name:</label><br>
        <input type="text" name="name"><br><br>
        <label>Email:</label><br>
        <input type="email" name="email"><br><br>
        <label>Message:</label><br>
        <textarea name="message" rows="4" cols="40"></textarea><br><br>
        <input type="submit" value="Send">
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 Rahul Sharma | WebDevSeekho</p>
  </footer>

</body>
</html>

✅ Features Covered

  • Semantic HTML5 Tags
  • Proper Web Page Structure
  • Navigation and Layouting
  • Lists, Forms & Inputs
  • Beginner-Friendly Clean Code

🧪 Practice Task for You:

  • Apne naam aur content se is portfolio ko customize karo
  • Project 2 ke jagah apna koi mini project description likho
  • Form action="#" me future me backend add kar sakte ho

🎯 Aaj Aapne Kya Sikha?

  • Real portfolio page banaya sirf HTML se
  • HTML structure ka real use seekha
  • Resume me dikhane layak ek project complete kiya

Author: Naveen kumar

Presented by: WebDevSeekho

Comments

Post a Comment