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.

2 Likes

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.

2 Likes

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!!)

Sorry I just saw this right now!! I never got a notification for this post. I wrote everything from scratch. I had some passing familiarity with CSS so this wasn’t such a bother for me. But I’m sure I’m not the only one who posted my CSS code. There are other learners who posted their source code both HTML and CSS. Look at what they did and where they started so you can get some ideas with how you want to start your project. If you’re still going after it. Try and take a look at the Travel Website example that shows up earlier in the unit. I forgot what its called but it has good style examples for what you might want to do with the design spec and where to get a start.

Though maybe this is my mistake… Bootstrap and CSS are different things. Bootstrap does a lot for you out of the box. They have that unit too if you want to take it up. CSS is that more custom approach.

Thank you for your reply as it was helpful and insightful. I will take your advice and loo at how others did there project and I have been figuring out how to get started.
I do understand the difference between Bootstrap and CSS and that Bootstrap does most of the work for you were CSS you create it yourself.
I have taken most HTML and CSS Code Academy courses and have a good understanding of how to code, but for some reason when I try and start a project from scratch, I get wrapped around the preverbal axel (UGH). Anyway, thank you very much for your reply.

Maybe if your stuck on that opening line of CSS vs. HTML… because the HTML I feel in this project is pretty planned out for you: locations, tea, ect… If you want to add more copy like I did you totally can. But a good places to start:

  1. I guess and I’m biased of course because that’s how I started mine is the universal selector *{ and set those margins: 0 because you really don’t want any unexpected indentations messing your game up later down the road.

  2. Another good pointer if you look at the forum post from the first version of the Tea Cozy project from a person called Adam Gaffney suggesting to do all the sizing in REM/EM instead of pixels.

  3. Don’t be afraid to take the extra time and do the media requests. Since I’m pretty sure most people would view it on their phone were this a real tea website…it’s always a good idea to optimize for mobile.

  4. I know I stated it already but honestly tackle a specific section and spend a predetermined chunk of time on it and see what you can build. I actually (but I also enjoy reading magazines this way too) started with the end. I built from the footer up because the footer was just text and text formatting. Easy Peasey :melon: (aware its a melon but you know if you blur your eyes it could be a pea)

and most importantly: If no one told you: You got this … you can and will code your own awesome tea website.