Tea Cosy Project

Please can anyone give me feedback on this project. It is my first attempt at a responsive webpage and some aspects took me ages to figure out. Any feedback on making my code more efficient or advice on how to properly structure everything would be wonderful!

HI @danielcross570865083 would you be able to set up github pages to see a live version of your code? I kinda slapped and hammered mine to look similar to the spec sheet, but otherwise this was a messy ordeal. I’m hoping now that I “finished it” I could take notes from others as well.

Here’s my repo: GitHub - cipher-dee/tea-cosy: Codecademy tea-cosy challenged

And live version: Document

Hi @bitsurfer97269. Here is a live version of my site. I added this to github before I knew how to push code and commit changes. And also, reviewing mine there are a lot of accessibility issues I have in my HTML. I see there are a few images that I see need reworking now!

Yours looks good! I think you should change the display of your main section and Nav section to flex so that you’re able to view it easily on smaller screens. Take a look at my code if you’d like any ideas. It’s not great, but the goal is to understand display: flex; and it’s properties.

https://danwincross.github.io/Codecademy-Tea-Cosy-V2/

Hi @danielcross570865083 no worries! I just came up to this project after a short break from the course and just hit a wall. I wanted to get it “done” instead of flailing around. I hadn’t even thought about reponsiveness, let alone accessibility. Only getting the chance to take a closer look now.

@bitsurfer97269 that’s great to hear! Keep it up and keep me posted with other projects too. I’ll tag you when I complete some of my upcoming ones.

1 Like

Man I appreciate your code I learned a lot and got it looking great and also functioning mostly like how it should.
Here’s my updated repo:

And live site:
https://cipher-dee.github.io/tea-cosy/

Wouldn’t be able to provide much feedback on yours as I learned mostly from you :slight_smile: However I would say when possible to use semantic tags like header, main, instead of using divs for the main sections. Also I don’t know if you were saying something about centering the last section. I struggled with that as well as in the inner text boxes to flex properly. Managed to do it be centering the section using margin: 0 auto; and then applying flex on the actual text boxes themselves.

It still feels like I’ve hammered everything into shape and still haven’t gotten a good hang of things so going to try and drill and create practice projects out of this. Also wanted to mention that a bunch of us got together on Discord if you’d like to hang sometimes and talk shop Full-Stack Engineer Group 101

1 Like