amandacarlton/css_sandbox-1

css_sandbox

OBJECTIVE: This workshop is designed to explore the foundations of CSS.

EXIT TICKETS: By the end of the workshop, students will be able to style a CNN website widget using various CSS styles.

1. Level one should be able to at least the core layout of the widget without assisteance.
2. Level two should be able to reproduce the entire widget
3. Level three should be able to reproduce the entire widget and add an hover effect to vinyl record image

DO NOW:

Create a box within a box in CSS, where each box has a different color.

TOPICS:

Selectors examples: p , #my_id , .this_class order of selectors and combining selectors

The Box Model Content area, padding, border, margin

Position related float position: static relative absolute fixed examples

display: none, block, [inline], [inline-block]

Image related background: url('file.jpg')

Pseudo classes :hover

CLASS #2:

OBJECTIVE: This workshop is designed to help people explore designing header and body sections of a website

EXIT TICKETS: By the end of the workshop, students will be able to copy aspects of the Short Term Housing website

1. Level one should be able to design the header with logo and links (not including social icons)
2. Level two should be able to reproduce the entire header and at least one component of the main body
3. Level three should be able to reproduce the header and the fully body including input form and photo gallery with a CSS :hover rollover effect on the image panel.

DO NOW: Visit ShortTermHousing.com and come up with a strategy to carve up the the header and body of the page. Be prepared to discuss with class. Also, come up to board and fill in your name on the seating chart.