Skip to content

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

Notifications You must be signed in to change notification settings

bloominstituteoftechnology/Responsive-Web-Design-II

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published