Responsive-Web-Design

We will be using the same codebase for Responsive Web Design I and II. They are as follows:

Project 1:

For this project, no new syntax has been introduced but many new concepts are needed to accomplish the task.

Concepts required to complete the task:

• How to use media queries
• Min and max width
• Layout changes based on device width
• Adaptive vs fixed layouts

Build an adaptive website that has breakpoints at 400px, 768px, and 1100px. This project is very open ended and meant to challenge what you learned today. The correct solution will have breakpoints at the directed values but how it looks is up to you.

Remember that an adaptive layout updates at breakpoints only. Don't worry about fluid layouts for this challenge.

Tasks to complete:

• Introduce max-width media queries into your project at 400px, 768px, and 1100px

• Review each breakpoint and adjust the layout so that you don't experience horizontal scroll bars at the media query.

• Stretch Goal: Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like.

Project 2:

Now that you have introduced media queries into your project, it's time to upgrade your adaptive site to a full on responsive layout.

To accomplish this challenge you will need to incorporate your knowedges of max and min width, media queries, rem units, and percents.

Tasks to complete:

• Convert all fixed widths into percents.

• Convert all left and right margins and paddings into percents.

• Convert all font-size pixels into rem units.

• Stretch Goal: See how close you can get to the media query and still have your site look decent. Hint: you may need to introduce a few more media queries!