Video description
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
Table of contents
-
Learn How To...
- Demonstrate How a Responsive Design Looks 00:03:01
- Identify Graceful Degradation 00:01:02
- Use Progressive Enhancement 00:02:11
- Get Started with HTML5 00:01:58
- Use SPAN and DIV Elements 00:01:48
- Adjust the Fonts on a Web Page 00:04:33
- Create a Two-Column Layout 00:04:28
- Use Unobtrusive JavaScript 00:04:44
- Convert a Mouseover Script to Unobtrusive JavaScript 00:06:46
- Find Mobile Traffic in Google Analytics 00:02:07
- Find the Pages Popular on Mobile in Google Analytics 00:02:23
- Design for Mobile First 00:02:40
- Control How Pages Look as a Reader 00:02:43
- Use the Print Media Type to Create a Print Style Sheet 00:03:18
- Write Three Different Media Queries 00:02:38
- Build a Simple CSS File with Two Breakpoints 00:01:57
- Apply Best Practices for Breakpoints 00:05:05
- Give a Page a Fixed Width Layout 00:02:26
- Change the Page to a Fluid Layout 00:02:00
- Avoid Navigation Failures in Responsive Designs 00:02:45
- Add a Select Menu as a Navigation Option for Small Screens 00:03:12
- Use Media Queries to Load Web Fonts 00:01:57
- Use Rems for Font Sizes 00:03:26
- Create Quick and Dirty Responsive Images 00:04:38
- Convert an Image to a Retina-Ready Image 00:03:14
- Build a Video Background with HTML5 and CSS 00:03:10
- Embed a YouTube Video in Your Web Page 00:02:29
- Rearrange a Large Table in Small Devices 00:04:18
- Create a Scrolling Table 00:03:30
- Validate Forms with HTML 00:04:04
- Create a Data List to Make a Text Field Easier to Use 00:03:51
- Test Your Design Using a Browser 00:03:27
- Use the Viewport Meta Tag 00:02:38
- Create a Sprites File 00:03:17
- Write a Cache Manifest for Offline Viewing 00:02:31
- Test a Page in the Firefox Responsive Design View Tool 00:02:48
- Use RWD Editors 00:07:22
- Change the User Agent in Safari 00:02:28
- Customize and Install Modernizr 00:03:11
- Test WURFL with the Built-in Demo 00:01:59
- Display a Message to Mobile Customers Using WURFL 00:02:14
- Use Inspiring RWD Part 1 00:06:46
- Use Inspiring RWD Part 2 00:11:45
Product information
- Title: Responsive Web Design Video How-To
- Author(s):
- Release date: November 2015
- Publisher(s): Pearson
- ISBN: 0672337738
You might also like
video
'Responsive Web Design: Learn by Video'
Responsive design isn’t merely another technique. It’s a way of building sites and applications that requires …
video
HTML5 and CSS3 Responsive Web Design
The Internet is going mobile and Web development methods are rapidly changing to adapt with the …
video
Learning Responsive Web Design
A quick, easy-to-understand video course for beginners on the fundamentals of responsive web design Description Learning …
video
Building a CSS Style Guide from Scratch
A well-designed CSS style guide offers more than just consistent patterns; it ensures web accessibility, better …