Tea Cozy Code Review

Projects Off-platform Practice Projects
1

https://seancherry23.github.io/pp-ccTeaCozy/

Hi everyone,

I just completed The Tea Cozy project and was wondering if anyone could do a brief code review on it? I couldn’t figure out how to make the ‘tea of the month’ section pictures align like in the design brief, still getting used to flexbox. I appreciate everyone’s time and support!

-Sean

2

Hey Sean

Just took a look at your code. Nice work. I tried to order the tea menu images as you did all in one parent div container with wrap display but couldn’t get it to work correctly. Mainly I could not get the H4 descriptions of each menu item to drop to the bottom of image outside the 200x300px dimensions listed on spec. How did you drop your H4 descriptions of menu items to bottom of each div? something like flex-display: column; in my mind as I type this seems to make sense.

3

Hi Bit,

Thank you for the reply and sorry for the delayed response!
I’ve included links to the HTML and CSS files here:
https://github.com/seancherry23/pp-ccTeaCozy/blob/main/index.html
https://github.com/seancherry23/pp-ccTeaCozy/blob/main/resources/css/index.css

I think I got the menu item descriptions underneath the pictures by having the picture and item name at the same level within the div, ie

<div>
    <img>
    <h4></h4>
</div

Hopefully this helps!

-Sean