We will be using the same codebase for Responsive Web Design I and II modules. You have been provided design mock ups for desktop, tablet, and mobile devices located in the design-files folder.
For project 1 you will build an adaptive website that has max-width breakpoints at 400px and 768px based on the designs provided to you in this repository. You have been provided desktop styles so you can focus on your media queries.
Concepts required to complete the task:
- How to use min and max-width
- Media queries using max-width
- Flexbox layout techniques are preferred
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.
-
Review each design file and adjust your styles at each breakpoint. Hint: Change your container class to width: 100% at the 768px breakpoint.
-
No horizontal scroll bars are acceptable at the exact breakpoint. At 400px and 768px you should only see a vertical scrollbar. Everything else is fine to have a horizontal scroll bar as this is not fully responsive.
-
Once you have completed these tasks, reach out to your Project Manager for approval before moving into the stretch goal.
-
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.
Now that you have introduced media queries into your project, it's time to upgrade your adaptive site to a fully 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 throughout the site into percents
- Convert all left and right margins and paddings into percents
- Convert all font-size pixels into rem units
- Make the breakpoints look pixel perfect using the design files
- Stretch Goal: Copy and paste your project to a new folder and make a 100% fluid layout design by removing breakpoints. There is no right answer here, I just want you to see what happens when constraints are removed.