CSS media queries are the conditional logic of styling: they let you apply a block of CSS only when the browsing context matches certain conditions, such as a minimum viewport width, a landscape orientation, or a device that supports hover. Without them, a single stylesheet must serve every screen identically; with them, the same HTML can present a single-column mobile layout, a two-column tablet layout, and a wide desktop layout.
In this module, media queries are the third pillar of responsive design, working alongside fluid grids and flexible images. Fluid layouts handle continuous scaling between sizes; media queries handle the moments where the layout needs to change shape entirely — collapsing a navigation bar, stacking cards, or hiding a sidebar. You will also look at where media queries live (inside an external stylesheet, in a linked file, or via the media attribute) and how a mobile-first approach using min-width differs from a desktop-first approach using max-width.
As you watch, pay attention to four things: the exact syntax of the @media rule and its media type and feature conditions; how breakpoint values are chosen and whether the instructor argues from content or from device names; how the cascade determines which rule wins when two media queries both match; and how each demo is tested, usually with browser developer tools and device emulation. Try re-typing the examples yourself and resizing the window rather than only watching.
A focused tutorial from the Sigma Web Development course that introduces media queries and walks through writing @media rules to change styles at different screen widths. Expect coverage of the basic syntax, min-width and max-width conditions, and a live demo of a layout adapting as the viewport is resized. It is positioned within a larger structured CSS sequence, so terminology is introduced step by step.
CodeWithHarry is a widely followed, well-reviewed web development channel, and this lesson sits in a sequenced course, which makes it a reliable, concise introduction to the What Are Media Queries and Basic Syntax subtopics.
A longer, project-oriented lesson that explains media queries in the context of building a responsive website rather than in isolation. The extra runtime suggests room for multiple breakpoints, discussion of how a page restructures at each one, and hands-on demonstration of testing responsiveness in the browser. It frames media queries as the tool that ties a responsive layout together.
Its applied, build-along format reinforces the width breakpoint subtopic and shows how media queries interact with the rest of a responsive stylesheet, which is exactly the integration this module asks for.
A compact ten-minute overview aimed at getting started with media queries for responsive design. Its brevity suggests a tight walkthrough of the rule syntax and a few practical examples of targeting different screen sizes. Useful as a quick first pass or as review before you attempt the module exercises.
The short, kickstart framing makes it a good warm-up or refresher that complements the two longer tutorials without repeating them at length.
Together these videos concentrate on MO1 and MO4: they establish media queries as one of the three pillars of responsive design and give you repeated, hands-on practice writing @media rules with width conditions, including the min-width pattern that underpins mobile-first CSS. The project-based tutorial also shows media queries operating alongside fluid layout and scaling media, supporting MO2 and MO3 in context. For MO5, use the videos as evidence rather than as the final answer: compare how each instructor selects breakpoints and whether they build up from small screens or scale down from desktop, then weigh those choices against the performance and maintainability criteria discussed in the module readings.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.