Teach Yourself Responsive Web Design in 24 Hours (Learning Lab)


Author: Jennifer Kyrnin
Publisher: Sams Publishing
ISBN: 978-0-13-390298-3
Copyright © 2015 by Pearson Education, Inc.

Contents at a Glance



Hour 1: What Is Responsive Web Design?

Hour 2: Alternatives to Responsive Web Design

Hour 3: The Growth of Mobile

Hour 4: Progressive Enhancement

Hour 5: HTML for Responsive Web Design

Hour 6: Basic CSS

Hour 7: Unobtrusive JavaScript


Hour 8: Planning a Responsive Website

Hour 9: Mobile First

Hour 10: CSS Media Queries

Hour 11: Breakpoints

Hour 12: Layout

Hour 13: Navigation

Hour 14: Responsive Fonts and Typography

Hour 15: Creating and Using Images in RWD

Hour 16: Videos and Other Media in RWD

Hour 17: Tables in Responsive Web Design

Hour 18: Responsive Web Forms

Hour 19: Testing Responsive Websites

Hour 20: Problems with Responsive Web Design


Hour 21: Tools for Creating Responsive Web Designs

Hour 22: Device and Feature Detection

Hour 23: Using RESS with RWD

Hour 24: RWD Best Practices


Responsive web design (RWD) is a way of thinking about web pages that allows designers to work on one website for all visitors but tailor the site to the device each visitor is viewing it on. More and more companies are requiring web designers to build their sites responsively, and knowing how to do it well will help web designers differentiate themselves in the industry.

Making Your Site “Every Device” Friendly

This Learning Lab covers more than just how and when to build CSS breakpoints to build a responsive site. Once you’ve finished this Learning Lab, you will understand all these ideas:

  • How the use of RWD got started and why web designers began using it instead of other techniques
  • What progressive enhancement is and how important it is to RWD
  • Basic HTML5, CSS3, and JavaScript to build a website framework that is easy to make responsive
  • How mobile devices affect responsive design and how they aren’t the whole story when it comes to creating responsive websites
  • The basics of building RWD, including media queries and breakpoints
  • How to make your layout, navigation, images, tables, fonts, videos, and forms responsive
  • How to test your designs even if you don’t have a lot of mobile devices
  • The common problems in RWD and how to alleviate them
  • How to use RESS and other tools and technologies to improve your designs
  • Best practices for using RWD and building a responsive site

How to Use This Learning Lab

This Learning Lab is divided into 24 lessons, called “hours.” Each lesson covers a specific topic related to building responsive web pages using responsive web design. Each lesson takes about an hour to complete.


Notes provide additional information about the topics that are discussed in the hour.


Tips share interesting facts or tidbits about the related content.


Cautions alert you to things that can cause problems for your web designs.

Organization of This Learning Lab

The Learning Lab is divided into three sections:

  • Part I, “Introduction to Responsive Design,” introduces you to RWD and explains the basic HTML, CSS, and JavaScript you need to know.
  • Part II, “Building a Responsive Website,” addresses specific aspects of RWD, such as navigation, images, and tables, and shows you how to make them responsive.
  • Part III, “Improving on Responsive Web Design,” introduces you to some tools and techniques you can use to improve your RWD and describes problems you may have as well as best practices in the field.

Conventions Used in This Learning Lab

Code samples are written in monospaced font within the text of the Learning Lab, while blocks of code appear separately, like this:

This is a block
Of code

Some code samples that are too long to display as one line in the Learning Lab use the Image symbol to indicate that these lines should be all on one line, like this:

<link rel="stylesheet" href="styles-320.css" media="only screen and (max-width:320px)">

This Learning Lab has three types of sidebars:

You can also use the Try It Yourself sections to practice what you’ve learned in the hour.

Nearly every hour has at least one step-by-step tutorial called “Try It Yourself” to help you use what you’ve learned.

Q&A, Quiz, and Exercises

Every hour ends with a short question-and-answer section that anticipates follow-up questions you may have after reading the hour. You can also take a short quiz on what you’ve learned as well as do some suggested exercises to help you get more out of what you learned and apply your new knowledge to your own web designs.

Where to Go to Learn More

This Learning Lab has a companion website at, where you can go to see the examples, view and download the source code, view and report errata about the Learning Lab, and continue to learn and ask questions about RWD. You can also find Jennifer Kyrnin online at, and she welcomes questions and comments.


To Mark and Jaryth. This was much easier because you were around. I love you.

About the Author

Jennifer Kyrnin has been teaching HTML, XML, and web design online since 1997. She has built and maintained websites of all sizes, from small, single-page brochure sites to large, million-page database-driven sites for international audiences. She lives with her husband and son and numerous animals on a small farm in Washington state.


I would like to thank all the people at Sams Publishing for the opportunity to write this Learning Lab and work with you. I would particularly like to thank Mark Taber and Seth Kerney for keeping me moving and the Learning Lab on track, as well as my fabulous technical editor, Jon Morin, and my amazing and tolerant copy editor Kitty Wilson for all the great suggestions and corrections. Any technical errors you find in the Learning Lab are mine alone; the editors probably tried to stop me.

I would also like to thank my family for putting up with me while I wrote the Learning Lab, including my brother Brendan Kirby, who was instrumental in helping me get my thoughts together on one tough section, and the members of the Woodinville Writers Group, who were very kind in letting me interrupt their fiction stories with some cold hard HTML.

We Want to Hear from You!

As the reader of this Learning Lab, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

You can email or write to let us know what you did or didn’t like about this Learning Lab—as well as what we can do to make our Learning Labs stronger.

Please note that we cannot help you with technical problems related to the topic of this Learning Lab, and that due to the high volume of mail we receive, we might not be able to reply to every message.

When you write, please be sure to include this Learning Lab’s title, edition number, and author, as well as your name and contact information.


Mail:      Sams Publishing
              800 East 96th Street
              Indianapolis, IN 46240 USA

Reader Services

Visit our website and register this Learning Lab at for convenient access to any updates, downloads, or errata that might be available for this Learning Lab.