Tea Cozy assignment walkthrough needed!

I have spent approximately seven hours trying to plod my way through the Tea Cozy Assignment. I’m extremely frustrated with it, and at this point, I’ve simply given up on ever getting the “Locations” section of the webpage to look right, and I’m just moving on to the next lesson. (Unlike most of you, I’m not learning this as a career).

The Tea Cozy assignment can be found here:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/projects/tea-cozy

But that’s not the point of this post. Rather, it’s an example of a larger issue. The point is that Codecademy needs to post a walk-through video on this assignment! The “Get Unstuck” button just directs us to the forums, which, for this assignment, contain a lot of “Help I’m stuck” posts. There’s a YouTube video that walks through this, but uses very little flex, and uses code that Codecademy hasn’t taught us yet.

When the students don’t understand something, we need to be able to ask the teacher. Having the teacher (in this case, Codecademy) shrug and say, “Try to figure it out by asking other confused students” doesn’t cut it. This is especially true when the students are paying for an education, and doubly true when those students are expecting to learn enough about the topic to base their careers on the knowledge imparted by the teacher. Codecademy, get off your butts and give us a walk through on this assignment.

1 Like

Hello @system5252182373 ,

I’m sorry to hear about your frustrations with Tea Cozy. (Thank you for including the link. :+1:)

For next time, keep these tips in mind:

  1. Flexbox can be tricky to learn. I complimented my learning with Flexbox Froggy - A game for learning CSS flexbox to get a better grasp.

  2. It’s ok to move to the next lesson and come back to it later. Kuddos to you for having spent seven hours trying to make it work. Don’t wait till you get so frustrated and upset.

  3. Search in the Forums for other learners that have completed their projects. It helps to look at other peoples’ code to see where you went wrong. Debugging code is all part of the process.

1 Like

Hey, I get what you’re saying; as a student who just completed the same assignment, it was pretty tough and frustrating.
By the way; I’m also not doing this for a career so I guess we’re in the same boat!
Out of all the assignments so far, I think this was one of the most complicated and frustrating imo; and it doesn’t help that there’s no video to get unstuck.

If you ever need some code for reference, here’s mine: GitHub - Easternspork/teaCozyProject.
Its definitely not perfect (I know what needs to be fixed and what I can do to fix it but I’m too lazy to go back cause it only happens when you make the window really skinny) but it uses flex boxes and responsive design, and follows most of the reference picture given. I think I used one property that wasn’t in the lesson but it was a very minor thing and I don’t think it really mattered in the finishing product (it was fit-content or something like that)

By the way, if you’re stuck on the locations part, heres what I did (click on the blurred text to see):

Make a separate section for the locations.
Set section background-image to the image provided, then set background-position to center, and background-size to cover. (this was taught in the relative measurements lessons)
Add h2 tag with word “locations”
Add div inside of sections, with width of 70% (or whatever you want. this is going to be how wide your 3 boxes with locations are going to spread out), make the display flex (which will make it a flex box), flex-direction of row (allow it to go left to right), and justify-content as space-between (even spacing between boxes when there is room)
Inside of that div, make 3 divs each with the same class; each are gonna be locations.
Set these classes to have a background color of black, and set the width and heights.
Write the details of each location inside of those divs.
(I left out talking about margins and padding and stuff you can figure that out yourself)

It really helped to go back and read the lessons on responsive design, especially this one (its the relative measurements lesson if the link doesn’t work) - https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-making-a-website-responsive/modules/fecp-learn-responsive-design/lessons/sizing-elements/exercises/review-relative-measurements

It also doesn’t help that the problems on the responsive design lessons were pretty bad (just my opinion), and they were mostly just “add this to this element” so you gotta make sure you read all the content in the lesson.

Hope this helped, good luck coding!

I am your average confused learner over here but I just completed the flex Box Tea Cozy assignment you can check it out here I don’t know if it will resolve the coding block (tech writing block) you might be having ? Hope it’s flex boxy enough for you.

I do know after finishing this assignment the subsequent CSS lessons were v. easy and somewhat repetitive. But it does make you learn some baseline skills I guess before heading out and facing the rest of the unit.

I also didn’t try and code the whole thing in one day. I would be like okay today I am dealing with the nav. tomorrow the footer. Breaking the project up into tiny bits made it much more doable. And that’s even how I keep consistent coding 3 hour block daily and even though most day I feel like I could code more or do more I don’t so next day im like: OH YEAH CODING TIME YEAH!!! (sorry JS fan over here).

There’s also nothing wrong saying: To Waffles with this :waffle: !!.. I need to learn somethings and comeback to it. On here, I did not want to do the credit card checker problem in the JS unit with rewriting and shifting and unshifting arrays. That seemed like repetitive and boring code I didn’t want to write. I also got the general gist of arrays but did not find the problem very compelling enough to want to practice my basic skills. I learned some of the higher order array functions few or at least two units upstream and went back to it all over-leveled and was like: Take that you crumple horned snorkack :smiling_imp:

Anyhow my proj. if you want to take a look.

1 Like

Hi ngwolfhare,

My name is Mark Morse (80Duce user name)and I am working on the Tea Cozy project as well. I also have been driving myself crazy over this project because Code Academy did not supply any CSS bootstrap code. The css file was empty and I have been searching for some css code that I could use just to get started.
What I want to know, was this the same issue for you and how did you over come this issue? Was there any css code provided for you or did you write you css code from scratch?
I am a bit stuck and confused though I have the basics index.html and style.css file started. (Help Please!!)