Learning Responsive Web Design

Learning Responsive Web Design

by Jennifer Kyrnin
Released March 2017
Publisher(s): Pearson
ISBN: 0134193725

Watch 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

A quick, easy-to-understand video course for beginners on the fundamentals of responsive web design

Description

Learning Responsive Web Design LiveLessons provides web designers and developers with a practical introduction to responsive web design, which is used to create websites that work across many different types of devices from small screen cell phones to large- and multi-screen monitors.

Jennifer Kyrnin is a working web designer and has been teaching and writing about web design, HTML, and web development since 1995. She is a freelance web designer and author, writing regularly for several websites on the Internet. She also teaches and writes about web design, HTML, CSS, JavaScript, PHP, Bootstrap, and XML and is the author of five books related to the Internet and web design.

Skill Level
  • Beginner
  • Intermediate
You Will Learn How To:
  • Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript
  • Use progressive enhancement to consistently provide the right content while making the most of each device and browser
  • Establish breakpoints and write CSS media queries to respond appropriately to each user agent
  • Choose the right layout and wireframing approach for your site
  • Use web fonts to control typography and choose sizes that look good on any device
  • Master three ways to make tables responsive
  • Build responsive forms using the latest HTML5 tags and attributes
  • Implement responsive navigation patterns that users understand intuitively
  • Test for responsiveness and performance
  • Use Responsive Design + Server Side Components (RESS) to optimize performance
Who Should Take This Course
  • Web designers and developers who want to quickly get up to speed with the fundamentals of responsive web design
Course Requirements
  • Basic understanding of HTML and CSS

Table of Contents

About LiveLessons

LiveLessons Video Training series publishes hundreds of hands-on, expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. This professional and personal technology video series features world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, IBM Press, Pearson IT Certification, Prentice Hall, Sams, and Que. Topics include: IT Certification, Programming, Web Development, Mobile Development, Home and Office Technologies, Business and Management, and more. View all LiveLessons on InformIT at http://www.informit.com/imprint/series_detail.aspx?ser=2185116

Table of contents

  1. Introduction
    1. Learning Responsive Web Design: Introduction 00:02:21
  2. Lesson 1: Introducing Responsive Web Design
    1. Learning objectives 00:00:48
    2. 1.1 Learn What Responsive Web Design Is 00:01:58
    3. 1.2 Learn the History of Responsive Web Design or RWD 00:04:11
    4. 1.3 Understand the Alternatives to RWD 00:05:02
    5. 1.4 Why RWD is the Best Choice for Modern Web Development 00:02:57
    6. 1.5 Understand How RWD Helps Design for Different Situations 00:04:05
    7. Summary 00:00:35
  3. Lesson 2: HTML, CSS, and JavaScript for RWD
    1. Learning objectives 00:00:28
    2. 2.1 Understand the Basics of HTML 00:05:20
    3. 2.2 Review JavaScript Basics 00:08:07
    4. 2.3 Get Started with Cascading Style Sheets 00:28:04
    5. Summary 00:00:33
  4. Lesson 3: CSS Media Queries
    1. Learning objectives 00:00:30
    2. 3.1 Get Started With Media Queries 00:08:40
    3. 3.2 How to Write Media Query Expressions 00:06:13
    4. Summary 00:00:21
  5. Lesson 4: Breakpoints
    1. Learning objectives 00:00:42
    2. 4.1 Understand BreakPoints 00:01:10
    3. 4.2 How to Define Breakpoints 00:07:17
    4. 4.3 Optimal Breakpoints 00:02:50
    5. 4.4 My Favorite Breakpoints 00:01:09
    6. Summary 00:00:17
  6. Lesson 5: Creating Responsive Layouts
    1. Learning objectives 00:00:42
    2. 5.1 Understand Responsive Web Layouts 00:01:04
    3. 5.2 Types of Layouts 00:08:40
    4. 5.3 Using Columns in Responsive Layouts 00:10:27
    5. 5.4 Using Tables for Web Layouts—Pros and Cons 00:03:22
    6. Summary 00:00:24
  7. Lesson 6: Responsive Navigation
    1. Learning objectives 00:00:40
    2. 6.1 The Importance of Responsive Navigation 00:02:29
    3. 6.2 How to Make Mobile-Friendly Navigation 00:03:41
    4. 6.3 Pros and Cons of Standard RWD Navigation Patterns 00:17:00
    5. Summary 00:00:24
  8. Lesson 7: Responsive Images
    1. Learning objectives 00:00:56
    2. 7.1 How to Make Images Responsive 00:10:27
    3. 7.2 Keep the Download Speeds Fast 00:03:49
    4. 7.3 Use Retina-Ready Images 00:10:35
    5. Summary 00:00:26
  9. Lesson 8: Responsive Video
    1. Learning objectives 00:00:34
    2. 8.1 How to Make Video Responsive 00:06:40
    3. 8.2 Make YouTube Videos Responsive 00:04:51
    4. 8.3 Make a Video Background 00:05:40
    5. Summary 00:00:24
  10. Lesson 9: Responsive Web Tables
    1. Learning objectives 00:00:47
    2. 9.1 Problems With Tables on Small Devices 00:01:47
    3. 9.2 How to Make Tables Responsive 00:16:12
    4. 9.3 Layout Tables Are Valid 00:02:13
    5. Summary 00:00:26
  11. Lesson 10: Responsive Web Forms
    1. Learning objectives 00:00:53
    2. 10.1 Use Modern HTML 00:09:22
    3. 10.2 Make Web Forms Usable 00:08:41
    4. 10.3 Build a Responsive Form 00:01:07
    5. Summary 00:00:18
  12. Lesson 11: Testing RWD Sites
    1. Learning objectives 00:00:36
    2. 11.1 Test in Your Favorite Browser, but Don't Stop There 00:04:51
    3. 11.2 How to Use Google Developer Tools for Testing 00:05:35
    4. 11.3 Use Devices, if You Can 00:04:48
    5. 11.4 How to Test When You Don't Have the Devices 00:02:06
    6. Summary 00:00:25
  13. Lesson 12: Best Practices for RWD
    1. Learning objectives 00:00:48
    2. 12.1 Make the Best Site You Can for the Most People 00:08:18
    3. 12.2 Avoid the Common RWD Problems and Pitfalls 00:15:59
    4. Summary 00:00:22
  14. Summary
    1. Learning Responsive Web Design: Summary 00:01:17

Product information

  • Title: Learning Responsive Web Design
  • Author(s): Jennifer Kyrnin
  • Release date: March 2017
  • Publisher(s): Pearson
  • ISBN: 0134193725