CSS Final Project Layout

      This final tutorial combines the most important CSS skills into one clean mini project.
      
      Goal:
      A simple page layout that looks good on desktop and mobile:
      - header
      - sidebar
      - content cards
      - footer
      
      ## Step 1: HTML structure
      ```html
      <div class="page">
        <header class="header">My Website</header>
      
        <aside class="sidebar">
          <a href="#">Dashboard</a>
          <a href="#">Reports</a>
          <a href="#">Settings</a>
        </aside>
      
        <main class="content">
          <div class="cards">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
          </div>
        </main>
      
        <footer class="footer">Footer</footer>
      </div>
      ```
      
      ## Step 2: Desktop layout using Grid
      ```css
      .page {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: 60px 1fr 50px;
        grid-template-areas:
          "header header"
          "sidebar content"
          "footer footer";
        min-height: 100vh;
      }
      
      .header { grid-area: header; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #ddd; }
      .sidebar { grid-area: sidebar; padding: 16px; border-right: 1px solid #ddd; display: flex; flex-direction: column; gap: 10px; }
      .content { grid-area: content; padding: 16px; }
      .footer { grid-area: footer; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid #ddd; }
      ```
      
      ## Step 3: Cards using Grid
      ```css
      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      
      .card {
        border: 1px solid #ddd;
        padding: 16px;
        transition: transform 0.2s ease;
      }
      
      .card:hover {
        transform: scale(1.02);
      }
      ```
      
      ## Step 4: Mobile layout (media query)
      ```css
      @media (max-width: 700px) {
        .page {
          grid-template-columns: 1fr;
          grid-template-rows: 60px auto 1fr 50px;
          grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
        }
      
        .cards {
          grid-template-columns: 1fr;
        }
      }
      ```
      
      ## UI imagination
      Desktop:
      - sidebar left
      - cards in 3 columns
      
      Mobile:
      - sidebar moves above content
      - cards become single column
      
      ## Graph: final structure
      ```mermaid
      flowchart TD
        A[Header] --> B[Sidebar + Content]
        B --> C[Cards Grid]
        C --> D[Footer]
      ```
      
      ## Course completion checklist
      You now understand:
      - Box Model and sizing
      - Flexbox alignment
      - Grid layouts + areas
      - Positioning + z-index
      - Responsive design + media queries
      - Transforms + transitions
      - Building real layouts without guessing
      
      ## Congratulations
      You completed the CSS course (50 tutorials).
      Next best step: start JavaScript and learn how to make pages interactive.