Web Development for Beginners

Previous Lesson
Next Lesson

Lesson 3: Building the Home Page

Web Development for Beginners Lesson 3: Building the Home Page
HTML (index.html):
<!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>
  <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Portfolio</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>Hello! I’m [Your Name], a budding web developer.</p>
    </section>
  </main>
  <footer>
    <p>© 2024 My Portfolio</p>
  </footer>
</body>
</html>
CSS (styles.css):
/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}
header {
  background-color: #333;
  color: white;
  padding: 10px 20px;
}
header h1 {
  margin: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  display: inline;
  margin-right: 15px;
}
nav ul li a {
  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  text-decoration: underline;
}
footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;
}
Previous Lesson
Back to Tutorial
Next Lesson