Retrofit an Existing Site into Using Modern, Responsive Web Design Practices

 256 Reviews Add a review

Published July 2013

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.

Oh yeah, and the whole SitePoint library! Learn More.

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.

  • Closed captions available
Meet your instructor
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.

Lesson 1: Visible page measurements
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

Leave a Review