Here's the Tea: Flexbox Tea Cozy Project

You’re here for the :tea: Well don’t worry coding fam. here it is.

Okay first things first:

  1. I know I could make this better with @ media screen requests setting the max width to around 700px or so. However, that is not quite so fresh in my memory and I noticed it’s covered much later in the intermediate CSS unit. So my project isn’t as optimized as it could be.

  2. I didn’t follow the redline religiously. Where I deviated:

  • I didn’t like the utilitarian look so I added in color to the links and didn’t underline them.

  • I added a different font to increase the cozy (hopefully but to each their own :coffee:).

  • I added additional copy to make it come alive because that’s what I got paid the mediocre bucks for in the previous iteration of my career and challenge myself. This is why also the alt text of my images is a bit more descriptive.

  1. I made myself this quick image to help me out with styling here and there maybe some of you might find it useful:
    which way

  2. I also used [codepen.io] to view my changes in a non Academy browser. It helps you see your changes more generally. Plus before you add any of your code it always has a hilarious one liner.

  3. Please lemme know what you think !! Want to get better. I don’t always have the most patience with html/css that I normally have with say something like JavaScript so always welcome improvements.

5 Likes

My HTML

<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Benne&display=swap" rel="stylesheet">
  
</head>
  <body>
    <!-- Header -->
    <header>
      <div class ="cozy">
        <div class ="logo">
        <img class="logo" src='https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt="Our cozy logo. Written in cursive for that extra level of refinement our tea would love.">
        </div>
        <nav>
          <ul class="navigation">
            <li><a href = "#the-mission">Mission</a></li>
            <li><a href = "#the-tea">Featured Teas</a></li>
            <li><a href="#the-places">Locations</a></li>
            <li><a href="#holler">Contact</a></li>
      </ul>
    </nav> 
  </div>  
</header>

    <!--Mission Statement-->
    <a href="" id="the-mission"></a>
      <section class ="mission">
        <div class="goals">
          <h2>Our Mission:</h2>
        <h4> To provide you the best selection of handpicked, artisanally curated, sustainable, small-Batch organic teas in Maine.</h4>
        </div>
      </section>

    <!--Tea of the Month-->
    <a href="" id="the-tea"></a>
      <section class = "featured">
        <div class="steeping">
          <h2>Tea of the Month</h2>
          <h4>Join our Tea of the Month club and find out what's steeping at the Tea Cozy</h4>
        </div>
      <div class="spacer">
        <div class ="row">
          <div class="flavor">
            <div class="tea">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="A steaming cup of our berry bliz tea with whole cranberries">
            <figcaption>Fall Berry Blitz Tea</figcaption>
          <h4>Fall Berry Blitz Tea. Guaranteed to keep you berry warm this fall. Blend of cranberry and raspberry flavors.</h4>
          </div>

          <div class="tea">
          <img src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="A box with loose tea scattered with it pays to buy good tea. We couldn't agree more">
          <figcaption>Spiced Rum</figcaption>
          <h4>Spiced Rum Tea. All the warming spices of rum, none of the hangover. Notes of cinnamon and clove.</h4>
          </div>
          <div class="tea">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Tea steeping in a white bone china cup. You don't get fancier than that.">
          <figcaption>Myrtle Ave. Tea </figcaption>
          <h4>Myrtle Ave. Tea for a minty fresh and fancy afternoon high tea delight.</h4>
        </div>
          <div class="tea">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="A curious cup of red tea sits on a bold saucer. Don't forget a pinch of sugar.">
          <figcaption>Bedford Bizzare Tea</figcaption>
          <h4>Bedford Bizzare Tea. A mysterious blend of citrus and black tea. For the curious.</h4>
          </div>  
          <div class="tea">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="A thick donut with just the right amount of icing sugar awaits you here.Pumpkin Spice and everything nice.">
          <figcaption>A sample of our seasonal donuts. Made fresh daily on-site.</figcaption>
          <h4>Sure the convention might be coffee. But nothing goes better with our tea than our seasonal donuts.</h4>
      </div>
    </div>
  </div>
 </div> 
