★★★★⋆ 30 Reviews Add a review

Responsive Web Design 2: RWD in Action

3h 7m
July 2013

What you'll learn

In this course, you’ll gain the skills and knowledge to build a wide range of Responsive Web Design components, including:

  • Responsive navigation
  • Fluid video
  • Responsive forms
  • Responsive tables
  • Fluid and adaptive images, using Retina images, Picture, and SRC attributes
  • Responsive background images

You’ll also expand your understanding of Responsive Web Design to retrofitting existing fixed-width websites.

  • Beginner
  • Closed captions available

Join SitePoint Premium for instant access

Tackle common problems associated with Responsive Design: navigation, forms, tables, videos & images

Responsive Web Design is now an essential skill for every web designer and developer. As a second step from the fundamentals covered on covered in Responsive Web Design: Key Concepts, this course will help you solve real world problems associated with building RWD websites: navigation, forms, tables, videos & images.

Learn the building blocks of RWD so that you can create beautiful websites that look fantastic on any device. We’ll look at the in’s and out’s of producing each component of a responsive web page and testing them across devices. At the end of the course, you’ll also learn to fully retrofit an existing fixed-width website.

This course covers the technicalities of building responsive sites and is intended for web developers. To make the most of this course, ensure you first understand everything covered in Responsive Web Design: Key Concepts.

Excellent course. Covers most responsive design techniques.
Vjacheslav Trushkin

Lesson 1: Visible page measurements
Free Introduction 3:20
Folder and files – part 1 10:56
Folder and files – part 2 6:19
The :before pseudo-element 5:43
Exercise – Creating visible page measurement 7:39
Lesson 2: Responsive navigation
Introduction 0:37
Responsive navigation patterns 12:15
Exercise part 1 – Setting up a simple responsive navigation 11:59
Exercise part 2 – Adding the JS component 9:11
Lesson 3: Fluid video
Introduction 0:56
Fluid video 5:26
Exercise – Styling fluid video 5:59
Lesson 4: Responsive forms
Introduction 0:43
Responsive forms 4:53
Exercise part 1 – Building responsive forms 13:06
Exercise part 2 – Wide screen layout 6:04
Lesson 5: Responsive tables
Introduction 0:52
Responsive tables 7:46
Exercise – Constructing a simple responsive table 14:51
Lesson 6: Responsive images
Introduction 0:42
Fluid images 10:11
Exercise – fluid images 7:37
Inline images 7:44
Lesson 7: Retrofit an existing site
Introduction 0:52
Retrofitting 10:12
Exercise part 1 – Retrofitting an existing site 12:48
Exercise part 2 – Adding responsive nav 7:57
Final notes 0:48

Russ Weakley

Russ is a world-renowned author, speaker and CSS expert. Russ has a detailed knowledge of Design and development. His expertise covers graphic design, interface design, site architecture and standards based development.


Our algorithm thinks you'll like

Exploring the Xcode Interface

Brett Romero

See the interface. Learn the shortcuts. Grow your productivity, Swiftly.

Introduction to Responsive Web Design

Russ Weakley

Responsive design without the hype.