Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Overview

Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done. Responsive Web Design - from Concept to Complete Site will lead you, step by step, through the process of making your website responsive and appear at its best, no matter the device it is viewed on. Have you been writing two websites – one for mobile and one for larger displays? If so, this course will show you how to make your website responsive, in order to be fluid enough to adapt to any and all the different devices available. Basic knowledge of HTML and CSS will prove helpful for jumping into this video series.

Subscriber Reviews

Average Rating: 4.6 out of 5 rating Based on 5 Ratings

"Studio Manager" - by spxiong on 29-JAN-2014
Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
I found this video very helpful. I gave it 4 stars because I was unable to access the files to work along with the instructor.
Report as Inappropriate

"Really useful" - by Badrinath on 19-NOV-2013
Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
Lot of useful information and demonstration is good, especially for beginners of RWD
Report as Inappropriate

Browse Similar Topics

Top Level Categories:
Digital Media

Sub-Categories:
Digital Media > Web Design & Development

Table of Contents

Chapter/Selection

Time

Chapter 1: Getting Started with Responsive Web Design

Exploring Responsive Web Design (RWD)

Preview

00:01:57

Understanding the Use of RWD

Preview

00:02:11

Examples of Adaptive Layouts

Preview

00:01:57

Device Breakpoints

Preview

00:02:41

Pros/Cons of RWD

Preview

00:02:18

Course Overview

Preview

00:01:15

Chapter 2: Building a Fluid Layout

Fluid Width Layouts

Preview

00:02:03

Working with Percent Width Layouts

Preview

00:02:15

Examples of Fluid Layouts

Preview

00:01:22

Chapter 3: Media Queries

Media Queries

Preview

00:02:22

Media Query Code

Preview

00:01:40

Testing a Simple Media Query

Preview

00:02:02

Best Practices for Media Queries

Preview

00:02:50

Testing Media Queries on Actual Mobile Devices

Preview

00:01:59

Chapter 4: Building Our First Responsive Page

Using RWD Demo Files

Preview

00:02:15

Using Sample Files

Preview

00:01:56

Chapter 5: HTML5 Structure for Our Site

Overview of the HTML Structure for the Demo Site

Preview

00:01:29

CSS Resets and HTML5

Preview

00:04:31

HTML for Container, Header, and Navigation

Preview

00:04:51

HTML for a four Column Content Area

Preview

00:02:16

HTML for a two Column Footer

Preview

00:01:49

Chapter 6: CSS for Our Site

Using Demo CSS for our Site

Preview

00:02:42

Writing the CSS for the Navigation Bar and Logo

Preview

00:03:24

Building the CSS for Navigation and its Elements

Preview

00:03:15

Tweaking the Navigation Using the Inspect Element

Preview

00:02:37

Formatting the Header

Preview

00:02:08

Styling the Columns

Preview

00:02:49

Formatting Headings and Images in the Columns

Preview

00:03:16

Formatting the Footer

Preview

00:03:50

Tweaks and Fixes to the Body Layout

Preview

00:03:00

Chapter 7: Adding Media Queries to Our Fluid Layout

Planning for Media Queries

Preview

00:02:37

Tablet Media Query for the Body

Preview

00:02:32

Using Media Query for the Navigation Bar and Logo

Preview

00:03:18

Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet

Preview

00:02:43

Using Media Query for Columns to Reorient Horizontally

Preview

00:01:55

More on Column Queries and Footer

Preview

00:02:30

Final Tweaks for Phone-Sized Devices

Preview

00:02:42

Chapter 8; Advanced Features/Considerations for the Future

Advanced Features/Considerations

Preview

00:02:03

Dealing with Font Size EMs

Preview

00:03:10

Using Percent-Based Fonts and Dealing with Problems with EMs and Percent

Preview

00:02:06

Demo of EM and Percent-Based Font Sizes

Preview

00:02:10

Solution to Issues with REMs

Preview

00:03:12

Future Considerations: VM, VH, VMAX, and VMIN

Preview

00:03:09

Current Solutions to Text Size Issues and Responsive Background Images

Preview

00:02:58

Using Background Images, Adaptive Images, and Bandwidth

Preview

00:03:13

Responsive Grids

Preview

00:04:55

CSS Pre-processors

Preview

00:04:17