Before you begin, make sure you are comfortable with these foundational ideas. Read through each one · they will be used constantly throughout this lesson.

What Is an HTML Element?

An HTML element is a piece of content wrapped in a tag. For example:

<div>This is a block of content</div>
<p>This is a paragraph</p>
<header>This is a header section</header>

What Is a Block-Level Element?

A block-level element automatically takes up the full width of its parent container and starts on a new line. Examples: <div>, <p>, <header>, <nav>, <section>, <footer>, <h1>.

What Is the CSS Box Model?

Every HTML element is a box. The box has:

• Content · the actual text or image inside
• Padding · space between the content and the border
• Border · a line around the padding
• Margin · space outside the border, pushing other elements away

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

What Is width and height?

width sets how wide an element is. height sets how tall it is. You can use px (fixed pixels) or % (percentage of the parent's width).

What Is float?

float moves an element to the left or right of its container, letting other content flow around it · like how text wraps around a photo in a magazine.

What Is Flexbox?

Flexbox is a CSS layout system that places child elements in a row or column automatically, with powerful alignment controls. You activate it with display: flex on the parent element.

What Is CSS Grid?

CSS Grid is a two-dimensional layout system. It lets you define rows AND columns simultaneously, creating grid-like structures. You activate it with display: grid on the parent element.

What Is a Media Query?

A media query checks the size of the screen and applies different CSS rules depending on the result:

@media (max-width: 768px) {
  /* CSS rules for screens 768px wide or narrower */
}

What Does "Website Layout" Mean?

A website layout is the organised structure of all the visual zones on a webpage. Think of building a house: before you put up walls and furniture, you draw a floor plan showing which room goes where. A website layout is the floor plan of your webpage.

Almost every website in the world · news sites, social media platforms, government pages, online stores · follows a similar layout blueprint with these major zones:

┌─────────────────────────────────────┐
│              HEADER                 │  ← logo, site name
├─────────────────────────────────────┤
│            NAVIGATION BAR           │  ← links menu
├──────────────────────┬──────────────┤
│                      │              │
│    MAIN CONTENT      │   SIDEBAR    │  ← article + extras
│                      │              │
├─────────────────────────────────────┤
│               FOOTER                │  ← copyright, links
└─────────────────────────────────────┘

Let's understand each zone before writing any code.

Zone 1 · The Header

The header sits at the very top of the page. It typically contains:

• The website logo or brand name
• A tagline or subtitle
• Sometimes a search bar

💡 Real-world analogy: The header is like the front cover of a magazine · it identifies what you are reading immediately.

The HTML element for this is <header>.

Zone 2 · The Navigation Bar (Navbar)

The navbar contains a list of links · Home, About, Blog, Contact, etc. It can be:

• Horizontal (sitting below the header, spanning full width)
• Vertical (running down the left side of the page as a sidebar)
• Sticky (staying fixed at the top as you scroll)

The HTML element for this is <nav>.

Zone 3 · The Main Content Area

The main content area is the largest zone · it is where the actual articles, products, forms, or page content lives. This is what users came to your site to read.

The HTML element for this is <main> or a <section>.

Zone 4 · The Sidebar

The sidebar is a narrower column beside the main content. It often contains:

• Related articles
• Advertisements
• A category list
• A search widget
• A social media feed

The HTML element is typically <aside>.

Zone 5 · The Footer

The footer sits at the very bottom of the page. It typically contains:

• Copyright notice
• Secondary links (Privacy Policy, Terms of Service)
• Contact information
• Social media icons

The HTML element for this is <footer>.

Before writing any CSS, you always need the HTML skeleton. This is the foundation every CSS layout rule will be built on.

The Complete HTML Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Zone 1: Header -->
  <header class="site-header">
    <h1>My Awesome Website</h1>
    <p>Welcome to my little corner of the internet</p>
  </header>

  <!-- Zone 2: Navigation Bar -->
  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Zone 3 + 4: Content and Sidebar wrapper -->
  <div class="content-wrapper">

    <!-- Zone 3: Main Content -->
    <main class="main-content">
      <h2>Latest Articles</h2>
      <p>This is where your main page content goes. Articles, images, videos, and more all live here in the main content area.</p>
      <p>You can have multiple paragraphs, sections, and subsections here.</p>
    </main>

    <!-- Zone 4: Sidebar -->
    <aside class="sidebar">
      <h3>Categories</h3>
      <ul>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">Travel</a></li>
      </ul>
    </aside>

  </div><!-- end content-wrapper -->

  <!-- Zone 5: Footer -->
  <footer class="site-footer">
    <p>&copy; 2026 My Awesome Website. All rights reserved.</p>
  </footer>

</body>
</html>

Line-by-line breakdown of important parts:

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> · this tells mobile browsers to display the page at the correct width. Without this, your layout will look tiny on phones.
• <link rel="stylesheet" href="style.css"> · connects your CSS file to the HTML.
• class="site-header" · gives this element a class name so CSS can target it.
• <div class="content-wrapper"> · wraps the main content and sidebar together. This wrapper is what you will make into a two-column layout.
• © · the HTML code for the © copyright symbol.

Milestone output (no CSS yet): A plain unstyled page where all five zones stack vertically one after another · a tall single column of text. This is correct! CSS will arrange them properly.

Now let's style each zone individually before combining them.

Step 1 · The Universal Reset

Before styling anything, add a reset to ensure consistent behaviour across all browsers:

/* style.css */

/* === RESET === */
* {
  box-sizing: border-box;  /* padding and border are included IN the width */
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  background-color: #f0f0f0;
}

Why box-sizing: border-box?

Without it, adding padding to a 300px wide element makes it wider than 300px, because the padding is added outside the specified width. With border-box, the padding is included inside the 300px, so the element stays exactly 300px. This prevents many confusing layout bugs.

🤔 Thinking prompt: What happens if you forget box-sizing: border-box on a sidebar that is supposed to be exactly 25% wide? Try removing it and see if it overflows.

Step 2 · The Header

/* === HEADER === */
.site-header {
  background-color: #2c3e50;   /* dark blue-grey background */
  color: #ffffff;               /* white text */
  padding: 30px 20px;           /* 30px top/bottom, 20px left/right */
  text-align: center;
}

.site-header h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.site-header p {
  font-size: 1rem;
  color: #bdc3c7;               /* slightly dimmed subtitle text */
}

Expected output: A wide, dark blue-grey banner stretched across the full top of the page. Inside it, a large white site title and a smaller grey subtitle, all centred.

Understanding each line:

• background-color: #2c3e50 · sets a rich dark background. The header will stand out strongly.
• padding: 30px 20px · shorthand for: padding-top: 30px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px.
• color: #ffffff · sets text colour to white. This applies to all text inside .site-header unless overridden.
• .site-header h1 · this is a descendant selector · it targets only <h1> elements that are inside .site-header.

Step 3 · The Navigation Bar

/* === NAVBAR === */
.navbar {
  background-color: #34495e;   /* slightly lighter than header */
  overflow: hidden;             /* contains floated children */
}

.navbar ul {
  list-style: none;             /* removes bullet points */
  display: flex;                /* arranges links in a row */
  padding: 0;
  margin: 0;
}

.navbar ul li a {
  display: block;               /* makes the entire cell clickable */
  color: #ecf0f1;               /* off-white link colour */
  text-decoration: none;        /* removes underline */
  padding: 14px 20px;           /* comfortable click area */
  font-size: 1rem;
  transition: background-color 0.2s ease;  /* smooth hover effect */
}

.navbar ul li a:hover {
  background-color: #2c3e50;   /* darkens on hover */
  color: #ffffff;
}

Expected output: A horizontal dark bar below the header, containing four links in a row: Home | About | Blog | Contact. Each link has padding making it a comfortable size to click. Hovering over a link darkens it.

Understanding each line:

• list-style: none · removes the bullet points (•) from the <ul>.
• display: flex on the <ul> · turns the list into a horizontal flex container, so all <li> items sit side by side in a row instead of stacking vertically.
• display: block on the <a> · makes the link fill its entire <li> cell, so users can click anywhere in the cell, not just on the text.
• transition: background-color 0.2s ease · animates the background colour change over 0.2 seconds when hovering.

Step 4 · The Two-Column Content Layout

This is the most important part: making the main content and sidebar sit side by side in two columns.

There are three approaches taught across web development:

Approach A · Using Float (Classic Method)

/* === CONTENT WRAPPER (float approach) === */
.content-wrapper {
  overflow: hidden;            /* clearfix: collapses around floated children */
  max-width: 1100px;           /* prevents content spreading too wide */
  margin: 20px auto;           /* centres the wrapper on the page */
  padding: 0 20px;
}

.main-content {
  float: left;                 /* float to the LEFT */
  width: 70%;                  /* takes up 70% of the wrapper */
  background-color: #ffffff;
  padding: 25px;
  min-height: 400px;
}

.sidebar {
  float: right;                /* float to the RIGHT */
  width: 28%;                  /* takes up 28% (2% gap between them) */
  background-color: #ffffff;
  padding: 20px;
  min-height: 400px;
}

Expected output: Main content takes up about 70% of the page width on the left. Sidebar takes up about 28% on the right. A 2% visual gap separates them. Both columns sit at the same height.

Understanding floats:

• float: left pulls the element to the left and lets content flow to its right.
• float: right pulls it to the right and lets content flow to its left.
• Together, the two floated elements sit beside each other.
• overflow: hidden on the parent is a clearfix technique · without it, the parent collapses to zero height because floated elements are taken out of the normal document flow.

🤔 What if you remove overflow: hidden from .content-wrapper? The footer will slide up and overlap the content · because the parent doesn't know how tall its floated children are.

Approach B · Using Flexbox (Modern Recommended Method)

Flexbox is the modern standard. It is simpler, more powerful, and avoids the clearfix problem entirely.

/* === CONTENT WRAPPER (flexbox approach) === */
.content-wrapper {
  display: flex;               /* activates flexbox */
  flex-direction: row;         /* children go in a row (left to right) */
  gap: 20px;                   /* 20px gap between main content and sidebar */
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
}

.main-content {
  flex: 3;                     /* takes 3 parts of available space */
  background-color: #ffffff;
  padding: 25px;
  min-height: 400px;
}

.sidebar {
  flex: 1;                     /* takes 1 part of available space */
  background-color: #ffffff;
  padding: 20px;
  min-height: 400px;
}

Understanding flex: 3 and flex: 1:

• These are flex grow values. They define the ratio of space each child gets.
• flex: 3 means: give this element 3 units of the available space.
• flex: 1 means: give this element 1 unit of the available space.
• Together: 3 + 1 = 4 total units. Main content gets 3/4 (75%) of the space. Sidebar gets 1/4 (25%).
• gap: 20px automatically creates a 20px space between the children.

💡 Analogy: Imagine a pizza cut into 4 slices. With flex: 3 and flex: 1, main content gets 3 slices and the sidebar gets 1 slice. The pizza is shared in a 3:1 ratio.

Approach C · Using CSS Grid (Most Powerful Method)

/* === CONTENT WRAPPER (CSS Grid approach) === */
.content-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;  /* two columns: 3 parts and 1 part */
  gap: 20px;
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
}

