Giter VIP home page Giter VIP logo

responsive-web-design-ii's Introduction

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.

responsive-web-design-ii's People

Contributors

bigknell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.