Tea Cozy Project

Hi, I have finished Tea Cozy project. I found it quite challenging for me.
Here is the link to deployed version.
Here is the link to repo

It would be nice to receive some feedback.
Also, I am struggling with centring boxes in “Tea of the Month” and “Location” containers. Is there any advice on how it could be centred?

Hi Valentyn,
I just finished this project too. It was pretty hard for me. I don’t think I can give you much advice. I had the same problem with centering these two boxes. In general It did a lot of try and error for positioning… and my code looks messy now…
I ended up with setting “display” of the main container to “inline-flex” with “flex-direction: column” and then could center the flex-items (=main boxes). Not sure if this is helpful. Sorry, I’m pretty new to coding.
But it looks like you were able to center the boxes after all and your website looks great!
One thing I noticed is that you maybe could use more semantic html instead of divs. Like nav, main, section, footer.
I will post my project here too. Feel free to look, compare and give my some feedback if you find time.

1 Like

I just finished this project. I did a lot of try and error for positioning and I’m sure there are easier ways to write this.
Would love to get some feedback!


1 Like

Hi, I like your solution. Looks very nice. I have also tried the page on mobile and it seems really cool, everything is aligned perfectly. Congratulations)

Thanks for your feedback on my solution. Yes, semantic HTML is more preferable, you are right, but I spent a lot of time trying to make everything done so that is why I ended up with divs with a lot of weird classes, not to ruin smth that works lol.

Wish you good luck)

1 Like

Hi valentynejk,

This was by far a much bigger challenge for me than I anticipated and definitely made me cement some concepts. But it was a good help reading your code as a way to try to understand what I could change in mine. I have to say that it is nicely structured for an outside reader.

I’m only giving my first steps into coding, so I won’t be much of a help, but I will share my own thoughts with you :slight_smile:

1 - I noticed that in your styles.css you use both “header img” and “#logo”, which I believe are the same thing. Maybe you’d want to join them together.

2 - Independently of my browser dimension, I always have an horizontal scroll bar and I haven’t figured out yet what is causing that. If you find the reason, please share it here so I can learn together with you.

Finally, when you ask for suggestions about centering those 2 boxes, from what I could understand you only need help to vertically position them. I personally used padding for that effect. Since we weren’t given any specific distance, I used pixel values that looked similar to the spec sheet.

Here’s a link to my repo and a direct link for a preview

I would also like to hear your thoughts :slight_smile:

Happy codding!

1 Like

Just finished and it works! here is my tea cozy solution that was difficult, i realized that flex can be nested and that’s when my images started behaving properly.

1 Like

Dear Pataoss,

Thanks for your commen. Sorry for the delayed reply, was busy these days.
I like your solution, looks pretty the same as it was in the task. Well done

As for your suggestion, actually, I feel that using padding for the centring purposes could backfire on you when scaling the page and using different viewports. Just my opinion.

What is more important is to use chrome or Mozilla dev tools for better filling of div boxes you are working with.
See my latest site in post
Here I could avoid this “centring” problem for mobile view.

Also, I would like to say that aside dev tools I use boarding property as well to see the dynamic picture of how my code affect div I am working with. Do not sure that it is a best practice, but it works).

Happy coding)

Feels like magic at first glance, isn’t it)?

1 Like

Thank you!
Check out my solution live: https://ahman502.github.io/The-Tea-Cozy/
or check out my GitHub (https://github.com/ahman502/The-Tea-Cozy) for the source code. Hope you guys like it! :slight_smile:

Hello, I’m not sure if you’re posting github link because it’s your first project.
Please understand if it is weird to write with a translator because I am not good at English.

I understand that you make one box content using div and use display flex during the project.

How should I use text? Even if you tie it with a box block, the text-size does not have the effect of Flex.
Below is the project that I worked on. If the browser window becomes smaller, the font size does not change.

I am also struggling a bit with this challenge project. Your code helped me approach this better than I was originally.