.main-content {
  background-color: #ffffff;
  padding: 25px;
  min-height: 400px;
}

.sidebar {
  background-color: #ffffff;
  padding: 20px;
  min-height: 400px;
}

Understanding grid-template-columns: 3fr 1fr:

• fr stands for fraction unit · it divides the available space into fractions.
• 3fr 1fr creates two columns: the first gets 3 fractions, the second gets 1 fraction · a 75%/25% split.
• The first child (.main-content) automatically goes in column 1. The second child (.sidebar) automatically goes in column 2.
• gap: 20px creates space between the grid cells.

For the rest of this lesson we will use the Flexbox approach as it is the most widely used modern method.

Step 5 · Styling the Main Content Area

/* === MAIN CONTENT === */
.main-content {
  flex: 3;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.main-content h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 3px solid #3498db;   /* a coloured underline */
  padding-bottom: 10px;
}

.main-content p {
  color: #555555;
  margin-bottom: 15px;
  line-height: 1.7;
}

Expected output: A white card with a light drop shadow. Inside it, a heading with a blue underline, followed by readable paragraphs with comfortable spacing.

Understanding each new property:

• border-radius: 6px · rounds the corners of the white card slightly.
• box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) · adds a subtle shadow beneath the card.

- 0 = no horizontal shadow offset - 2px = 2px downward vertical offset - 6px = blur radius (how soft the shadow is) - rgba(0, 0, 0, 0.08) = very faint black (8% opacity)

