# Zetsy (lab)

## Objectives

1. Develop HTML and CSS competency
2. Practice visually interpreting HTML and CSS code from the rendered DOM

## Introduction

This lab challenges you to build an Etsy clone, 'Zetsy', by writing your own HTML & CSS from scratch to match the mockup image:

## What We Want:

&#x20;[![](https://camo.githubusercontent.com/e7dd43daeb7a00580bc526bd7b95377164140def/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66657764732d6373732f66652d7a657473792d636f6d706c6574652e6a7067)](https://camo.githubusercontent.com/e7dd43daeb7a00580bc526bd7b95377164140def/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66657764732d6373732f66652d7a657473792d636f6d706c6574652e6a7067)

## Instructions

1. Use the text and suggested images listed in `SOURCE.md` to fill in the content for `index.html`
2. Use `css/style.css` to write the CSS code necessary to make your your site page look like the example shown
3. To match the colors, you can eye-drop colors using [Digital Color Meter App](http://www.techrepublic.com/blog/apple-in-the-enterprise/discover-the-digitalcolor-meter-tool-on-your-mac/) if you are using OSX, or a program like [ShareX](https://getsharex.com/) for Windows
4. BONUS: Add CSS transitions for the mouse hover events. See: [http://css-tricks.com/almanac/properties/t/transition/](http://css-tricks.com/almanac/properties/t/transition/)

**Note:** If you get stuck, you can use the Developer Tools to inspect the code at the live site example here: [Zetsy live page example](http://learn-co-curriculum.github.io/fe-zetsy/). This lab has less direction than previous labs. As programmers in training, you are expected to use your Google-Fu to complete the challenge!

## Resources

* [Zetsy live page example](http://learn-co-curriculum.github.io/fe-zetsy/)
* [Bonus: CSS3 Transitions](http://css-tricks.com/almanac/properties/t/transition/)
* [Dev Tools Tutorial](http://code.tutsplus.com/tutorials/chrome-dev-tools-markup-and-style--net-27149)
* [Digital Color Meter Tutorial](http://www.techrepublic.com/blog/apple-in-the-enterprise/discover-the-digitalcolor-meter-tool-on-your-mac/)

Clone project here [https://github.com/learn-co-curriculum/fe-zetsy](https://github.com/learn-co-curriculum/fe-zetsy)
