Responsive Web Design

Responsive Web Design

Released May 2013
Publisher(s): Infinite Skills
ISBN: 9781771370929

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

In this Responsive Web Design training course, expert author Geoff Blake shows you how to create custom CSS and HTML so that your web site responds to differing screen sizes. With mobile and tablet web traffic increasing by leaps and bounds every day, all web designers should know how to create breakpoints and custom CSS layouts to adapt their designs to varying device resolutions.
You will learn how to setup your external style sheets for three different resolutions, and how to customize your layouts for each of those. This training video will teach you how to deal with navigation and graphics as well as text and other layout features, making them responsive. You will use the latest in CSS3 and HTML5 techniques to create a website design that will gracefully wrap and adapt to three different screen sizes. Extensive working files are included with this video tutorial, so you can work along with the author throughout each lesson.
When you have completed this computer based video training course, you will be capable of creating responsive, adaptive designs for your websites. You will understand how to create different external CSS files that are called depending on the resolution of the device that is requesting the web page. You will be confident in your ability to create a Responsive Web Site for todays mobile world!

Table of contents

  1. Getting Started
    1. Welcome 00:02:14
    2. Responsive Design And Targeted Resolutions 00:05:11
    3. A Look At What We Will Build 00:04:07
    4. Tools Of The Trade 00:03:13
  2. Using Dreamweaver CS6 For Responsive Design
    1. Getting Started With Fluid Grid Layouts 00:03:18
    2. Touring The Fluid Grid Layout View 00:03:26
    3. A Look At Dreamweavers Style Sheet 00:04:01
  3. Getting Set Up For Responsive Design
    1. Setting Up The External Style Sheet 00:03:56
    2. Connecting The Style Sheet And Testing 00:07:05
    3. Setting Up The Low Resolution Media Query 00:07:11
    4. Setting Up The Medium Resolution Media Query 00:04:37
    5. Testing The Medium Resolution Media Query 00:03:14
    6. Setting Up The High Resolution Media Query 00:03:22
    7. Testing The High Resolution Media Query 00:02:25
  4. Building The HTML Structure
    1. Building The Header Structure 00:03:45
    2. Building The Main Navigation Menu 00:06:50
    3. Setting The Body Structure 00:04:57
    4. Building The News Feed Area 00:06:32
    5. Setting The Footer Structure 00:02:30
  5. Wireframing The High Resolution Layout
    1. Getting Started With The High Resolution Layout 00:05:06
    2. Applying Formatting To The Master Container 00:06:08
    3. Setting Properties For The Header 00:03:35
    4. Formatting The Main Navigation Menu - Chapter 5 00:08:08
    5. Formatting The Slideshow - Chapter 5 00:03:22
    6. Setting Up The Content Boxes 00:04:56
    7. Applying Formatting To The News Feed - Chapter 5 00:02:29
    8. Finishing Off With The Footer - Chapter 5 00:03:00
  6. Wireframing The Medium Resolution Layout
    1. Setting Up The Medium Resolution Layout 00:05:38
    2. Formatting The Header 00:03:22
    3. Formatting The Navigation Menu 00:06:19
    4. Applying Formatting To The Slideshow 00:03:23
    5. Setting The Content Box Formatting 00:04:26
    6. Adjusting The News Feed 00:02:58
    7. Finalizing With The Footer 00:03:20
  7. Wireframing The Low Resolution Layout
    1. Getting Started With The Low Resolution Layout 00:05:43
    2. Formatting The Layout Header 00:03:00
    3. Adjusting The Main Navigation Menu 00:04:28
    4. Formatting The Content Boxes 00:04:55
    5. Applying Formatting To The News Feed - Chapter 7 00:03:08
    6. Finishing Up With The Footer - Chapter 7 00:04:33
  8. Initial High Resolution Formatting
    1. Fixing The Menu Spacing 00:06:09
    2. Getting Started With The High Resolution Formatting 00:02:33
    3. Applying Formatting To The Navigation Menu 00:04:25
    4. Formatting The Slideshow - Chapter 8 00:01:25
    5. Formatting The Content Box 00:03:51
    6. Applying Formatting To The News Feed Area 00:05:05
    7. Getting The Footer Text Formatted 00:03:41
  9. Initial Medium Resolution Formatting
    1. Getting Started With The Navigation Menu 00:05:11
    2. Formatting The Slideshow And Content Boxes 00:03:38
    3. Applying News Feed Formatting 00:04:57
    4. Finishing Up With The Footer - Chapter 9 00:01:24
  10. Initial Low Resolution Formatting
    1. Formatting The Main Navigation Menu - Chapter 10 00:03:34
    2. Getting The Content Boxes Under Control 00:02:38
    3. Formatting The News Feed Area 00:06:43
  11. Adding Graphics
    1. Getting Started With The Header 00:06:09
    2. Setting Up And Adjusting The Slideshow 00:08:02
    3. Adding A Background Graphic To The Content Boxes 00:02:59
    4. Adding Content Box Header Graphics 00:04:09
    5. Controlling The Content Box Graphics Via CSS 00:06:14
    6. Implementing The Slideshow - Part 1 00:05:13
    7. Implementing The Slideshow - Part 2 00:03:16
    8. Implementing The Slideshow - Part 3 00:01:41
  12. Wrapping Up
    1. Thanks For Watching 00:01:44
    2. About Geoff Blake 00:01:25

Product information

  • Title: Responsive Web Design
  • Author(s):
  • Release date: May 2013
  • Publisher(s): Infinite Skills
  • ISBN: 9781771370929