by Geoff Blake | Publisher: Ten Ton Books | Release Date: | ISBN: 00021BRWWHTML5CSS3

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. You'll begin with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions. Next comes the fun part: you'll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones. Geoff shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays. Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.

1. Introduction
   • Welcome 00:00:49
   • A Look At What We'll Build 00:01:36
2. Chapter 1: Responsive Design Fundamentals
   • Key Aspects of Responsive Design 00:02:43
   • Determining Device Resolutions to Target 00:04:20
   • Wireframing Responsive Layouts 00:04:59
3. Chapter 2: The Basics: Multiple Style Sheets And Media Queries
   • The Concept of Using Multiple CSS Files 00:10:50
   • Media Queries And Multiple Style Sheets 00:08:58
   • Building Media Queries into a Single CSS File 00:07:38
   • Using Media Query Expressions 00:05:05
4. Chapter 3: Building HTML Structure And CSS For All Screens
   • Setting Up The HTML And CSS Files 00:04:19
   • Getting Started with the Header 00:07:36
   • Inserting The Main Nav Menu 00:06:01
   • Inserting the Search Field 00:06:56
   • Problems with Applying Floats 00:04:19
   • Integrating Google Fonts API 00:03:25
   • Building the Hero Section Structure 00:04:26
   • Formatting the Hero Section 00:09:04
   • Inserting And Formatting A Call To Action Button 00:09:51
   • Building the Features Section, Part One 00:05:46
   • Building the Features Section, Part Two 00:04:57
   • Inserting the Organize Section 00:08:19
   • Building the Share Section 00:05:16
   • Building the Call To Action Area 00:06:36
   • Inserting and Formatting the Footer 00:03:48
   • Finishing Touches for the High Resolution Layout 00:04:07
5. Chapter 4: Building the Tablet Layout
   • Setting Up The Medium Resolution CSS And Testing The Media Query 00:07:02
   • Formatting the Medium Res Header 00:04:08
   • Formatting the Medium Res Hero Section 00:06:09
   • Formatting the Features Section 00:02:14
   • Formatting the Organize And Share Sections 00:05:17
   • Building the Get Section And Finishing Up the Medium Res Layout 00:02:53
6. Chapter 5: Building the Smartphone Layout
   • Setting Up The Low Res CSS And Testing The Media Query 00:04:41
   • Formatting the Low Res Header 00:02:53
   • Resolving Problems Caused By Floats 00:04:22
   • Formatting the Low Res Hero Section 00:03:18
   • Formatting the Features Section 00:01:46
   • Formatting the Organize And Share Sections 00:02:59
   • Building the Get Section And Finishing Up the Low Res Layout 00:03:07
7. Chapter 6: Advanced Techniques for Responsive Design
   • Disabling Device Smart Zoom 00:05:59
   • Testing Your Responsive Layouts 00:04:28
   • Setting Up Retina Display Graphics 00:06:22
8. Chapter 7: Wrapping Up
   • Where to Go From Here 00:02:49