What is responsive design? It is designing your page layout to reflect the size and capabilities of the device being used to look at the page. Have you ever visited a site from your phone just to find out you can't access important information? This means the site is not responsive.
The key to having a great page is to design "mobile-first." This means that you should make sure that your page has all of the necessary functionalities when viewed on an extra small screen.
The larger screen of tablets allows you to modify the layout to provide a different experience for your users. An example? A navigation bar that stretches across the width of the screen.
PCs and Desktops
When people are viewing your page from a large screen you can consider adding some elements that want to avoid on the mobile view, e.g. photo carousels, large videos, etc.
Week 1: Style with Responsive Design
Week 2: Basic Concepts
Fluid Measurements and Media Queries (Starter)CodePen
Fluid Measurements and Media Queries (Completed)CodePen
Media Queries Part 2CodePen
Responsive Navigation (Starter)CodePen
Responsive Navigation (Completed)CodePen
Responsive Homework Starter CodeCodePen