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
viewportmeta 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