/Responsive-Web-Design-II

All things responsive: Devices, viewports, media queries, adaptive, fluid, and how to build them.

Primary LanguageHTML

Responsive-Web-Design: Fully Responsive

You have experienced building fixed layout web pages, adaptive web pages, and now it's time to go fully responsive! Using your new knowledge with responsive units, contstraints, and media queries you are now prepared to take on today's fully reponsive website project.

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 and build your styles at each breakpoint.
  • Introduce font-size: 62.5%; into your html selector.
  • Constrain your container element with a max-width of 880px
  • Introduce max-width media queries into your project at 800px and 500px
  • Convert all fixed widths, left and right margins and paddings throughout the site into percents. You will know this is working if you never see a horizontal scroll bar when you resize your browser.
  • Convert all font-size values into rem units
  • Do your best to make the breakpoints look pixel-close-enough
  • Once you have completed all of the project objectives, push your commits and make a pull request against the original fork

Stretch Goals:

  • Build the services page from earlier assignments into a responsive design using your own creativity
  • Look at BEM and convert your existing CSS into the appropriate selectors.
  • Introduce CSS animations at different break points across your site
  • Build another page based on one of the navigation items and use your creativity on how it looks.