Responsive Web Design Fundamentals by Google
Skills Covered: Responsive Design Patterns, Remote Debugging and Emulation, Optimizing Layout, CSS Media Queries, CSS Flexbox
ABOUT THIS COURSE
In this course, you’ll get fundamental knowledge of responsive web design with Google’s Pete LePage! You’ll explore, what makes web site responsive and how common responsive design patterns work across different devices. You’ll also create your own responsive layout using the viewport tag and CSS media queries.
As a part of the practical exercise, you’ll create your own responsive web page that works well on any device – phone, tablet, desktop, or anything in between.
WHAT YOU WILL LEARN
- Introduction to responsive design with Pete LePage.
- Why does responsive design work for any device?
- Remote debugging and emulation in the browser.
- What is the viewport?
- Sizing the content to the viewport.
- Touch targets and why they should be large.
- 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.
- Using minor break points.
- How to optimize text layout.
- How to use responsive tables and strategies for dealing with them.