Tea Cozy (with flex box)

Web Development Front-End
1

Like others I really struggled with this but think I finally got there. I’m not sure how elegant my solution is and I wonder whether using float: right on my element to make sure it’s in the correct place within header is the correct way to do this. I tried lots of different solutions for the navbar but none but this worked. Would be really interested in seeing what others thing.

Link to course syllabus off-platform tea cozy

Link to my solution on Github

Thanks in advance

1 Like
2

Personally, I used a different class for the logo and one for the “menu” section. I then declared an inline-flex display for my menu section with a justify-content of flex-end and adjusted with padding-right: 10px;

As I am also new and not sure what is the “correct way” to do this, your solution seems good. If I am not too “nosy”, I have a few observations for your project. Feedback is always good (my opinion) and I think this could help:

  1. I think your nav bar was supposed to have a black background on it, as when scrolling through the page it looks a bit odd without it.
  2. Your closing <a> tag ends before the name of each menu item, which means the menu is not clickable or simply put not really working if you would have linked those sections or other pages. For example, the code should be: <li><a href=“#”>Mission</a></li> for it to be a valid menu button.
  3. Alignment of the “Locations” section subtitle is not really keeping close to the requirements, and it is also declared with an absolute position. The whole section is not really centered properly and I think it would have been a good idea to include each location section in a parent section so you could align that parent section in the middle, as everything seems a bit off centered right now.

Everything else seems very good, I think you did a great job, I also struggled with this project a lot and it took a long time to find a way to fix everything.

Here is my project: Tea Cozy - if you want to use inspect and see how I did certain things. I also drew inspiration from a project from someone for a small area that I was not able to arrange how I wanted to, and seeing how that person did it helped me a lot.

I don’t mean to be rude or anything, I just wanted to help. Have an awesome day!

3

Thanks for the feedback and don’t worry you’re not being rude or nose :rofl:

The feedback was great, exactly what I needed. Sorry it took me a while to respond, I’ve been away with work so haven’t had much time for Codecademy recently.

Kind regards

Mark