Responsive Web Design Fundamentals

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

• Why Responsive
• Introduction to responsive design with Pete LePage.,Why does responsive design work for any device?,Remote debugging and emulation in the browser.
• Starting Small
• What is the viewport?,Learn about sizing the content to the viewport.,Touch targets, and why they should be large.
• Building Up
• How to take advantage of CSS media queries.,What is a breakpoint, and how to choose one.,How to use the CSS flexbox to modify layout.
• Common Responsive Patterns
• How to apply the mostly fluid pattern.,How to apply the column drop pattern.,How to apply layout shifter pattern.
• Optimizations
• Using minor break points.,How to optimize text layout.,How to use responsive tables, and strategies for dealing with them.