Assignment
For this project, you will be creating a responsive website that will be viewed on three different-sized devices. The following list shows the breakdown of the three devices you will code for.
• Standard website width of 960px (do not plan for devices greater than 1280 px)
• Tablet-size device width greater than 480px and less than 960 px
• Phone-sized device width less than 480 px
You will not be allowed to use any of the following-using any of the following will result in a grade of zero for the entire project.
• Framework for building a responsive website
• Adobe Muse or any software that generates HTML code from images
• Any software or website that creates responsive websites
• JavaScript or jQuery that controls the responsive website
For this assignment will be converting the opening page of website dogfreaks into a responsive website that will be view on 2 new sized devices. YOU will not change the look of the original site; the purpose of this project is to convert the old site to work on other devices, you must keep the look and feel of the old site in the 2 new sites.
You may use HTML, HTML5, CSS, limited JavaScript, or jQuery that is used for manipulation of content on the page.
Using the example you will create 2 other CSS files one for the tablet view and one for the phone view.
Using media queries, then transfer control between the CSS files based on the size of the browser window. Other items that you will incorporate in your conversion to a responsive website:
• Convert all images to be responsive
• Convert all text to adjust to a viewable font for the device
• Create a layout for each device
You will also need to do the following
• Remove all images that are used for backgrounds, replace with CSS colors as close as possible
• Remove this all of the images from the page
• Using the @import concept, and Google fonts select a new fornt to be used only on the tagline
• Using CSS3 create a button around the "Full Story" links on the opening page, and have the buttons change when rolled over.
https://www.dropbox.com/s/wab4lphdo142bft/Website_Design_Dog_Freakws.zip?dl=0