Web Development for Beginners

Previous Lesson
Next Lesson

Lesson 5: Building a Complete Webpage

Web Development for Beginners Lesson 5: Building a Complete Webpage

Now let’s combine everything you’ve learned to build a complete webpage!

Project: Personal Bio Page

htmlCode kopieren<!DOCTYPE html>
<html>
  <head>
    <title>My Bio</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
      }
      header, footer {
        text-align: center;
        background-color: #f4f4f4;
        padding: 10px;
      }
      main {
        max-width: 800px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Bio</h1>
      <nav>
        <a href="#about">About Me</a> |
        <a href="#hobbies">Hobbies</a> |
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About Me</h2>
        <p>Hi! My name is [Your Name]. I’m learning web development to create amazing websites!</p>
      </section>
      <section id="hobbies">
        <h2>Hobbies</h2>
        <ul>
          <li>Reading</li>
          <li>Coding</li>
          <li>Exploring new technologies</li>
        </ul>
      </section>
      <section id="contact">
        <h2>Contact</h2>
        <form action="#">
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>
          <br>
          <button type="submit">Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>© 2024 [Your Name]</p>
    </footer>
  </body>
</html>

Key Takeaways from Module 2:

  1. HTML is the backbone of any webpage, structuring its content.
  2. Semantic HTML improves accessibility and readability.
  3. Forms are essential for collecting user input.
  4. You’ve built a complete, functional webpage!

Next up is Module 3, where you’ll learn to make your webpage visually appealing with CSS. 🎨

Previous Lesson
Back to Tutorial
Next Lesson