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.
- 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
- Review each design file and build your styles at each breakpoint.
- Introduce
font-size: 62.5%;into yourhtmlselector. - Constrain your container element with a
max-widthof 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-sizevalues 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
- 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.