HTML5 in 24 Hours

Responsive Web Design LiveLessons Outline

· 3 min read

Introduction

Lesson 1: Introducing Responsive Web Design

Learning Objectives

  • 1.1 Learn What Responsive Web Design Is
  • 1.2 Learn the History of Responsive Web Design or RWD
  • 1.3 Understand the Alternatives to RWD
  • 1.4 Why RWD is the Best Choice for Modern Web Development
  • 1.5 Understand How RWD Helps Design for Different Situations
    • 1.5.1 Put Mobile First
    • 1.5.2 Use Progressive Enhancement

Summary

Lesson 2: HTML, CSS, and JavaScript for RWD

Learning Objectives

  • 2.1 Understand the Basics of HTML
  • 2.2 Review JavaScript Basics
  • 2.3 Get Started with Cascading Style Sheets

Summary

Lesson 3: CSS Media Queries

Learning Objectives

  • 3.1 Get Started With Media Queries
    • 3.1.1 Understand Media Types
    • 3.1.2 Understand Media Features
  • 3.2 How to Write Media Query Expressions

Summary

Lesson 4: Breakpoints

Learning Objectives

  • 4.1 Understand Breakpoints
  • 4.2 How to Define Breakpoints
    • 4.2.1 Create Breakpoints for All Devices
    • 4.2.2 Create Breakpoints for the Smallest Screens
    • 4.2.3 Create Breakpoints for Medium Screens
    • 4.2.4 Create Breakpoints for the Largest Screens
  • 4.3 Optimal Breakpoints
    • 4.3.1 Best Practices for Choosing Breakpoints
    • 4.3.2 Retina Screen Breakpoints
  • 4.4 My Favorite Breakpoints

Summary

Lesson 5: Creating Responsive Layouts

Learning Objectives

  • 5.1 Understand Responsive Web Layouts
  • 5.2 Types of Layouts
    • 5.2.1 Fixed
    • 5.2.2 Fluid
    • 5.2.3 Hybrid
  • 5.3 Using Columns in Responsive Layouts
  • 5.4 Using Tables for Web Layouts—Pros and Cons

Summary

Lesson 6: Responsive Navigation

Learning Objectives

  • 6.1 The Importance of Responsive Navigation
  • 6.2 How to Make Mobile-Friendly Navigation
  • 6.3 Pros and Cons of Standard RWD Navigation Patterns
    • 6.3.1 How to Resize and Reposition Navigation
    • 6.3.2 How to Make Responsive Select Menus
    • 6.3.3 How to Build Hidden Navigation
    • 6.3.4 Add Additional Links as Responsive Navigation

Summary

Lesson 7: Responsive Images

Learning Objectives

  • 7.1 How to Make Images Responsive
    • 7.1.1 Flexible Width Images
    • 7.1.2 Change the Images That Are Used
  • 7.2 Keep the Download Speeds Fast
  • 7.3 Use Retina-Ready Images
    • 7.3.1 Learn About Retina-Ready Images
    • 7.3.2 Media Queries Can Serve Retina Images
    • 7.3.3 Use Retina.js
    • 7.3.4 Use SVG Images
    • 7.3.5 Use @font-face for custom icons

Summary

Lesson 8: Responsive Video

Learning Objectives

  • 8.1 How to Make Video Responsive
    • 8.1.1 Use the Required HTML <Video> Element
    • 8.1.2 Use CSS to Make the Video Responsive
    • 8.1.3 Use Media Queries to Display Different Source Files to Different Devices
  • 8.2 Make YouTube Videos Responsive
  • 8.3 Make a Video Background

Summary

Lesson 9: Responsive Web Tables

Learning Objectives

  • 9.1 Problems With Tables on Small Devices
  • 9.2 How to Make Tables Responsive
    • 9.2.1 Use Something Other Than a Table
    • 9.2.2 Resize Table Cells
    • 9.2.3 Rearrange the Table
    • 9.2.4 Hide Content
  • 9.3 Layout Tables Are Valid
    • 9.3.1 But are they a good choice?
    • 9.3.2 When to Use Tables for Layout

Summary

Lesson 10: Responsive Web Forms

Learning Objectives

  • 10.1 Use Modern HTML
  • 10.1.1 Input Fields
    • 10.1.2 Other New Form Attributes
    • 10.1.3 Validation Without Scripts
  • 10.2 Make Web Forms Usable
    • 10.2.1 Keep the Forms Simple
    • 10.2.2 Remove Extraneous Page Elements
    • 10.2.3 Remove or Combine Form Fields
    • 10.2.4 Avoid Long Drop-Down Menus
    • 10.2.5 Allow Customers to Type Answers
  • 10.3 Build a Responsive Form

Summary

Lesson 11: Testing RWD Sites

Learning Objectives

  • 11.1 Test in Your Favorite Browser, but Don’t Stop There
  • 11.2 How to Use Google Developer Tools for Testing
  • 11.3 Use Devices, if You Can
  • 11.4 How to Test When You Don’t Have the Devices

Summary

Lesson 12: Best Practices for RWD

Learning Objectives

  • 12.1 Make the Best Site You Can for the Most People
    • 12.1.1 Give Everyone the Best Experience
    • 12.1.2 Use the Best Breakpoints You Can
    • 12.1.3 Be Flexible and Think Small
    • 12.1.4 Don’t Forget the Content
    • 12.1.5 Keep Costs In Line
  • 12.2 Avoid the Common RWD Problems and Pitfalls
    • 12.2.1 Responsive Designs Can Be Slow
    • 12.2.2 RWD May Break Advertising
    • 12.2.3 Not All Customers Like Responsive Sites
    • 12.2.4 RWD Can Make More Work for Designers

Summary

Summary