Day 9: Designing a basic Header-Content-Footer Layout using HTML and CSS

Hey there, fellow web enthusiasts!

As part of my web development internship, today, my mentor assigned me 10 tasks to help me get hands-on experience with HTML and CSS. Each task involved designing a simple web page layout, focusing on structuring content and styling with CSS.

Today, I want to walk you through one of my task, where I had to create a basic webpage layout with a header, a content section with three boxes, and a footer.

The Layout

Here's how the final output looks:

This design is a simple three-section structure:

1. Header – The top section, usually for navigation or branding.
2. Content Area – Three evenly spaced boxes, useful for displaying services, features, or categories.
3. Footer – The bottom section, typically for copyright info or links.

The HTML Structure

The structure is straightforward. I wrapped everything inside a container div, with separate elements for the header, main content, and footer. 

Sure! Let me break down the HTML structure of this layout so it's easy to understand.
The HTML code consists of three main sections inside a container:
 <div class="container">
    <header class="header">Header</header>
    <main class="content">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </main>
    <footer class="footer">Footer</footer>
  </div>

Let’s go through it step by step:
1️⃣ Container (div class="container")
This div acts as the main wrapper for the entire layout. It keeps all elements inside a structured box so they are properly aligned and styled.
📌 Why use a container?
Helps in centering the content.
Makes it easier to apply styles consistently.
Provides a bounded width for responsiveness.

2️⃣ Header (header class="header")
<header class="header">Header</header>
This is the top section of the page. The word "Header" is just placeholder text. Usually, this section contains:
✅ A website title or logo
✅ A navigation menu
✅ Any important links (Home, About, Contact, etc.)
Here, it’s styled with a background color and centered text.
3️⃣ Main Content Section (main class="content")
<main class="content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</main>
This is the core content area of the page.
The <main> tag is a semantic HTML element, meaning it represents the main content of the webpage.
Inside it, there are three divs with the class "box", which are empty placeholders for now.
📌 How is this useful?
These three boxes can be used for services, images, or featured content.
They are placed horizontally next to each other using CSS Flexbox.

4️⃣ Footer (footer class="footer")
<footer class="footer">Footer</footer>
This is the bottom section of the page. Typically, a footer includes:
✅ Copyright information (© 2025 MyWebsite)
✅ Social media links
✅ Contact details
In this layout, it's just a simple text "Footer" for now. 

Breaking Down the CSS

To style this layout, I used CSS Flexbox, which made it super easy to align elements.

 Key Styling Concepts:

• Centered Layout: Used display: flex on body to center everything.
• Container Sizing: Used width: 90% with a max-width: 1200px for responsiveness.
• Flexbox for Content: 
  display: flex; justify-content: space-between; aligns the boxes horizontally. .box {flex: 1;} ensures equal width
• Spacing: Added margin: 20px 0; to separate sections.

What I Learned?

• Flexbox is a lifesaver! It makes aligning elements so much easier.
• Simple designs are the foundation of bigger projects. Even though this looks basic, it's a structure used in real-world websites.
• Consistency in spacing, colors, and fonts makes a layout look polished.

---

I hope this breakdown helps you if you're learning HTML & CSS. Stay tuned for more updates on my Web Intern Tales! 🚀

Let me know in the comments—how would you improve this layout?

Happy coding! 😊