Day 11: </shop> </site>

Continuing with the shop page

I picked up where I'd left off - at 12:27 in yesterday's video. Today I'll style the shopping cart.

Shopping cart

When building the 'table' structure of the cart, I'm struck by how you really have to think about what CSS classes to apply to your content. It's quite clever really, we've created a class for the different elements in the table, but also for the rows and columns in the table. That way, I'll be able to set the height and width of the table.

I'm also having to group elements up into classes. For example, I grouped the name and image of my products into one class so that they could stack properly in the first column (underneath the Item <h2>).

For the last row of the shop, I wanted a solid line all the way across. In order to do this I would have used the last-child selector, but I needed to create a new <div class="cart-items"> to put all the cart items in and ensure the last row was the last child element of the cart-items class.

I had to do further jiggery pokery to remove the borders from the columns which are in the cart-row:last child.