• border-bottom: 3px solid #3498db · draws a 3px thick solid blue line only at the bottom of the <h2>.

Step 6 · Styling the Sidebar

/* === SIDEBAR === */
.sidebar {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  align-self: flex-start;     /* prevents sidebar from stretching to match content height */
}

.sidebar h3 {
  font-size: 1.1rem;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 8px;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  margin-bottom: 8px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #3498db;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.sidebar ul li a:hover {
  color: #2c3e50;
}

Expected output: A narrower white card on the right. Inside, a bold "CATEGORIES" heading (in small caps style) and a list of blue links that darken on hover.

Understanding new properties:

• align-self: flex-start · in a flexbox row, by default all children stretch to the same height as the tallest sibling. align-self: flex-start tells the sidebar to only be as tall as its own content, not stretch to match the main content column.
• text-transform: uppercase · converts the heading text to ALL CAPITALS in CSS (the HTML text stays unchanged).
• letter-spacing: 1px · adds 1px of space between each letter, creating a spread-out uppercase look.

Step 7 · The Footer

/* === FOOTER === */
.site-footer {
  background-color: #2c3e50;
  color: #bdc3c7;
  text-align: center;
  padding: 25px 20px;
  margin-top: 20px;
  font-size: 0.9rem;
}

.site-footer a {
  color: #3498db;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

Expected output: A dark footer at the bottom of the page matching the header's colour scheme, with centred copyright text in a muted grey colour.

Here is the full style.css with all zones styled, using the Flexbox approach:

/* ============================================================
   COMPLETE WEBSITE LAYOUT — style.css
   ============================================================ */

/* === RESET === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === BODY === */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  background-color: #f0f0f0;
}

