Responsive Web Design in 24 Hours, Sams Teach Yourself

Learn responsive web design (RWD) with HTML5, CSS3 & JavaScript in just 24 one-hour lessons

Sams Teach Yourself Responsive Web Design in 24 Hours helps you create websites that work equally well on everything from smartphones and tablets to multi-screen monitors.

This book's straightforward, step-by-step approach shows how to use HTML, CSS, and JavaScript to build the responsive sites today's users and clients want. In just a few hours, you'll be building layouts, sites, forms, and web apps that automatically adapt to virtually any device. Every lesson builds on what you've already learned, giving you a rock-solid foundation for real-world success.

Learn how to

• Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript
• Use progressive enhancement to consistently provide the right content while making the most of each device and browser
• Establish breakpoints and write CSS media queries to respond appropriately to each user agent
• Choose the right layout and wireframing approach for your site
• Use web fonts to control typography and choose sizes that look good on any device
• Master three ways to make tables responsive
• Build responsive forms using the latest HTML5 tags and attributes
• Implement responsive navigation patterns that users understand intuitively
• Test for responsiveness and performance
• Use Responsive Design + Server Side Components (RESS) to optimize performance

CONTENTS AT A GLANCE

PART I: INTRODUCTION TO RESPONSIVE WEB DESIGN

**HOUR 1:**What Is Responsive Web Design?

History of Responsive Web Design

Why We Need Responsive Web Design

HOUR 2**: Alternatives to Responsive Web Design**

Table-Based Layouts

CSS Layouts

Detection Scripts

HOUR 3: The Growth of Mobile

Basic Cell Phones

Smartphones

Tablets

Retina Devices

Why Responsive Design Is Important

HOUR 4**: Progressive Enhancement**

What Is Progressive Enhancement?

How to Use Progressive Enhancement on a

Website

Benefits of Progressive Enhancement

HOUR 5**: HTML for Responsive Web Design**

Using HTML5

Clean Code

Don't Forget Semantic Elements

Validating Your HTML

HOUR 6: Basic CSS

How to Write CSS Rules

Embedded and External Style Sheets

Styling Fonts and Colors

Creating a Layout with CSS

Understanding Cascading and Specificity

**HOUR 7:**Unobtrusive JavaScript

What Is Unobtrusive JavaScript?

How to Implement Unobtrusive JavaScript

PART II: BUILDING A RESPONSIVE WEBSITE

HOUR 8: Planning a Responsive Website

Should You Make Your Website Responsive?

How to Plan for a Responsive Website

**HOUR 9:**Mobile First

Why Design for Mobile First?

What Makes a Site Mobile Friendly?

What About Mobile Only?

HOUR 1****0: CSS Media Queries

What Is a Media Query?

Media Query Expressions

HOUR 1****1: Breakpoints

What Is a Breakpoint?

How to Define Breakpoints in CSS

Optimal Breakpoints

HOUR 12: Layout

What Is Web Layout?

Types of Layouts

Columns in Layout

HOUR 13**: Navigation**

Why Responsive Navigation Is Important

What Makes Navigation Mobile Friendly?

Basic RWD Navigation Patterns

HOUR 14: