In this lesson, we will learn how to
implement responsive web design. Responsive web design will make your
layout respond to every device. Whether it’s a cell phone, tablet, or large desktop screen, your website should still look balanced and provide the user with essential content and functionality. We’ll explore CSS media queries that help you target the different screen sizes. And we’ll look at the mobile-first approach, which, as the name indicates, targets mobile devices as its primary
design concern. Mobile-first design focuses on the most important components of an application, then addresses the more complex elements for larger screens. The desktop-first approach focuses on larger screens, solving the problems for the most complicated components, and then addresses smaller screens, providing less complex, but still essential, app functionality. And to help us design for the different screen sizes, we use a fluid layout. A fluid layout avoids fixed values in the CSS properties, which makes the elements’ size relative to their viewport.