/* === HEADER === */
.site-header {
  background-color: #2c3e50;
  color: #ffffff;
  padding: 30px 20px;
  text-align: center;
}

.site-header h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.site-header p {
  font-size: 1rem;
  color: #bdc3c7;
}

/* === NAVBAR === */
.navbar {
  background-color: #34495e;
}

.navbar ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.navbar ul li a {
  display: block;
  color: #ecf0f1;
  text-decoration: none;
  padding: 14px 20px;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.navbar ul li a:hover {
  background-color: #2c3e50;
  color: #ffffff;
}

/* === CONTENT WRAPPER (Flexbox) === */
.content-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
}

/* === MAIN CONTENT === */
.main-content {
  flex: 3;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.main-content h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 3px solid #3498db;
  padding-bottom: 10px;
}

.main-content p {
  color: #555555;
  margin-bottom: 15px;
  line-height: 1.7;
}

/* === SIDEBAR === */
.sidebar {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  align-self: flex-start;
}

.sidebar h3 {
  font-size: 1.1rem;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 8px;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  margin-bottom: 8px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #3498db;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.sidebar ul li a:hover {
  color: #2c3e50;
}

/* === FOOTER === */
.site-footer {
  background-color: #2c3e50;
  color: #bdc3c7;
  text-align: center;
  padding: 25px 20px;
  margin-top: 20px;
  font-size: 0.9rem;
}

