nmuta/css_sandbox

CSS Sandbox

OBJECTIVE: This workshop is designed to give students more tangible "css copycat" exercises that mirror real world CSS widgets and layouts.

LEVEL ONE:

*DESIGN THE CNN WIDGET called 'mockup.jpg'. The images needed for this exercise are in the repo itself.

Design notes for level one: 
* Use Verdana font for the words. It's a cross system font available on both Mac and PC
* You may want to use background images for the images you see in this design. (optional but strongly recommended).
* The Digital Color Meter on the Mac is a great tool to capture the hex values of anything on your screen. 
* Hitting command + control + shift + 4  can get you a tool on screen that captures an image but also measures pixels for you.

LEVEL TWO:

*Reproduce the entire widget and add an hover effect to vinyl record image. In other words, when you hover the first vinyl image, the album covers image should be replaced with the image of the record player. Note that in order to achieve this, you may need to use a background image called 'vinyl_hover.jpg'. On hover, the background image should shift so that the record player image shows. Research how to do this. This is a common trick for hover effects for images.

Desired effect:

LEVEL THREE:

Mimicking a full page layout

STUDY THE SHORT TERM HOUSING website layout from 2013:

view mockup

*Design the header with logo and links (not including social icons)

LEVEL FOUR:

*Reproduce the entire header and at least one component of the main body

LEVEL FIVE:

*Reproduce the header and the fully body including input form and photo gallery with a CSS :hover rollover effect on the image panel.