- Develop HTML and CSS competency
- Practice visually interpreting HTML and CSS code from the rendered DOM
This lab challenges you to build an Etsy clone, 'Zetsy', by writing your own HTML & CSS from scratch to match the mockup image:
- Use the text and suggested images listed in
SOURCE.md
to fill in the content forindex.html
. - Use
css/style.css
to write the CSS code necessary to make your your site page look like the example shown. - 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.
- 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!