Zetsy (lab)
Objectives
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:
What We Want:
Instructions
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 shownTo 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!
Resources
Clone project here https://github.com/learn-co-curriculum/fe-zetsy
Last updated