Web Development for Beginners

Previous Lesson
Next Lesson

Lesson 5: Creating a Dynamic Webpage

Web Development for Beginners Lesson 5: Creating a Dynamic Webpage

Let’s apply what you’ve learned to enhance your Personal Bio Page with interactivity!

HTML File

<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Bio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 id="header">Welcome to My Bio</h1>
    </header>
    <main>
      <section>
        <h2>About Me</h2>
        <p id="description">Hi, I’m [Your Name]. Click the button to learn more!</p>
        <button id="moreButton">Learn More</button>
      </section>
    </main>
    <footer>
      <p>© 2024 My Website</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>

CSS File (styles.css)

body {
  font-family: Arial, sans-serif;
}
button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: darkgreen;
}

JavaScript File (script.js)

document.getElementById('moreButton').addEventListener('click', function() {
  const description = document.getElementById('description');
  description.textContent = 'I’m learning web development to build amazing websites!';
});
Previous Lesson
Back to Tutorial
Next Lesson