HTML Project: Build Your First Website

Putting It All Together

Now that you've learned HTML basics, let's build a complete personal website!

This project combines everything you've learned: structure, headings, paragraphs, links, images, lists, and semantic elements.

<!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>John Doe</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I'm a web developer passionate about creating beautiful websites.</p>
    </section>

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

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <input type="email" placeholder="Your email">
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2024 John Doe</p>
  </footer>
</body>
</html>

Build Your Portfolio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>
  <header style="background: #d1039e; color: white; padding: 20px; text-align: center;">
    <h1>Your Name</h1>
    <nav>
      <a href="#about" style="color: white; margin: 0 10px;">About</a>
      <a href="#skills" style="color: white; margin: 0 10px;">Skills</a>
      <a href="#contact" style="color: white; margin: 0 10px;">Contact</a>
    </nav>
  </header>

  <main style="padding: 20px;">
    <section id="about">
      <h2>About Me</h2>
      <p>Write something about yourself here...</p>
    </section>

    <section id="skills">
      <h2>My Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>
  </main>

  <footer style="background: #333; color: white; padding: 10px; text-align: center;">
    <p>&copy; 2024 Your Name</p>
  </footer>
</body>
</html>

Note: Congratulations! You've completed the HTML course!

Note: Next steps: Learn CSS to style your website and JavaScript to add interactivity.

Note: Keep practicing by building more projects!