Responsive design, performance and modern CSS

Mobile first

Write base styles for small screens, then add min-width media queries for bigger ones. It produces simpler CSS because phones get the least code.

.layout { display: grid; gap: 16px; }
@media (min-width: 768px) { .layout { grid-template-columns: 2fr 1fr; } }
@media (min-width: 1200px) { .layout { grid-template-columns: 240px 2fr 1fr; } }

Common breakpoints: 640px (large phones), 768px (tablets), 1024px (laptops), 1280px (desktops). Choose breakpoints where your content breaks, not for devices.

Responsive images and text

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Students at a hiring event" width="800" height="450" loading="lazy" />

Setting width and height lets the browser reserve space and avoids layout shift (CLS). Fluid type with clamp(): font-size: clamp(1.5rem, 4vw, 2.5rem);.

Modern CSS worth knowing

• Custom properties: --brand: #0b6e4f; color: var(--brand); and re-defined for dark mode.
• prefers-color-scheme: dark and prefers-reduced-motion media queries.
• Container queries: style a component by its own width, not the viewport's (@container (min-width: 400px)).
• :has(): style a parent based on its children (.card:has(img) { padding-top: 0 }).
• aspect-ratio: 16 / 9 for video and image boxes.

Animations that stay smooth

Animate transform and opacity only; they don't trigger layout. Animating width, height, top or left forces layout on every frame.

.toast { transition: transform 200ms ease, opacity 200ms ease; }
.toast.hidden { transform: translateY(20px); opacity: 0; }

CSS frameworks

• Tailwind CSS: utility classes in markup (flex items-center gap-4); fast to build, consistent spacing, tiny production CSS.
• Bootstrap: ready-made components and a grid; fast for admin panels.
• CSS Modules / styled-components: scoped styles per component in React apps.

Interviewers often ask for your opinion: say what each is good at instead of declaring a winner.

Web performance basics (Core Web Vitals)

• LCP (largest contentful paint): main content shows fast. Optimise images, preload the hero, use a CDN.
• CLS (cumulative layout shift): nothing jumps. Reserve space for images, ads and fonts.
• INP (interaction to next paint): the page responds quickly. Keep JavaScript light; avoid long tasks.

Check yourself

• What does "mobile first" mean in CSS?
• Which properties are cheap to animate and why?
• What problem do container queries solve that media queries can't?