🌱 Beginner Level: Layout Fundamentals

Display Property

The display property controls how elements behave in the layout.

Common values:
display: block; - takes full width
display: inline; - flows with text
display: flex; - flexible layout
display: none; - hides element

Position Property

Controls how elements are positioned in the page.

position: static; - normal flow (default)
position: relative; - offset from normal
position: absolute; - relative to parent
position: fixed; - fixed to viewport

Flexbox Basics

Flexbox makes it easy to create flexible, responsive layouts.

Container properties:
display: flex; - enables flexbox
flex-direction: row; - horizontal (default)
justify-content: center; - align horizontally
align-items: center; - align vertically
gap: 10px; - spacing between items

Item 1

Item 2

Item 3

↑ This row uses flexbox with gap spacing

Common Styling Patterns

Rounded corners:
border-radius: 8px;

Drop shadows:
box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Gradients:
background: linear-gradient(to bottom, blue, white);

Browser Dev Tools

Essential tools for working with CSS:

Right-click → Inspect Element
View and edit CSS in real-time
Test different properties and values
Debug layout issues

            📝 Notice the improvements on this page:
            Better font choices (Segoe UI)
Flexbox layout for navigation and cards
Gradients and shadows for depth
Hover effects on links
Rounded corners and modern spacing
Responsive card layout that wraps

        