Objectives:
Student should be able to describe the differences in fixed, fluid, adaptive, and responsive layouts; demonstrate knowledge of media queries by correctly implementing them in a project and build responsive layouts using an effective approach.
Completed all Minimal Viable Project Tasks
Media query breakpoints are at 800px and 500px.
Media query breakpoints are at 800px and 500px.
Portfolio • LinkedIn • Twitter • Instagram • E-mail
It's time to expand our CSS skills into multiple devices. You will be creating an adaptive version of the "Great Idea" design. You will be working through design mock ups for desktop, tablet, and mobile devices located in the design-files folder.
Follow these steps to set up and work on your project:
- Create a forked copy of this project.
- Add your project manager as collaborator on Github.
- Clone your OWN version of the repository (Not Lambda's by mistake!).
- Create a new branch: git checkout -b
<firstName-lastName>
. - Implement the project on your newly created
<firstName-lastName>
branch, committing changes regularly. - Push commits: git push origin
<firstName-lastName>
.
Follow these steps for completing your project.
- Submit a Pull-Request to merge Branch into master (student's Repo). Please don't merge your own pull request
- Add your project manager as a reviewer on the pull-request
- Your project manager will count the project as complete by merging the branch back into master.
- Review each design file. Notice the subtle differences between them all.
- Insert a
viewport
meta tag into the head of the project with these html attributes:content="width=device-width, initial-scale=1"
- Introduce max-width media queries into your project at 800px and 500px
- Do your best to make your styles match the design files at each breakpoint
- Create a tablet and mobile version of the services page from previous projects
- 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. I recommend making a copy of all your contents in a new folder named "mobile-first" to keep it separate