📚 Introduction to HTML & CSS: Building Your First Web Page

Lesson Overview

In this lesson, you will:

  1. Understand the Basics of HTML & CSS
  2. Learn How to Structure a Web Page with HTML
  3. Style Your Web Page Using CSS
  4. Practice Semantic HTML for Better Accessibility & SEO
  5. Apply the CSS Box Model to Layout Your Content Properly

By the end of this lesson, you will have a fully structured and styled web page.

📌 Step 1: Setting Up Your Project

Before we start coding, let's set up our project.

📁 Project Folder Structure:

basic-webpage/
│── index.html
│── style.css

1️⃣ Create a Project Folder

  1. Open VS Code (or any text editor).

  2. Open your terminal and run:

    mkdir basic-webpage
cd basic-webpage

  3. Inside basic-webpage, create the two necessary files:

    touch index.html style.css

📌 Step 2: Writing the HTML

HTML (HyperText Markup Language) is the structure of a webpage. Think of it like the skeleton of a body.

What is Semantic HTML?

Semantic HTML uses meaningful tags that describe their content. Examples include:

  • <header> for the top section of a page
  • <main> for the primary content
  • <section> to group related content
  • <footer> for the bottom of a page

📜 Code: 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 First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Header Section -->
    <header>
        <h1>Welcome to My Web Page</h1>
    </header>

    <!-- Main Content -->
    <main>
        <section>
            <h2>About Me</h2>
            <p>Hi! I'm learning HTML and CSS. This is my first webpage.</p>
        </section>

        <section>
            <h2>My Interests</h2>
            <ul>
                <li>Coding</li>
                <li>Music</li>
                <li>Traveling</li>
            </ul>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 My First Web Page</p>
    </footer>

</body>
</html>

Explanation

  • The <head> contains metadata and links to the CSS file.
  • The <header> section contains the main title (<h1>).

  • The <main> includes:

    • "About Me" section with a paragraph.
    • "My Interests" section with an unordered list (<ul>).
  • The <footer> includes copyright information.

📌 Step 3: Styling with CSS

CSS (Cascading Style Sheets) is used to style the HTML structure.

CSS Box Model

Everything in CSS is a box with:

  1. Content (text or images)
  2. Padding (space inside the border)
  3. Border (the edge around the content)
  4. Margin (space outside the border)

📜 Code: style.css

/* Reset default styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* Header Styling */
header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Main Content */
main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Section Styling */
section {
    margin-bottom: 20px;
}

/* List Styling */
ul {
    list-style-type: square;
}

/* Footer Styling */
footer {
    background: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}

Explanation

  • The body has global styles:

    • font-family: Arial, sans-serif; → Sets a clean font.
    • background-color: #f4f4f4; → Adds a light background.

  • The header:

    • background-color: #007bff; → Gives a blue background.
    • color: white; → Makes text white.
    • text-align: center; → Centers the text.

  • The main:

    • max-width: 800px; margin: auto; → Centers the content.
    • box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); → Adds a soft shadow for depth.

  • The footer:

    • Matches the header for a cohesive look.

📌 Step 4: Viewing Your Page

  1. Open your project folder.
  2. Open index.html in your browser.
  3. You should see a beautifully structured and styled webpage!

📌 Step 5: Understanding the CSS Box Model

The Box Model controls how elements behave.

Example of a Box Model Breakdown

div {
    width: 300px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

Explanation:

  • width: 300px; → Content width.
  • padding: 10px; → Space between content & border.
  • border: 5px solid black; → Adds a black border.
  • margin: 20px; → Adds space outside the box.

Visual Representation

+-----------------------+  ← Margin (20px)
|  +-----------------+  |  ← Border (5px)
|  |  Content Area   |  |  ← Padding (10px)
|  +-----------------+  |
+-----------------------+

📌 Step 6: Next Steps

✅ Created a structured HTML page
✅ Styled it with CSS
✅ Applied the Box Model
✅ Understood semantic HTML for better accessibility

🎯 Next Lesson: Adding a Hamburger Menu & JavaScript for Interactivity! 🚀

Final Notes

You now have a strong foundation in HTML & CSS! Feel free to experiment:

  • Change colors & fonts
  • Modify spacing & layout
  • Practice adding more sections

In the next lesson, we will:

  • Build a hamburger menu for navigation ✅
  • Use JavaScript to fetch & display data from an API ✅

Let’s keep building! 🚀

Copyright © Big Poppa Code & Progress and Fortune LLC 2025