.site-footer a {
  color: #3498db;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

Full expected output: A complete webpage with a dark blue header, dark horizontal navigation bar with hoverable links, two-column content area (70% main / 25% sidebar), and a matching dark footer. The content area is centred on the page with a max-width, sitting on a light grey background.

What Is Responsive Design?

A responsive layout adjusts itself to look good on different screen sizes. A layout that works on a wide desktop screen but looks broken on a narrow phone screen is not responsive.

On a phone, a two-column layout is too narrow · both columns become tiny slivers of content. The solution is to stack the columns vertically on small screens.

Using Media Queries

A media query is CSS code that only applies when a specific condition is true · in this case, when the screen is narrower than a certain width.

/* === RESPONSIVE LAYOUT === */

/* Tablets and smaller screens (768px wide or less) */
@media (max-width: 768px) {

  /* Stack columns vertically instead of side by side */
  .content-wrapper {
    flex-direction: column;    /* change from row to column */
  }

  /* Both sections now take full width */
  .main-content,
  .sidebar {
    flex: none;                /* remove flex ratio */
    width: 100%;               /* take full width */
  }

  /* Stack navbar links vertically */
  .navbar ul {
    flex-direction: column;    /* stack links vertically */
  }

  /* Make header text a bit smaller on phones */
  .site-header h1 {
    font-size: 1.8rem;
  }
}

/* Very small phones (480px wide or less) */
@media (max-width: 480px) {
  .site-header {
    padding: 20px 15px;
  }

  .main-content,
  .sidebar {
    padding: 15px;
  }

  .navbar ul li a {
    padding: 12px 15px;
  }
}

Expected output on a phone (screen ≤ 768px):

• The header still spans the full width with slightly smaller text.
• Navbar links stack vertically · each link on its own row.
• The main content area takes full width on top.
• The sidebar sits below it, also full width.
• No horizontal scrolling needed.

Expected output on a tablet/desktop (screen > 768px):

• The original two-column layout is shown · main content left, sidebar right.
• Navbar links are horizontal.

🤔 Thinking prompt: Why do we put the responsive rules AFTER the main CSS? Because CSS cascades · later rules override earlier ones when conditions are met. The mobile styles override the desktop styles when the screen is narrow.

The basic layout we built is just one pattern. Real websites use many variations. Let's look at the most common ones.

Variation 1 · No Sidebar (Full-Width Content)

Sometimes a page doesn't need a sidebar · for example, a blog post page that focuses entirely on reading.

/* No sidebar — content takes full width */
.content-wrapper-full {
  display: flex;
  max-width: 800px;       /* narrower max-width for better readability */
  margin: 30px auto;
  padding: 0 20px;
}

.main-content-full {
  flex: 1;                /* single column takes all available space */
  background-color: #ffffff;
  padding: 40px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

Expected output: A single centred white content card that is narrower than the viewport, with comfortable reading width.

Variation 2 · Left Sidebar Instead of Right

The sidebar can also appear on the LEFT side of the content. In Flexbox, you control order with the HTML order of elements · the first element in HTML is on the left.

Simply swap the HTML order:

<!-- Sidebar first in HTML = sidebar on the LEFT -->
<div class="content-wrapper">
  <aside class="sidebar">...</aside>    <!-- this comes first → LEFT column -->
  <main class="main-content">...</main> <!-- this comes second → RIGHT column -->
</div>

Or keep the HTML order and use CSS order:

/* Force sidebar to appear first (left) regardless of HTML order */
.sidebar {
  order: -1;    /* -1 means "go before everything else" */
}

Variation 3 · Three-Column Layout

For complex pages like dashboards, you might need three columns.

.three-column-wrapper {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.left-sidebar  { flex: 1; background: #fff; padding: 20px; }
.center-content { flex: 3; background: #fff; padding: 25px; }
.right-sidebar { flex: 1; background: #fff; padding: 20px; }

<div class="three-column-wrapper">
  <aside class="left-sidebar">Left nav</aside>
  <main class="center-content">Main content</main>
  <aside class="right-sidebar">Right widgets</aside>
</div>

Expected output: Three columns in a 1:3:1 ratio. The centre is the widest (main content), flanked by two equal narrow sidebars.

Variation 4 · Sticky Header (Fixed Navigation)

A sticky header stays visible at the top of the screen as the user scrolls down · very useful for navigation.

.navbar {
  background-color: #34495e;
  position: sticky;    /* stays in place as you scroll */
  top: 0;              /* stuck to the very top of the viewport */
  z-index: 100;        /* sits on top of all other page content */
}

Understanding these properties:

• position: sticky · the element behaves normally until it would scroll off screen, then it "sticks" at the specified offset.
• top: 0 · the sticking position is 0px from the top of the viewport.
• z-index: 100 · ensures the navbar visually floats above any page content that would scroll underneath it.

Variation 5 · Hero Section

A hero section is a large, visually striking banner at the top of a homepage · often with a background image, a large headline, and a call-to-action button.

<section class="hero">
  <div class="hero-content">
    <h1>Build Something Amazing</h1>
    <p>Start your coding journey today with our beginner-friendly courses.</p>
    <a href="#" class="hero-btn">Get Started</a>
  </div>
</section>

.hero {
  background-color: #1a252f;
  background-image: linear-gradient(135deg, #1a252f 0%, #2c3e50 50%, #3498db 100%);
  color: #ffffff;
  padding: 100px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2rem;
  color: #bdc3c7;
  max-width: 600px;
  margin: 0 auto 30px;
}

.hero-btn {
  display: inline-block;
  background-color: #3498db;
  color: #ffffff;
  padding: 14px 32px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.hero-btn:hover {
  background-color: #2980b9;
}

Expected output: A tall, dramatic banner with a dark gradient background transitioning from dark blue-grey to bright blue. Inside, a huge white headline, a short subtitle paragraph, and a bright blue button. Hovering the button darkens it slightly.

Understanding linear-gradient:

• linear-gradient(135deg, #1a252f, #2c3e50, #3498db) creates a smooth colour transition at a 135-degree diagonal angle.
• The first colour is in the top-left, the last is in the bottom-right.

Why max-width Matters

Without a max-width, content stretches to fill the entire browser window. On a very wide monitor (1920px+), text lines become so long they are exhausting to read · your eyes have to travel all the way across the screen. A max-width limits how wide content can grow.

/* Without max-width — content spreads across entire screen */
.content-wrapper {
  display: flex;
  padding: 0 20px;
}

/* With max-width — content has a comfortable maximum width */
.content-wrapper {
  display: flex;
  max-width: 1100px;   /* never wider than 1100px */
  margin: 0 auto;      /* centres the wrapper horizontally */
  padding: 0 20px;
}

Understanding margin: 0 auto:

• margin: 0 auto means: margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto.
• auto on both left and right tells the browser to distribute the remaining space equally · which centres the element.
• This only works when the element has a defined width or max-width.

💡 Analogy: Think of it like centering a book on a desk. The book (content) has a fixed width. Placing equal margins on both sides (equal amounts of desk space on left and right) centres the book on the desk.

Mistake 1 · Forgetting overflow: hidden on a Float Container

/* ❌ BAD: float children collapse the parent to zero height */
.content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  /* missing overflow: hidden */
}

.main-content { float: left; width: 70%; }
.sidebar { float: right; width: 28%; }

Result: The footer slides up and overlaps the content · the parent div has no height because its floated children are invisible to it.

Fix: Add overflow: hidden to the parent, or switch to Flexbox (which doesn't have this problem):

/* ✅ FIX 1: clearfix */
.content-wrapper { overflow: hidden; }

/* ✅ FIX 2: use flexbox instead */
.content-wrapper { display: flex; gap: 20px; }

Mistake 2 · Using width: 100% Without box-sizing: border-box

/* ❌ BAD: padding causes overflow */
.main-content {
  float: left;
  width: 70%;
  padding: 30px;   /* adds 60px (30+30) to the element's width — total > 70% */
}

Result: The element overflows beyond 70% because the padding is added outside the 70% width. This pushes the sidebar down to the next row.

Fix:

/* ✅ GOOD: with box-sizing, padding is included IN the 70% */
* {
  box-sizing: border-box;
}

.main-content {
  float: left;
  width: 70%;
  padding: 30px;    /* now safely contained within 70% */
}

Mistake 3 · Missing the Viewport Meta Tag

<!-- ❌ BAD: no viewport meta tag -->
<head>
  <title>My Site</title>
</head>

Result: On mobile phones, the browser renders the page as if it were a desktop (980px wide), then shrinks the whole page down. Your layout appears tiny and unreadable.

Fix:

<!-- ✅ GOOD: always include this -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
</head>

Mistake 4 · Not Using max-width on Content

/* ❌ BAD: on a 2500px wide monitor, lines stretch impossibly long */
.content-wrapper {
  display: flex;
  width: 100%;
  padding: 0 20px;
}

Fix:

/* ✅ GOOD: content has a sensible maximum width */
.content-wrapper {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

Mistake 5 · Setting the Sidebar to Exactly 30% With a Gap

/* ❌ BAD: 70% + 30% = 100%, leaving no room for the gap */
.main-content { width: 70%; }
.sidebar { width: 30%; }
/* A 20px gap makes the total width 100% + 20px = overflow */

Fix with Flexbox · use flex ratios instead of fixed percentages:

/* ✅ GOOD: flexbox handles gaps and proportions automatically */
.content-wrapper { display: flex; gap: 20px; }
.main-content { flex: 3; }   /* 3/4 of available space after gap */
.sidebar { flex: 1; }         /* 1/4 of available space after gap */

Mistake 6 · Forgetting Responsive Styles

/* ❌ BAD: two-column layout breaks on mobile */
.content-wrapper {
  display: flex;
}
/* no media query for small screens */

Result: On a 375px phone, the main content column is about 280px wide and the sidebar is about 95px wide · both too narrow to be readable.

Fix:

/* ✅ GOOD: add a media query */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;  /* stack vertically */
  }
}