**Theoretical Recap** Adaptive images are not simply about making images look good on all screens — they are about delivering the right image, at the right resolution, to the right device, at the right time. The two core HTML attributes you need to m...

When building responsive web pages, it is not enough to make layouts adapt to screen sizes. Images are typically the heaviest assets on a web page, often accounting for more than 60% of the total page weight. Sending a 2000-pixel-wide image to a smar...

THEORETICAL RECAP A responsive form adapts its layout and sizing to any screen width, while an accessible form ensures that all users — including those relying on screen readers, keyboard navigation, or assistive technologies — can interact with it w...

Responsive design and accessibility are two concepts that go hand in hand. You have already mastered the technical tools of responsive design: CSS Grid, Flexbox, and media queries. You know how to reorganize a layout from four columns to one column, ...

When building a responsive website, one of the first strategic decisions you must make is whether to start designing and coding for small screens (mobile-first) or for large screens (desktop-first). This choice profoundly influences how you write you...

**Theoretical Recap** Mobile-first is a CSS writing strategy where you define the base styles for the smallest screens first, then progressively enhance the layout for larger screens using min-width media queries. This is the opposite of desktop-firs...

## Project Overview You will design and build a fully responsive portfolio home page from scratch using HTML5 and CSS3, with a strong focus on CSS Grid and Flexbox. This mini-project is the culmination of your work on responsive design: grid vocabula...

**Theoretical Recap** CSS Grid is a two-dimensional layout system that lets you define rows and columns explicitly. When combined with media queries, it becomes a powerful tool for building truly responsive layouts. The core idea behind responsive Gr...

CSS Grid is a powerful layout system, but its real strength in professional web development emerges when it is combined with media queries. This combination allows you to build layouts that adapt intelligently to different screen sizes, from mobile p...

THEORETICAL RECAP CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously, making it the ideal tool for page-level layouts like a classic blog with a sidebar and a main content area. Unlike Flexbox, whic...