</section> 

  <!--Locations-->
  <a href="" id="the-places"></a>
  <section class = "location">
   
    <div class="locations">
      <h2>Locations: </h2>
    </div>

    <div class ="address">
      <h3><span>Downtown</span></h3>
      <h4>384 West 4th Street</h4>
      <h4>Suite 108</h4>
      <h4> 917-555-8904 </h4>
      <h4> Portland, Maine </h4>
    </div>

    <div class ="address">
      <h3><span>East Bayside</span></h3>
      <h4> 3433 Phisherman's Avenue</h4>
      <h4> North West Corner</h4>
      <h4> 917-555-8904 </h4>
      <h4> Portland, Maine </h4>
    </div>

    <div class ="address">
      <h3><span>Oakdale</span></h3>
      <h4> 515 Crescent Avenue<h4>
      <h4> Second Floor</h4>
      <h4> 917-555-8904 </h4>
      <h4> Portland, Maine </h4>
    </div> 

    </section> 

    <a href="" id="holler"></a>
    <section class = "contact">
      <div class="info">
        <h2> Contact Us: </h2>
        <p> The Tea Cozy </p>
        <p> contact@theteacozy.com </p>
        <p> 917-555-8904 </p>
      </div>    
    </section> 

    <!-- Footer -->
    <footer>
      <div class="copyright">
        <h5> &copy; Copyright The Tea Cozy 2021</h5>
      </div>     
    </footer>
  </body>
</html>
type or paste code here
2 Likes

My Css

/*Browser Reset */
* {
  margin: 0;
  padding: 0;
}

/*Global Styles*/
html{
  font-family: "Benne","Helvetica", Arial, sans-serif;
  font-size: 22px;
  line-height:normal;
}

body {
  background-color: black;
  color:seashell;
  opacity:0.9;
  text-align:center;
}

/*Header Styles*/
.cozy {
  height: 69px;
  width: 1200px;
  z-index: 2;
  position: fixed;
  background-color:black;
  border-bottom: 1px solid seashell;
  display: flex;
  justify-content: space-between;
  align-items:center;
}

.logo{
  display: inline-flex;
  flex-direction: row;
  height: 50px;
  margin-left: 10px;
}

.navigation li {
  list-style: none;
  display: inline-flex;
  padding-right: 25px;

}

.navigation a {
  text-decoration: none;
  color: #ffc200; 
}

.navigation a:hover{
  opacity:0.5;
}

/* Mission Statement Styles */ 
.mission {
  height: 700px;
  width:1200px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  align-content:center;
}

.goals {
  background-color:black;
  opacity: 1;
  text-align:center;
  position: relative;
  top: 300px;
}

/*Featured Tea Styles */
.featured {
  width: 1000px;
  height: auto;
}

.steeping {
  margin-top: 20px;
  margin-bottom: 5px;
  padding: 5px;
  text-align:center;
  position:relative;
  left: 140px;
}

.spacer{
  max-width: 1000px;
  margin: auto;
}

.row{
  display: inline-flex;
  flex-direction: row wrap;
  justify-content: space-around;
}

.flavor {
  background-color:black;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
}
.tea {
  margin-top: 50px;
  position: relative;
  left: 150px;
  right:150px;
}

.tea img {
  height:200px;
  width:300px;
}
 .tea figcaption {
  width:300px;
  text-align:center;
  font-weight:bold;
  padding: 5px;
}
 .tea h4 { 
  width:300px;
  text-align:justify;
  font-weight:bold;
  padding: 10px;
  margin-bottom: 10px;
}

/*Location Stles*/
.location {
  height:750px;
  width: 1200px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  display:flex;
  flex-flow: row-nowrap;
  justify-content:space-around;
  align-content:center;
}

.locations h2 {
  color: black;
  text-align:center;
  position: relative;
  top:100px;
  left: 510px;
}

 .address {
   width: 300px;
   height: 290px;
   position:relative;
   top: 200px;
   right:90px;
   background-color:black;
   opacity: 1;
   text-align:center;
 }

 .address h3{
   padding-top:30px;
 }

 .address h4{
   padding-top:10px;
 }

/*Footer Styles */
footer {
  padding:10px;
}

.contact {
  margin-top:20px;
  height:200px;
  width: auto;
  text-align:center;
}

.copyright{
  margin: 20px;
  float: left;
}

2 Likes

This is what it looks like rendered.

