> For the complete documentation index, see [llms.txt](https://certil-remy.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://certil-remy.gitbook.io/learn/css-1/untitled-12.md).

# ZHW Shoes Layout (lab)

## ZHW Shoes Layout

### Objectives

1. Develop HTML and CSS competency
2. Practice visually interpreting HTML and CSS code from the rendered DOM
3. Practice jumping into, and contributing to, an existing code base

### Introduction

You've been hired as a developer to write the code for a cutting edge shoes website: ZHW. Somehow, without being able to program it themselves, the company has provided a complete image for what the site should look like once the HTML and CSS has been updated:

#### What They Would Like:

\
 [![](https://camo.githubusercontent.com/e910ee790a7cb10230097077e1fbaa9afbe28b94/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66657764732d6373732f68732d7a68772d73686f65732d6c61796f75742d636f6d706c6574652e6a7067)](https://camo.githubusercontent.com/e910ee790a7cb10230097077e1fbaa9afbe28b94/68747470733a2f2f637572726963756c756d2d636f6e74656e742e73332e616d617a6f6e6177732e636f6d2f66657764732d6373732f68732d7a68772d73686f65732d6c61796f75742d636f6d706c6574652e6a7067)

### Instructions

1. Open `index.html` in your browser to see what we have so far (most of the work is completed already)
2. Write the necessary CSS in `css/layout.css` to create classes for a three column grid
3. Update `index.html` to make use of your newly created CSS classes
4. Either provide sized tile classes, make use of [the clearfix hack](https://www.w3schools.com/howto/howto_css_clearfix.asp) using `float` and `clear`, or use your own implementation to accurately fill the columns with content

**Note:** 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

* [CSS Columns](https://www.w3schools.com/css/css3_multiple_columns.asp)
* [Clearfix](https://www.w3schools.com/howto/howto_css_clearfix.asp)

clone project here <https://github.com/learn-co-curriculum/hs-zhw-shoes-layout>