Tea Cozy Project

here is my webpage tea cozy shop project
https://shussain330.github.io/TeaCozyShop.github.io/
here is my solution for tea cozy project
link for html file(TeaCozyShop.github.io/index.html at main · SHussain330/TeaCozyShop.github.io · GitHub)
link for css file(TeaCozyShop.github.io/styles.css at main · SHussain330/TeaCozyShop.github.io · GitHub)
Review the code and suggest any further changes thanks

1 Like

Here’s mine! I’m not happy with how the background of the locations isn’t properly aligned. I tried everything I could think of and I’m still not sure how to fix it. Any advice/critiques on any of the project is welcome!

Index: Index
CSS

live view

1 Like

Hi, here is my take on this project. Happy to hear any comments. Thanks!

Site - Tea Cozy
Code - Git Tea Cozy

1 Like

I’ve also just finished this project! if anyone can offer any feedback that would be great (I know my code is a little messy in places)!

Site: Tea Cozy Project
Code: GitHub - cedread/teacozy: My attempt at Codecademy's Tea Cozy project

1 Like

Hi,

Did you try to minimize the screen to see if it was responsive? That was the primary objective of the assignment I feel and hence one is required to use the flexbox and its variants. It gave me an absolute nightmare lol (obviously highlighting my limited understanding)! But I just about managed to get it to be responsive when one shifts it to mobile mode (via the DOM inspect option) or by just minimizing the screen.

Check out the code here…

I’d appreciate feedback on this! I had to start over at least three times, but it actually made sense in the end.

Live: https://promeroc.github.io/the-tea-cozy/

Code: https://github.com/promeroc/the-tea-cozy

2 Likes

Hi guys, sharing my solution.
I wanted a refresher course and trying flex now, since when I learned css back it 2012 flex wasn´t fully supported by browsers. Finished it in a couple of hours mostly because my solution wasn´t pixel perfect matching.

Just a few notes on the design spec:

  • When you go to pixel perfect the provided spec sheet is off. Was this done on purpose?
  • Specially on the 1000px width featured section and 500px of the height section.
  • Also on the opacity 0.9 …you don´t get that gray color from seashell.
  • It took longer since I was trying to match the specs but thet were off a bit.

So am I understanding the specs wrong? I´m a graphic designer and used Photoshop to measure the spec sheet.

Also thanks a lot for sharing your solution, helps a lot learning from this community.

Have a great 2023 :slight_smile:

https://tildecreativa.github.io/theteacozy/

Did you figure it out?

just use before or after pseudo tags so it would overlay the container and taint it a bit.
eg:
#mission::before {
content: ‘’;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
background: rgba(0,0,0,0.5);
}

then z-index the contents above this.

Like the solution I provided…I used position absolute + transform old trick for Y centering … I might change it to flex later.
https://tildecreativa.github.io/theteacozy/

Hello everyone,

Finally it’s done! Come and visit my Tea Cozy website:
Live Website
Source codes

The website is almost similar but there are few setbacks such as:

  • the header is not fixed since I’m using flex-box display
  • does not follow the margin in pixels of the location section guideline

Appreciate if I can get some feedback from you!

Cheers!

Thank you for posting your work. My project looked accurate, but was missing some of the functionality (mostly resizing flex items). Looking at your code helped me make the little tweaks I needed to be happy with my work. I will post my work in the below for others to review.

As for your code, the only discrepancies I see are with the pixels and dimensions specified in the spec sheet. Other than that, it’s very clean.

Please take a look and provide feedback as you see fit. Thank you.

Live Site

Github Repository with code

3 Likes

Your project looks really good! I’ll freely admit that I used your navbar code to help fix mine and stop that annoying overlap with the logo. A few very minor things:

  • The Locations section doesn’t look quite right, and the background image doesn’t get big enough if the window is too thin.
  • Having the opacity applied to the whole page makes it look a little too muted for me. Maybe leave it off the navbar?
  • Finally, your navbar links don’t take you to quite the right place on the page. I found a fix for this, but I’m not sure if it’s the best option.

But, as I said, they are very minor. Your code looks very neat - far better than mine, I’m sure.

Here’s my live site.
And the repo for just the code.

I’d love to hear any feedback you, or anyone else, have.
Does anyone happen to know why the opacity of my ‘loc’ class doesn’t overrule that set by ‘main’?

2 Likes
#featured_tea {
    width: 75%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
}```

why we need to declare both width and max-width ?

Hi, there!

Many times you’ll see elements with max-width and width because it allows for responsiveness.

For example, you have two boxes:


The red (parent) box has a set width, and the blue box has a width of 100% (with 1rem of padding). So, the blue box would take up 100% of the parent’s width.

Even if they continue to shrink, the blue box takes up the width of its parent:

The blue box also has a max-width set, so that when the two boxes grow in size, the blue box stops growing when it reaches its max-width.

Does that make sense?

1 Like

Is it compulsory to set max/min width?

Mmm, I think that depends on the site design, but I find myself using max-width quite frequently (depending on the scenario). The only time I find myself using min-width is with media queries, because as the screen grows larger, I want specific things to change.

I suppose if you were designing desktop first, using min-width could make sense, but I would recommend mobile-first design as it allows you to focus on what it super important to be included on a web page. (Plus, I find it way easier to adjust the webpage as it grows than when it shrinks)

1 Like

Here’s mine!

website: Tea Cozy

GitHub: GitHub - schnattiba1/schnattiba1.github.io

1 Like

Hi everyone,

Here’s my version of the Tea Cozy Project.

Live Page: The Tea Cozy
Source Code: GitHub - Tea-Cozy

1 Like

love it helped me a lot thanks brother or sister

Hello everyone, this is my solution for Tea Cozy Project.
Alongside following the instructions, I also wanted to make it responsive.
Do not expect so much, elements just shrink and adjust according to screen size.

See the site live: Tea Cozy
See the code: GitHub

1 Like

Hello friends,
This is my project! I hope you can spare some time and take a look at it. I look forward to your critique and advice. Have a wonderful day!!!
https://www.codecademy.com/workspaces/644d53d7191912900d6495a7

1 Like