Responsive Web Design Fundamentals: Layouts That Work on Any Screen

About this webinar

What this webinar actually covers

Responsive web design is not a single technique — it is a combination of decisions about grids, breakpoints, typography scaling, and image handling that collectively determine how a page behaves across screen sizes. This webinar focuses on the mechanics behind those decisions, so you leave with a framework for thinking through layout problems, not just a handful of copy-paste code snippets.

Who tends to get the most out of this session

This is designed for people who have built a few static pages and know basic HTML and CSS, but run into trouble when their layouts break on mobile. If you have ever pushed a site live and then checked it on a phone only to find text overflowing or buttons too small to tap, this is exactly where we start. The session does not assume any framework knowledge — we work with plain CSS throughout.

The practical side of the curriculum

Each concept is demonstrated with a live browser example, and the code is shared afterward so you can revisit it at your own pace. We look at media queries in depth, including the logic for choosing breakpoints based on content rather than device names. Flexbox and CSS Grid are both introduced as layout tools, with side-by-side comparisons showing when each one makes sense for a given problem.

Fluid images and performance tradeoffs

A section of the webinar is devoted to images specifically, since they are often the biggest source of layout problems and slow load times on mobile. We cover the srcset attribute, the picture element, and simple CSS rules that prevent images from breaking their containers — along with a brief look at how image dimensions affect Core Web Vitals scores.