Hey there, I think your website is looking really good honestly! I think you already recognised a big change that could be good would be media queries, and that’s something you can always come back to add once you’ve revisited that topic. Until then however, this may be a personal preference but I would say making some of the widths percentages instead of hard coding could be good. For example:

Here the width has been coded to 1200px, and so on my 1920 width screen it ends up sitting off to the left hand side. Changing this to be “width: 100%” makes it so that it always spans the top of the page no matter the size of screen. Of course this introduces it’s own issue with the nav text overflowing, however this is the kind of thing that can be solved using media queries to, for example, swap between a nav bar and a hamburger menu. There’s a few places throughout of hardcoded width that would definitely benefit from using percentages instead.

One other thing I think may be personal preference also, but I would use more commenting in my HTML and CSS to break things up. I find it makes the code easier to read and easier to locate particular sections, especially when a CSS file can get really big really quickly.

A couple quick things to specifically mention I do like, I like your changes to the fonts and colouring, it really feels like websites I’ve been on before to book an afternoon tea, very good choices! Also I like your use of classes over ids, I’ve seen a lot of projects using id tags a bit much and ending up with very similar stylings repeated 5 or 6 times, whereas using many classes lets you keep the CSS file quite succinct!

Overall I think it looks very good, and I think you should come back to it once you’ve researched more on the media queries, as it’d be interesting to see how you change it for a mobile viewport. I’m the same way with HTML and CSS in that they can get tiring much faster than JS and other more direct coding languages so I feel that. Great work!

1 Like

Oh my gosh thank you so much for your feedback. So nice to know I’m not alone with lack of patience with HTML/CSS! :partying_face: Yeah I can’t wait to learn how to hamburger !! Though I do see an advance to just being able to click and have you link to the section of the page your looking for … Though probably saves about one click.

I didn’t know percentages was the more pro touch. I guess that’s one aspect of the design brief I followed strictly. For sure agree that if it will help whatever I working on have better browser coping skills I’ll definitely do it going forward.

Comment-wise what would you recommend? I want to understand what your saying. I agree that large swathes of code isn’t always the most pleasing to read. I didn’t want to put too many comments and just did it off of general section. I thought my naming conventions would do some of the heavy lifting. Would it be worth while to be like for example :
<–! header–>
← ! logo →
← ! navigation →

The other optimization that I think might be useful for the tea cozy after optimizing for media sizes, and a possible hamburger menu, would be to set up a way for people to book their afternoon tea res. right on the site because I’m sure people would love that extra level of convenience .

Absolutely having one click would be nice, but I think on a mobile it’s also less of a big deal and saving the space can help make the experience more friendly anyway. For example I have the S20+, and so any webpages that I load that don’t have a mobile designed view usually take about 5 or 6 taps to try and tap the tiny nav links anyway!

For the resizing I think it’s about scope. When you’re designing a project like this where you maybe spend a few hours and move on, you don’t need to consider the case of mobile and resized screens and such. However definitely if you ever wanted to launch anything it would be a consideration, and I find percentage based widths just give that bit of added flexibility that allow you to avoid having too many media queries. However they do have their own drawbacks too, as there needs to be a defined width somewhere further up for the percentage to understand what it should be 80% of, for example.

For comments, the problem is it is entirely personal preference! Web design is a hobby of mine, but my actual job is data analysis, and sometimes you can end up with 5000 line long scripts that are restructuring and analysing whole decades of data! So when building those I comment pretty much everything I can call a small “section”. For example “This is where the data is cleaned of null values”, “This produces the graph for medicine uptake over time” etc.
HTML and CSS definitely don’t need this level of granularity but it’s about making it clearer for you and anyone you may be working on a project with. For example, my personal preference here:

/*Featured Tea Styles */
.featured {
  width: 1000px;
  height: auto;
}

.steeping {
  margin-top: 20px;
  margin-bottom: 5px;
  padding: 5px;
  text-align:center;
  position:relative;
  left: 140px;
}

.spacer{
  max-width: 1000px;
  margin: auto;
}

.row{
  display: inline-flex;
  flex-direction: row wrap;
  justify-content: space-around;
}

.flavor {
  background-color:black;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
}
.tea {
  margin-top: 50px;
  position: relative;
  left: 150px;
  right:150px;
}

