
  Before writing CSS, learn how to **think layout**.
  
  ## Website structure idea
  Most pages have:
  - header
  - content
  - sidebar
  - footer
  
  ## Simple layout HTML
  ```html
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
  ```
  
  ## Basic CSS
  ```css
  header, footer {
    padding: 16px;
    background: #eee;
  }
  
  main {
    padding: 20px;
  }
  ```
  
  ## UI imagination
  Looks like a real website skeleton.
  
  ## Real world advice
  - Do not jump to flex/grid too early
  - Understand blocks first
  
  ## Remember
  - Layout starts with thinking, not code
  - Simple structure = easier CSS
  

Learn how to think about layout before writing CSS: rows, columns, spacing, and how real websites are structured.

CSS Basic Layout Thinking

Learn CSS for styling modern websites: layouts, flexbox, grid, responsive design, and animations.

CSS Basic Layout Thinking

More on CSS

CSS Introduction

CSS How It Works

CSS Ways to Add