Responsive web design is the practice of building a single website that adapts gracefully to whatever screen it lands on — a phone held in one hand, a tablet in landscape, a laptop, or a large desktop monitor. Instead of maintaining separate "mobile" and "desktop" sites, you write one set of HTML and CSS that reflows, resizes, and reorganizes itself based on the available viewport. This introductory topic sets up the vocabulary and mental model you will use for the rest of the module: the multi-device landscape, the three core pillars (fluid grids, flexible images, and media queries), the mobile-first philosophy, and the viewport meta tag that makes any of it work on real phones.
Why does this matter in COP4813? Most of your users will reach your web applications from a mobile device first, and search engines, accessibility guidelines, and employers all assume responsive behavior as a baseline rather than a bonus. Understanding the "why" before the "how" will make the CSS you write later in the module — relative units, Flexbox and Grid, srcset, min-width media queries — feel like deliberate choices instead of memorized syntax.
As you watch the videos below, look for three things: how content is prioritized when space shrinks, how layouts are allowed to flex rather than being pinned to fixed pixel widths, and how designers think about breakpoints as content-driven decisions rather than device-specific ones. The first video is a hands-on tour of responsive layout mechanics in a visual tool; the two Apple sessions widen the lens to design thinking across an increasingly varied set of devices and form factors.
Part 7 of Webflow's ten-part introductory series, this video focuses specifically on responsive design: how content reflows and repositions across desktop, tablet, mobile landscape, and mobile portrait views. Based on its title and description, it should walk through adjusting a layout at different breakpoints and show visually what happens to elements as the canvas narrows. Expect a practical, demonstration-driven treatment of the same ideas you will later implement by hand in CSS.
Webflow is a mainstream web design platform and its 101 series is aimed squarely at beginners, which makes this a clear, accurate entry point for the "What Is Responsive Web Design?" and "Multi-Device Landscape" subtopics. Seeing breakpoints applied live in a visual editor helps you build intuition for fluid layouts before you write media queries from scratch.
This WWDC25 session from Apple Developer traces app design from an initial idea through to a finished interface, discussing how design choices make an experience feel clear, intuitive, and effortless. Based on its description, it should cover design foundations such as hierarchy, layout, and how visual structure supports functionality. While framed around apps rather than websites, the underlying reasoning about content priority and adaptable interfaces transfers directly to the web.
It comes straight from Apple's design team, a highly credible source on interface design, and it supports the "Why Responsive Design Matters" and mobile-first subtopics by showing how designers decide what matters most on a small, focused screen.
A recent Apple Developer video introducing the design principles behind iPhone Duo, Apple's folding iPhone, and the reimagined iOS that accompanies it. Judging from its description, it should explain how interfaces are expected to behave when a single device changes shape and screen dimensions mid-use. That makes it a concrete, current illustration of just how varied and unpredictable target screen sizes have become.
Folding devices are the sharpest possible argument for the multi-device landscape subtopic: a layout that assumes fixed dimensions simply breaks. This short, well-produced session gives you a real-world case for why fluid, adaptive layouts are the only sustainable strategy.
Together these videos build the conceptual foundation that the module outcomes depend on. The Webflow walkthrough demonstrates fluid layouts and breakpoint adjustments visually, previewing the core pillars named in MO1 and the proportional scaling you will build yourself in MO2 and MO3. The two Apple sessions reinforce the mobile-first reasoning behind MO4 — start with the constrained screen and progressively enhance — and give you concrete evidence for the trade-off discussion in MO5 by showing how many distinct form factors a single interface must now serve. None of these videos teaches the CSS syntax directly; they supply the "why" and the design judgment, while the module readings and labs supply the code.
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.
A fluid grid is the structural backbone of a responsive page. Instead of fixing column widths in pixels, you express them as proportions of their container — percentages, fr units, em and rem — so the layout reflows and rescales continuously as the viewport changes. The classic conversion formula (target divided by context equals result) lets you take an existing fixed-width comp and translate each column and gutter into a relative value that preserves the original proportions.
In this module, fluid grids are one of the three pillars of responsive design, alongside flexible images and media queries. Modern CSS gives you two purpose-built layout modules for the job: Flexbox, which distributes space along a single axis and is ideal for navigation bars, card rows, and component-level alignment, and CSS Grid, which defines rows and columns together for full two-dimensional page structure. You also need to understand how padding, borders, and gutters interact with percentage widths — which is why box-sizing: border-box and the gap property matter so much in fluid layouts.
As you watch the videos below, focus on three things: which unit or layout method the presenter chooses and why, how spacing between items is created (margins versus gap), and how the layout behaves when the browser window is resized. Try rebuilding each example yourself and then drag your browser edge or use DevTools device emulation to verify that nothing overflows, collapses, or breaks at in-between widths.
This tutorial compares Flexbox and CSS Grid as layout modules and, as the title indicates, focuses on deciding which one fits a given situation. Expect discussion of one-dimensional versus two-dimensional layout thinking, content-driven versus layout-driven sizing, and practical examples of where each module is the better tool. It is likely to also touch on using the two together, since Grid items can themselves be flex containers.
Envato Tuts+ is a well-established web development training publisher, and this video directly addresses the Flexbox and CSS Grid subtopics by framing them as complementary rather than competing tools — exactly the judgment you need when planning a fluid layout.
A compact, hands-on build in which CSS Grid is used to create a full-height, responsive page layout. It should demonstrate defining rows and columns with flexible units, making a layout fill the viewport height, and letting the grid adapt as the screen size changes. Watch for how track sizes and gaps are declared and how the structure holds together at different widths.
This gives you a short, practical demonstration of CSS Grid for two-dimensional layout and reinforces how fluid track sizing and gutters work in a real page rather than an isolated snippet.
An overview of the CSS display values used for layout — block, inline, none, flex, grid, inline-flex, and inline-grid — explained through Webflow's visual interface. It should clarify what each display mode does to an element and its children, and when designers reach for one over another. The visual presentation makes the differences between flow layout, flex layout, and grid layout easy to see.
Webflow's design team produces clear, well-illustrated layout content, and this video provides the conceptual foundation underneath Flexbox and Grid, helping you understand how display modes govern the box model and spacing behavior in fluid layouts.
Together these videos concentrate on MO2, the construction of fluid grid layouts that scale proportionally. The Webflow overview establishes the display and box-model vocabulary you need, the Envato Tuts+ comparison helps you choose correctly between Flexbox and CSS Grid for a given layout problem, and the CSS Grid walkthrough shows a responsive, full-height structure being built end to end. They also reinforce MO1 by illustrating the fluid-grid pillar of responsive design in practice, and the resizing demonstrations prepare you for testing and validating fluid behavior. Readings and lab work in this module cover the relative-unit conversion math, responsive images (MO3), and mobile-first breakpoint strategy (MO4, MO5).
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.
Flexible images and media are the second pillar of responsive web design. A fluid grid will happily shrink and stretch, but a fixed-width image dropped into that grid will overflow its container, trigger horizontal scrolling, or force the layout to break. The classic fix is deceptively simple — a CSS rule such as img { max-width: 100%; height: auto; } — but modern responsive media goes further, letting the browser choose among several image files based on screen width and pixel density, and letting you swap in a differently cropped image for narrow screens.
In this topic you will work through the max-width technique, the srcset and sizes attributes on the img element, the picture element with source and media for art direction, techniques for keeping embedded video and iframes fluid, and the CSS background-size property (cover, contain, and percentage values) for responsive background images. Running underneath all of it is a performance question: mobile users on slow connections should not download a 2000-pixel-wide hero image to display it at 400 pixels.
As you watch, pay attention to three things. First, the difference between resolution switching (same picture, different file sizes — srcset and sizes) and art direction (different crops or compositions — the picture element). Second, how the sizes attribute tells the browser how wide the image will be laid out, since the browser must decide which file to download before the CSS is fully applied. Third, note the actual markup and CSS syntax so you can reproduce it, not just recognize it.
Una Kravets of the Chrome Developer Relations team walks through responsive image techniques in the browser, covering both resolution switching and art direction. Based on the title and series description, expect coverage of srcset for serving appropriately sized files and the picture element for changing the image itself at different breakpoints, demonstrated live in browser developer tools.
It comes directly from Chrome for Developers, so the guidance reflects how browsers actually implement these features, and it is the one video here that explicitly addresses the art-direction subtopic alongside srcset.
A short, focused tutorial from LinkedIn Learning on writing image markup that adapts to the size of the screen. It is likely to start from the foundational idea of images that scale to fit their container and then introduce the responsive image attributes that let you supply multiple sources.
At six minutes it is a compact, well-produced introduction that is a good first watch before the more technical videos, and it connects the max-width scaling idea to responsive markup.
Austin Shelby focuses specifically on the img element's srcset and sizes attributes, showing how to supply multiple image files and let the browser load only the most appropriate one for the current viewport. The framing is explicitly about optimization — avoiding oversized downloads on small screens.
This is the most detailed treatment of srcset and sizes among the three, and its performance angle directly supports the performance considerations subtopic.
Together these videos target MO3 most directly: the LinkedIn Learning tutorial establishes images that scale within a fluid container, Austin Shelby's video drills into srcset and sizes for resolution switching, and the Chrome for Developers episode adds the picture element and art direction. Because all three repeatedly tie image behavior to viewport width and breakpoints, they also reinforce the flexible-images pillar described in MO1 and show how media behaves inside the fluid layouts you build for MO2. The performance framing in the srcset videos — downloading only the bytes a device needs — feeds directly into the mobile-first thinking and trade-off analysis called for in MO4 and MO5. Supplement the videos with the module readings for background-size and fluid video embeds, which the videos may not cover in depth.
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.
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.
Mobile-first design means starting your layout, content decisions, and CSS with the smallest screen in mind, then adding complexity as more space becomes available. Instead of building a full desktop page and stripping things away for phones, you begin with the essential content and a single-column layout, and use min-width media queries to progressively enhance the design for tablets and desktops. This forces hard choices early: what content truly matters, what can wait, and what is decoration.
This approach matters in COP4813 because most real-world traffic arrives on phones over variable networks. Mobile-first thinking tends to produce leaner CSS, faster initial loads, and a clearer content hierarchy, and it pairs naturally with progressive enhancement — delivering a working baseline experience to every browser and layering on features where they are supported. It also changes how you reason about breakpoints: you add rules as the viewport grows rather than overriding desktop assumptions downward.
As you watch the videos below, look for three things. First, how progressive enhancement is framed as a baseline-plus-layers strategy rather than an all-or-nothing feature choice. Second, how responsive utility classes or media queries express the idea of "small screen first, larger screens as overrides." Third, the professional mindset behind these choices — the habits and reasoning that lead developers to design for constraints first.
A conversation with front-end developer Ire Aderinokun about browser compatibility and progressive enhancement, and how these practices shape the experience users actually get. Expect discussion of building a functional baseline that works everywhere and then layering on enhancements for browsers and devices that support them, along with practical ways to reason about feature support. The talk format means the focus is on strategy and decision-making rather than line-by-line code.
Progressive enhancement is the conceptual backbone of mobile-first design, and this video addresses it directly from a recognized front-end expert, making it strong support for the "Progressive Enhancement Strategy" and "Shifting the Design Mindset" subtopics.
A hands-on tutorial showing how to make a page responsive using Tailwind CSS, covering the framework's responsive prefixes and breakpoint system. Because Tailwind's responsive utilities are mobile-first by default — unprefixed classes apply to all sizes and prefixed classes apply from a breakpoint upward — the video demonstrates mobile-first breakpoint logic in a concrete, visual way. Source code and follow-along examples are referenced in the description.
It gives you a practical, code-level look at how min-width-style breakpoints stack from small screens upward, reinforcing the "Mobile-First CSS and Media Queries" subtopic even if you write plain CSS rather than Tailwind.
An interview following Ire Aderinokun's path as a self-taught front-end developer, Google Developer Expert, and startup co-founder. The discussion is career- and mindset-oriented, touching on how she learned the craft and approaches front-end problems in contexts where device and network constraints are real considerations. It is context rather than a technical tutorial.
It supports the "Shifting the Design Mindset" subtopic by showing how an experienced practitioner thinks about users and constraints, which is the attitude change mobile-first design actually requires.
Together these videos target the conceptual and strategic ends of the module. The progressive enhancement discussion gives you the reasoning behind MO4 and MO5 — why building up from a small-screen baseline with min-width queries is more maintainable and performant than overriding a desktop design downward. The Tailwind responsive tutorial makes breakpoint behavior concrete, reinforcing MO1's media query pillar and showing MO4's mobile-first ordering in working code. The developer interview rounds this out with the professional mindset that underlies content prioritization and trade-off evaluation. You should still rely on the module readings and lab work for the hands-on specifics of fluid grids (MO2) and responsive images (MO3), which these videos touch on only indirectly.
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.
Every browser renders a page inside a viewport — the visible area available for your content. On desktop machines that area is usually close to the window size, but on phones and tablets browsers historically pretended to be much wider so that older desktop-only sites would still fit. The viewport meta tag is how you tell a mobile browser to stop pretending: it sets the layout width to the device width and establishes the initial zoom level. Without it, even carefully written responsive CSS will appear shrunken and unreadable on a phone.
Once the viewport is configured correctly, the next question is where your layout should change. CSS breakpoints are the specific viewport widths at which you introduce new rules through media queries — stacking columns, resizing type, hiding or revealing navigation. Breakpoints are best chosen by watching where your own content starts to break rather than by memorizing a list of device widths, since the range of real screen sizes is continuous and constantly shifting. You will also decide on a direction: mobile-first, which starts with a simple small-screen layout and adds complexity using min-width queries, or desktop-first, which starts wide and strips down using max-width queries.
As you watch the videos below, pay attention to three things: the exact syntax of a media query and where it sits in your stylesheet, how the order of rules determines which styles win when several queries match, and how the presenters decide that a layout needs a breakpoint at all. Afterward, practice testing your own pages by resizing the browser window and using your browser's device emulation tools at several widths, not just one or two.
A hands-on tutorial from CodeWithHarry's Sigma web development series covering CSS media queries. Expect the practical syntax — the @media rule, min-width and max-width conditions, combining conditions, and writing rules that take effect only at particular viewport ranges — demonstrated in a live stylesheet.
This is the code-level piece of the topic: it shows exactly how to write the media queries that implement your chosen breakpoints, which is the skill you will be assessed on.
This Webflow video focuses specifically on designing across breakpoints — how a single design is adjusted at different viewport widths so it looks and works well on each device class. It should illustrate the workflow of moving between screen sizes and deciding what needs to change at each one, including how changes at one breakpoint relate to the others.
It directly addresses the breakpoint strategy subtopics, including the question of which direction changes cascade, and gives a visual, design-oriented view that complements the code-focused tutorial.
A brief conceptual overview from Webflow introducing responsive design: the idea that a layout should adapt automatically whether someone is on a phone, tablet, or large display, without forcing the user to zoom or scroll sideways. Expect a high-level framing of why fixed-width layouts fail on modern devices and what adapting across screen sizes means in practice.
At under four minutes it sets up the vocabulary and motivation for viewport and breakpoint work before you touch code, which is useful context for the device-screen-sizes subtopic.
Together these videos cover the media query pillar of responsive design named in MO1 and give you the syntax you need for MO4, where min-width queries and a correctly configured viewport meta tag are combined into a mobile-first stylesheet. The Webflow breakpoint video supports MO5 by making the consequences of breakpoint direction and ordering visible, so you can reason about maintainability and content prioritization rather than guessing. The introductory responsive design video frames the fluid, continuous-scaling mindset behind MO2 and MO3, reminding you that breakpoints are adjustments to an already flexible layout, not a substitute for one.
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.