jyou944 / fe-zetsy

Build the Zetsy site page writing your own HTML & CSS from scratch to match the mockup image and/or the live site example.

Zetsy

Learning Goals

• Develop HTML and CSS competency
• 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:

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