The goals of this assignment are to exercise your CSS skills and to give you practice at making a coded page match a set of provided mocks, which is a common task for a web developer.

computer science

Description

The goals of this assignment are to exercise your CSS skills and to give you practice at making a coded page match a set of provided mocks, which is a common task for a web developer.


Here, you are provided with an un-styled `index.html` file, an empty `style.css` file, and a set of mocks (actually screenshots) in the `mocks/` directory.  Your task is to fill out `style.css` so that your rendered `index.html` page matches the mocks as closely as possible.


A few important things to note about the design that may not be clear in the static mocks:


* The Google Fonts stylesheet for the font families you should use for the page ("Roboto" and "Roboto Slab") is included in the HTML.


* The layout is responsive, in that the posts wrap as the size of the browser viewport changes.


* The location of the button to sell an item does not change relative to the viewport, even as the page is scrolled.


* There are some hover interactions on the page:


  * The colors of the button to update the filters change on hover.


  * All links except the site title are underlined on hover.


  * The button to sell an item grows slightly on hover.


* The appearance of the checkboxes and the "City" selector is just the browser's default.  You don't have to apply any special styles to these elements.


Again, your goal is to match the mocks as closely as possible.  I'll show some tools in class that will help you do this.


Related Questions in computer science category