Building a simple webpage

Building a simple webpage is an exciting endeavor that introduces you to the fundamental concepts of web development. Whether you're a beginner or looking to refresh your skills, creating a basic webpage using HTML and CSS provides a hands-on experience in crafting the visual and structural elements of a website.

Getting Started

To get started, create a new folder on your computer and name it simple-webpage. Inside this folder, create two new files: index.html and styles.css.

HTML Structure

Start by creating the basic structure of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 
  <header>
    <h1>Welcome to My Simple Webpage</h1>
  </header>
 
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
 
  <main>
    <section>
      <h2>About Us</h2>
      <p>This is a simple webpage built using HTML and CSS. Learn more about us below:</p>
    </section>
  </main>
 
  <footer>
    <p>&copy; 2024 Simple Webpage</p>
  </footer>
 
</body>
</html>

CSS Styling

Now that we have the basic structure of our webpage, let's add some styling to it.

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
 
header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}
 
nav {
  background-color: #444;
  color: white;
  padding: 10px;
}
 
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
 
li {
  display: inline;
  margin-right: 20px;
}
 
a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
 
main {
  padding: 20px;
}
 
section {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;
}

View in Browser

Open the HTML file in a web browser to view your simple webpage.

Customize and Expand

Feel free to customize the content and styling to fit your preferences. Add more sections, enhance styling, and experiment with different design elements.

Example: Adding Images

<!-- Inside the main section -->
<section>
  <h2>Our Team</h2>
  <img src="team.jpg" alt="Team Photo" style="max-width: 100%;">
  <p>Meet the talented individuals behind our simple webpage.</p>
</section>

Example: Adding a Form

<!-- Inside the main section -->
<section>
  <h2>Contact Us</h2>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
 
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
 
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
 
    <input type="submit" value="Send Message">
  </form>
</section>

Variables Introduction