Day 1: Mobile-First & Flexible Media

Daily Objective

Adopt the mobile-first development philosophy and build fluid, flexible images and media.

1. Mobile-First Principles

Design for mobile screens first (simplest layout), then layer on complexity for larger screens using min-width media queries.

2. Flexible Images

Images must never overflow their parent container:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover; /* Prevents distortion while cropping neatly */
  border-radius: 50%;
}

Daily Hands-on Practice (70%)

1. Add a global responsive image reset to your stylesheet.
2. Build an avatar component using object-fit: cover.