Author: Jennifer Kyrnin Publisher: Sams Publishing ISBN: 978-0-13-390298-3 Copyright © 2015 by Pearson Education, Inc.
PART I INTRODUCTION TO RESPONSIVE DESIGN
Hour 1: What Is Responsive Web Design?
Hour 2: Alternatives to Responsive Web Design
Hour 4: Progressive Enhancement
Hour 5: HTML for Responsive Web Design
Hour 6: Basic CSS
Hour 7: Unobtrusive JavaScript
PART II BUILDING A RESPONSIVE WEBSITE
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
PART III IMPROVING ON 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.
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:
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.
Note
Notes provide additional information about the topics that are discussed in the hour.
Tip
Tips share interesting facts or tidbits about the related content.
Caution
Cautions alert you to things that can cause problems for your web designs.
The Learning Lab is divided into three sections:
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 
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.
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.
This Learning Lab has a companion website at http://html5in24hours.com, 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 http://htmljenn.com, and she welcomes questions and comments.
To Mark and Jaryth. This was much easier because you were around. I love you.
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.
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.
Email: feedback@samspublishing.com
Mail: Sams Publishing
800 East 96th Street
Indianapolis, IN 46240 USA
Visit our website and register this Learning Lab at informit.com/register for convenient access to any updates, downloads, or errata that might be available for this Learning Lab.