- Develop HTML and CSS competency
- Practice visually interpreting HTML and CSS code from the rendered DOM
This lab challenges you asks 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.mdto fill in the content forindex.html - Use
css/style.cssto 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!