Thinking in Code

Today I’m revisiting the ‘Markup the World Around You’ task that I did once in the HTML & CSS from the Beginning p2p course as part of a challenge in the Webmaking 101 learning track on

View the old task here

I’d also like to “mark up” a photograph I took a while ago at a Teavana.


This is basically a container div with two equal width left and right “sidebar” divs. Each sidebar div has 5 equal height “shelf” divs. Some of the shelf divs contain a “menu” – and all of the shelves contain an unordered list of teapots.

To go a step further, each teapot has a specific class that defines the size, shape, and color.

After thinking about it, I’d want to be able to easily change color without changing size/shape. This is because there seem to be a lot less size/shapes than there are colors. I could do this by assigning the teapot’s class as a size/shape, and then using a span to define color, but would this really be the best way? I try to avoid spans when possible.

I could also create a teapot article (class defined as size/shape) and then the paragraph inside that article could have a secondary class that could define color.

I think I would choose the latter because it seems more professional and easier for future editing.

Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>