Learning Responsive Web Design (lessons 1-6)

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

Table of Contents

Lesson 1: Introducing Responsive Web Design (RWD)
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

Lesson 2: HTML, CSS, and JavaScript for RWD
2.1 Understand the Basics of HTML
2.2 Review JavaScript Basics
2.3 Get Started with Cascading Style Sheets

Lesson 3: CSS Media Queries
3.1 Get Started With Media Queries
3.2 How to Write Media Query Expressions

Lesson 4: Breakpoints
4.1 Understand BreakPoints
4.2 How to Define Breakpoints
4.3 Optimal Breakpoints
4.4 My Favorite Breakpoints

Lesson 5: Creating Responsive Layouts
5.1 Understand Responsive Web Layouts
5.2 Types of Layouts
5.3 Using Columns in Responsive Layouts
5.4 Using Tables for Web Layouts Pros and Cons

Lesson 6: Responsive Navigation
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