.tea img {
  height:200px;
  width:300px;
}
 .tea figcaption {
  width:300px;
  text-align:center;
  font-weight:bold;
  padding: 5px;
}
 .tea h4 { 
  width:300px;
  text-align:justify;
  font-weight:bold;
  padding: 10px;
  margin-bottom: 10px;
}

Would be to have maybe a comment for .tea h4 to say “this is the styling for the featured tea descriptions” and for .flavor say “This is the container for featured teas” because I often find myself getting a bit lost navigating between the CSS and the HTML. But you may not need that to work better with it, it’s about finding your own development style also! Comments are those things that seem kinda annoying when learning and working with 100 line scripts, but when your code is getting to like even 600 lines plus they become really nice to have.

Booking sounds like a good challenge! If you haven’t learned forms already that will definitely help you with that, but you might also be interested in learning a framework such as Node for Javascript or Django for Python. These frameworks can really streamline a lot of the data collection and form process that would be in place for such a booking system (I personally use Django on my own website because I already had a background with Python). Definitely good next steps for a website like this, and it gives you something to aim for next.

1 Like

Again thanks so much for typing out such a thought-filled response !! I’m going ask for another indulgence S20+ do you mean Samsung/Android phone ?? Yeah you’re probably right I hate when what you have to tap is fractional and you’re forever zooming or holding your device at peculiar angles to get things to go. Yesterday I encountered- probably something wrong with the CSS- the most infuriating scroll of my life.

I am definitely aware than this is a beginner attempt and skill based learning project and I am probably spending inordinate amounts of time on a fictional tea franchise in Maine but after speaking to another CC member who’s given me load of helpful advice like yourself. … I have very little in way of a portfolio. So this a little bit of me trying to make a mountain out of mole hill to showcase my skillz. I’m finally at the media queries bit in the advanced CSS unit!!! So at least I’ll be able to add in that functionality relatively soon. I just really need a refresher with that. I wish I was as settled as yourself in a cozy government job crunching data in py. Though can imagine being part of the NHS in the middle of a pandemic is to say the least: unpleasant. Thanks for doing all the things.

I think you’re additionally right about descriptive comments or at least explaining more like this is the function that pushes the values into a new array for example because it might end up with a needless refactor or deleting it because they didn’t understand the functionality … Or the dreaded “I’ll finish this project later” and then you come back to your code and your just staring at it like :face_with_monocle: :fearful: :persevere: :face_with_monocle: (the four stages of what ??) I have learnt some of forms through CC though I wouldn’t assume I’ve learnt everything there is to know about them. I also have a little background in Py. so I probably should learn inner workings of Django as well… It seems my to do list is getting longer. Finishing CSS, Bootstrap. New CV, Docker, Django… :cowboy_hat_face: yeehaw!!!

Yes sorry I’m referring to the Samsung Galaxy S20+! One of those things where you can use things like Google Chrome DevTools to get a good idea of how a website looks on mobile, but nothing compares to just using one!

Honestly there’s nothing wrong with that at all, and it’s a different skillset for each that’s worth working on! If you were to go on to work in web or systems development you’ve had a mix of starting new projects, and working on old projects, so having the ability to come back to old projects and be able to jump in to make new changes and updates is a vital skill. You have tons of time to get a solid portfolio, and Codecademy certainly has a good few web projects to get you started, as well as anything you may think up along the way. So don’t worry so much about feeling you need to either pack everything into one project or rush to make a ton, there’s always time!

It’s been…interesting to say the least, I started right out of Uni in the NHS in February 2020 so I don’t really know what it’s like to not be in the NHS in a pandemic! It’s harrowing but you learn a lot on the job that’s for sure.

That’s the other big one, when you come back to something after even a couple weeks or so it’s like you’re a new programmer jumping in on someone elses project! So detailed comments can really help get yourself up to speed. I also like to have a text file associated with each project detailing what I was last doing and any future plans I thought of, but that’s just me and my bad memory!

If you already know a bit of Py I would absolutely recommend Django. It’s easy to pick up for python users, ties in very nicely with existing HTML, CSS and JS, and best of all there’s a course for it right here on Codecademy! Plus Django comes with some brilliant built in security meaning that you start off with way less vulnerabilities to worry about. For sure though I would recommend taking everything a step at a time, it’s veeery easy to get overwhelmed, one of the things you learn as you get better is how little you know :joy: But keep up, you’re already doing good stuff so you should be proud!

