Responsive Web Design

Responsive web design aims to provide an optimal viewing experience with easy reading and navigation across a wide range of devices. In this course, you'll learn the fundamentals of responsive web design and how to create responsive web pages that work well on any device—phone, tablet, desktop, or anything in between.

Explore common responsive design solutions and how they work across different devices. Create your own responsive layout using HTML5 while learning CSS3 box models, positioning, document flow, floating elements, and media queries.

Course Content

• What is responsive design?

• Why does responsive design work for any device?

• Remote debugging and emulation in the browser

• Setting the Viewport Meta Tag

• Setting Up "Mobile First" Media Queries

• Avoiding static sized items

• CSS Media Queries

• Choosing and setting breakpoints

• Using the CSS flexbox to modify layout

• Optimizing text layout

• Implementing custom web fonts

• Formatting and sizing text

• Determining optimal line length

• Defining responsive images

• Working with responsive tables

• HTML5 Input Types

• Max-Width Media Queries

• Mobile First Thinking

• HTML5 Boilerplates