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:

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 if you are using OSX, or a program like ShareX for Windows

4. BONUS: Add CSS transitions for the mouse hover events. See: 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. 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

• Bonus: CSS3 Transitions

• Dev Tools Tutorial

• Digital Color Meter Tutorial

Clone project here https://github.com/learn-co-curriculum/fe-zetsy