Web Development for Beginners

Previous Lesson
Next Lesson

Lesson 5: Adding Style to Your First Webpage

Web Development for Beginners Lesson 5: Adding Style to Your First Webpage

Let’s apply what you’ve learned to style your Personal Bio Page from Module 2.

HTML File:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Bio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Welcome to My Bio</h1>
    </header>
    <main>
      <section>
        <h2>About Me</h2>
        <p>Hi, I’m [Your Name]. I love web development!</p>
      </section>
    </main>
    <footer>
      <p>© 2024 My Website</p>
    </footer>
  </body>
</html>

CSS File (styles.css):

/* General Styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}
header {
  background: #333;
  color: white;
  text-align: center;
  padding: 20px;
}
main {
  padding: 20px;
}
h1, h2 {
  color: #333;
}
footer {
  text-align: center;
  padding: 10px;
  background: #333;
  color: white;
}

Key Takeaways from Module 3:

  1. CSS allows you to control the appearance of your website.
  2. The Box Model is essential for understanding layout and spacing.
  3. Flexbox and Grid are powerful tools for creating responsive designs.
  4. You’ve styled your first webpage!

Next up is Module 4, where you’ll bring your website to life with JavaScript. 🚀

Previous Lesson
Back to Tutorial
Next Lesson