/responsive-web-design-I

Responsive Web Design I project

Primary LanguageCSS

Responsive Web Design I: Adaptive Website

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.

Task 1: Set Up The Project With Git

  • Fork the project into your GitHub user account
  • Clone the forked project into a directory on your machine
  • You are now ready to build this project with your preferred IDE

Task 2: Project Objectives

  • 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

Stretch Goals:

  • 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