1 Like

Thank you for serving this piping hot tea! I nearly drove myself crazy with this project especially when it came to the locations section. I was able to take some part of your code and add to my own project. Thank you so so much for sharing!

3 Likes

OMG ! YOU MADE MY DAY :partying_face: So glad you could make use of something. As soon as I finish this silly functions unit and the birb project I’m going to media query the heck out of this.

Thanks for all the kind words :sunglasses: Hope you had a great weekend with at least some recharge because you’ve been doing some heavy healthcare lifting :muscle:

I will definately check out the Django on here I started to do the Py unit even though I have some of the base skills already sorted out. I did another course online for Py… but it was very buggy and didn’t even explain at times you needed to do type conversions for variables to get them to work. But I digress… I then I got distracted by Ruby and SQL …At any rate the Ruby course here is mildly frustrating and I am determined to finish out the final project even with the buggy bits working against me… Which is how I got trapped in the CSS Web in the first place.

Once I get the media queries in … after I finish the "curious ornithologist’ project which looks like your just making a dark mode theme?? … then Media queries are on. It also doesn’t look like the forums are going to be much help on the birb project :hatching_chick: did you finish this one ?

1 Like

My weekend was great thank you for asking, hope you had a good one too!

Yeah Ruby is something that’s never really appealed to me personally, not too sure why but it’s just never quite grabbed me like some other ones have! SQL is really fun though, I don’t know why I just love messing around with databases, it’s a strong thing to learn and is basically essential for any web dev you wanna do.

I’m afraid I’m not directly aware of that course, however I’d be happy to help you with it if I can if anything comes up you’re unsure of! There’s so many projects it can be hard to find and complete them all sometimes :joy:

2 Likes

No worries at all! I am dreading Javascript lessons but I have to bit the bullet and get through it! Thank you ever so much once again.

2 Likes

You absolutely got this !! :smiling_face_with_three_hearts: JavaScript is really not that bad … and besides which you get to use the semi colon like you’ve never used it before, The one I dread is C++ finicky ++ it should be called.

1 Like

I finally finished the CSS unit today at around 8am Pacific and reading back here and taking notes on our convo so I can make this new version shine !!! Excited to take another tilt at the old cozy hahah… :tea: The birb project never rendered… Like when I clicked dark-mode in the hamburger…it acted as though nothing was even there?? It seemed like a cool proj. because night-mode mean the main birb became an owl :owl: … and I have lots of thought and feelings about them :partying_face: and I tried it in several different browsers… Chrome flagged an error in CC’s JS … ah well…At least it was decent CSS variable practice…and I guess browser compatibility now that I think of it. :face_with_monocle:

Just wanted to say thank you for posting your solution. It taught me a lot about organizing my code for functionality and readability. I had completely forgot about the browser reset technique and how to use ‘href’ to jump around the page. I found that making a diagram on paper helped.

Just out of curiosity, which section of the webpage did you struggle with the most? For me, I couldn’t get the “location” section how I wanted it to be.

2 Likes

Ayy congrats, please do keep me updated on any progress you make with it! For chrome flagging an error, it’s entirely likely that that’s just an expected error from incompatibility! If you go onto most websites and open devtools you’ll see quite a few errors kicking about, generally there’s just so much going on that something will flag an error sometimes but it’s rarely catastrophic! Very frustrating about the project not rendering though, I haven’t tried that one yet so may need to give it a go myself too.

1 Like

To everyone who has posted on this thread - THANK YOU!!! I was on a coding streak and July/Aug really threw a wrench into my routine/goals, so I am coming back to this project after a month of not looking at code and felt completely lost.

There are some really awesome nuggets in this thread that gave me “duh!” or “ah-ha!” moments when looking back at my code so far.

Glad to have this awesome community to reach out to and am excited to work through the rest of this project.

Cheers!

3 Likes

The part I struggled with the most was getting the spacing for the Tea of the Month section because I added in the text and getting it to want to play nice was my challenge. The locations I just didn’t like that the image dimensions given were cutting it off so that was the only bit I had to play around with there. Right now: Trying to do a version two with a hamburger menu so current strugs: Navigation. I’ve almost got it but not quite yet,

1 Like