Wireframing Responsive Layouts | Stone River eLearning | eLearning

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Building Responsive Websites with HTML 5 & CSS3

1.Introduction

Welcome (0:48)
A Look At What We'll Build (1:35)

2.Responsive Design Fundamentals

Key Aspects Of Responsive Design (2:43)
Determining Device Resolutions To Target (4:20)
Wireframing Responsive Layouts (4:58)

3.The Basics: Multiple Style Sheets & Media Queries

The Concept Of Using Multiple CSS Files (10:49)
Media Queries & Multiple Style Sheets (8:57)
Building Media Queries Into A Single CSS File (7:38)
Using Media Query Expressions (5:04)

4.Building HTML Structure & CSS For All Screens

Setting Up The HTML & CSS Files (4:18)
Getting Started With The Header (7:36)
Inserting The Main Nav Menu (6:01)
Inserting The Search Field (6:55)
Problems With Applying Floats (4:19)
Integrating Google Fonts API (3:25)
Building The Hero Section Structure (4:25)
Formatting The Hero Section (9:04)
Inserting & Formatting A Call To Action Button (9:50)
Building The Features Section, Part One (5:46)
Building The Features Section, Part Two (4:56)
Inserting The Organize Section (8:18)
Building The Share Section (5:15)
Building The Call To Action Area (6:36)
Inserting And Formatting The Footer (3:47)
Finishing Touches For The High Resolution Layout (4:06)

5.Building The Tablet Layout

Setting Up The Medium Resolution CSS & Testing The Media Query (7:01)
Formatting The Medium Res Header (4:08)
Formatting The Medium Res Hero Section (6:08)
Formatting The Features Section (2:13)
Formatting The Organize And Share Sections (5:17)
Building The Get Section & Finishing Up The Medium Res Layout (2:53)

6.Building The Smartphone Layout

Setting Up The Low Res CSS & Testing The Media Query (4:40)
Formatting The Low Res Header (2:52)
Resolving Problems Caused By Floats (4:21)
Formatting The Low Res Hero Section (3:17)
Formatting The Features Section (1:46)
Formatting The Organize And Share Sections (2:58)
Building The Get Section & Finishing Up The Low Res Layout (3:06)

7.Advanced Techniques For Responsive Design

Disabling Device Smart Zoom (5:59)
Testing Your Responsive Layouts (4:27)
Setting Up Retina Display Graphics (6:21)

8.Wrapping Up

Where To Go From Here (0:28)

Wireframing Responsive Layouts

Complete and Continue