Output screenshots for desktop and mobile

The following screenshots represent a prototype/demo both in the wireframe and styled modes. You'll be able to see both the desktop (980-pixels wide) as well as mobile (320-pixels wide) outputs.

In the wireframe screenshots, the white outlines and the gray backgrounds in different tones are basically visual cues to help you understand where the boundaries of each element are without having to use a browser's DevTools.

The styled screenshots, on the other hand, show you what can be accomplished with a small does of CSS. Both the wireframe and styled pages use exactly the same markup.

The demos of the pages can be seen here:

Get Mastering Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.