Responsive Web Design Video How-To

Skip the reading and learn by watching!

Short, clear videos show you visually how to design responsive web pages.

Responsive Web Design Video How-To is a series of short, 2- to 5-minute how-to videos that walk the learner through a specific task or technique related to designing websites that work equally well on smartphones, tablets, or even multi-screen monitors.

Adapted from the book Sams Teach Yourself Responsive Web Design in 24 Hours, each video is self-contained and focused entirely on one particular task. The learner can either go through the videos in sequence or jump into a particular task, see how something is done, and then jump out again.

Skill Level

• Beginner
• Intermediate

Just a couple minutes is all you need to learn how to...

• Demonstrate How Responsive Design Looks
• Identify Graceful Degradation
• Use Progressive Enhancement
• Get Started with HTML5
• Use SPAN and DIV Elements
• Adjust the Fonts on a Web Page
• Create a Two-Column Layout
• Use Unobtrusive JavaScript
• Convert a Mouseover Script to Unobtrusive JavaScript
• Find Mobile Traffic in Google Analytics
• Find the Pages Popular on Mobile in Google Analytics
• Design for Mobile First
• Control How Pages Look as a Reader
• Use the Print Media Type to Create a Print Style Sheet
• Write Three Different Media Queries
• Build a Simple CSS File with Two Breakpoints
• Apply Best Practices for Breakpoints
• Give a Page a Fixed Width Layout
• Change the Page to a Fluid Layout
• Avoid Navigation Failures in Responsive Designs
• Add a Select Menu as a Navigation Option for Small Screens
• Use Media Queries to Load Web Fonts
• Use Rems for Font Sizes
• Create Quick and Dirty Responsive Images
• Convert an Image to a Retina-Ready Image
• Build a Video Background with HTML5 and CSS
• Embed a YouTube Video in Your Web Page
• Rearrange a Large Table in Small Devices
• Create a Scrolling Table
• Validate Forms with HTML
• Create a Data List to Make a Text Field Easier to Use
• Test Your Design Using a Browser
• Use the Viewport Meta Tag
• Create a Sprites File
• Write a Cache Manifest for Offline Viewing
• Test a Page in the Firefox Responsive Design View Tool
• Use RWD Editors
• Change the User Agent in Safari
• Customize and Install Modernizr
• Test WURFL with the Built-in Demo
• Display a Message to Mobile Customers Using WURFL
• Use Inspiring RWD Part 1
• Use Inspiring RWD Part 2

Who Should Use These Videos

• Anyone who wants to learn how to design responsive websites
• Casual web designers and developers at all levels