Tea Cozy Project

Hellooo,

I just finished mine :slight_smile:

take a look if you want!

https://ruben10520.github.io/teacozy.github.io/

Hi everyone,

I have 2 problems with this topic, I hope someone can help.

  1. In Tea of the Month section, the gutter between “Myrtle Ave Tea” and " Bedford Bizarre Tea" is larger than the others.
  2. When shrinking the window, the mission and locations background are not resized.

Github: GitHub - wtpbell/Tea_Cozy_Website: Flex Box Properties
Preview: Tea Cozy

Hi there!

  1. For this first problem, I want you to think about the differences between align and justify. Which will center align vertically, and which will center align horizontally?

  2. When you want a background-image to change responsively, there are certain properties you can use to achieve what you are looking for. Give Googling, “How to make responsive background images” a try and see what you can find.

Hello,

Thanks for throwing questions instead of giving me answers directly.

  1. regarding your first question, I do know the differences between align and justify and which will align vertically or horizontally. I just focus too much on justify-content = space-around, then struggling with how to make the space among the boxes equally.

  2. for 2nd question, I found solution already and did some tests with different solutions.

Thanks again~~

1 Like

Hi you might have already gotten past this, but the problem with “space-around” is it equally spaces items in the row they are in. So there would be different amount of space with rows with 2 items vs 3 items. it doesn’t really equalize the space for all items ( I hope you can understand what i mean…) It might be best to align it center and then adjust the gaps by margin.

Hello,

Thanks for your advice. I do understand the concept, now just need to do more practices.

1 Like

Here’s my solution. I re-wrote the page and css three times before i was happy that I was implementing the skills that I’ve learned so far.
I could improve my css by not separating some of the classes for different sections, but instead putting them in a generic .container class since it is re-used. Overall I’m happy with my implementation of flex-box knowledge so far.

Hello All :smiley:

I am learning the front-end Web course and I just finished the Tea Cozy Project Challenge. I found it really challenging and I have some questions as to what is the best practice with HTML and css going forward.

I learnt that HTML being the skeleton/ structure of a website, it is best practice to include all text and images in the HTML, and then the styling of said content to be done in css. I found it very difficult to style the background images in the project if they were linked in the HTML (You’ll see I commented out the images in my index.html) and styled in a linked css. I had more success adding and styling the background images in the css as background-images:

So this leaves me a bit confused, isn’t it better to rather have the images in the HTML instead of the css and if they are added in the HTML how does one style them in a separate css with flexbox? Any thoughts and comments are appreciated.

Here is my repo and here is my live solution.

Project solution, only header needs a little more work as it breaks on window resize :stuck_out_tongue:

Hello All

I am learning the front-end Web course and I just finished the Tea Cozy Project Challenge. I found it really challenging its not the best code i have written so far but if anyone has time . some review of the code would be very help full.

Thank you.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tea tazy</title>
    <style>
/*Universal styles*/
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  font-size: 22px;
  text-align: center;
  opacity: 0.9;
}

.container {
  display: flex; /*lets change to flexbox*/
}

/* header-section*/
#header {
  z-index: 1;
  border-bottom: 1px solid seashell; /*border as per specs*/
  align-items: center; /*align  flex items  center;*/
  height: 69px; /*height as per specs*/
  position: fixed; /*position as per specs*/
  width: 100%;
  justify-content: space-between;
  background-color: black;
}

img {
  height: 50px; /*height as per specs*/
  margin-right: 10px; /*margin right as per specs*/
}

nav a {
  text-decoration: underline; /* as per specs*/
  margin: 10px;
}

.main-container,
.mission,
.store,
.locations {
  margin: 0 auto;
}

h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 10px;
}

/*missions-section*/
.mission {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*hzkn6j*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA.); /*background-image per sepecs*/
  height: 700px; /* height per specs */
  width: 1200px;
}

.content {
  background-color: black;
  height: 100px;
  flex-direction: column;
  align-items: center;
  width: 1200px;
  padding-top: 20px;
  justify-content: space-between;
}

.content h4 {
  padding-bottom: 1%; /* padding according to specs */
}

/*store-section*/

.store {
  height: 700px;
  width: 1000px;
  text-align: center;
  padding-top: 70px;
}

.store-content {
  width: 1000px;

  padding-bottom: 10px;
}

.items {
  width: 1000px;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
}

.item img {
  display: block;
  width: 300px;
  height: 200px;
}

.item span {
  display: block;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}

/*location-section*/

.locations {
  height: 500px;
  width: 1200px;
  padding-top: 70px;
  background-size: cover;
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*hzkn6j*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA.);
}

.location {
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding-top: 15px;
}

.address {
  flex-direction: column;
  justify-content: space-around;
  height: 300px;
  width: 300px;
  background-color: black;
  opacity: 1;
}

/*contact section*/

#contact {
  height: 200px;
}

/*footer section*/

footer {
  text-align: left;
  margin-left: 20px;
}
</style>
  </head>
  <body>
    <!--header section-->
    <header class="container" id="header">
      <a href="#"
        ><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1tncrp1*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." alt="img-tea-cozy-logo" />
      </a>
      <nav>
        <a>Mission</a>
        <a>Featured Tea</a>
        <a>Locations</a>
      </nav>
    </header>
    <main class="main-container">
      <!--mission section-->
      <section class="container mission">
        <section class="container content">
          <h2>Our Mission</h2>
          <h4>
            Handpicked,Artisanally,Curated,Free Range,Sustainable,Small
            Batch,Fair Trade,Organic Tea
          </h4>
        </section>
      </section>
      <!--store section-->
      <section class="store">
        <section class="store-content">
          <h2>Tea of the Month</h2>
          <h4>Whats steeping at The Tea Cozy?</h4>
        </section>
        <section class="container items">
          <section class="item tea">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*a8x3ep*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." />
            <span>Fall Berry Blitz Tea</span>
          </section>
          <section class="item tea">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*a8x3ep*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." />
            <span>Spiced Rum Tea</span>
          </section>
          <section class="item donuts">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*a8x3ep*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." />
            <span>Seasonal Donuts</span>
          </section>
          <section class="item donuts">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*a8x3ep*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." />
            <span>Myrtle Ave Tea</span>
          </section>
          <section class="item tea">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1i60lae*_ga*NzQ5Nzg0MDUyLjE2OTA2OTgwNDg.*_ga_3LRZM6TM9L*MTY5MzY2NjYxMS41NC4wLjE2OTM2NjY2MTEuMC4wLjA." />
            <span>Bedford Bizzarre Tea</span>
          </section>
        </section>
      </section>
      <!--location-section-->
      <section class="locations">
        <h2>Locations</h2>
        <section class="container location">
          <section class="container address">
            <h3>Downtown</h3>
            <p>384 west 4th st</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
          </section>
          <section class="container address">
            <h3>East Bayside</h3>
            <p>38433 phishermens Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
          </section>
          <section class="container address">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second floor</p>
            <p>Portland, Maine</p>
          </section>
        </section>
      </section>
      <!--contact-section-->
      <section id="contact">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]</h5>
        <h5>917-55-8904</h5>
      </section>
      <!--footer-section-->
      <footer>
        <h5>copyright The Tea Cozy 2019</h5>
      </footer>
    </main>
  </body>
</html>

And here is my solution.

<!DOCTYPE html>
<html>
  <head>
    <title>Tea Cozy</title>
    <link href=".\resources\style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <div id="hLogo">
        <img src="./img/img-tea-cozy-logo.png" height="50px" />
      </div>
      <nav>
        <ul>
          <li>Mission</li>
          <li>Featured Tea</li>
          <li>Locations</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="slider">
        <div id="mission">
          <h2>Our Mission</h2>
          <h4>
            Handpicked, Atinsanally Curated, Free Range, Sustainable, Small
            Batch, Fair Trade, Organic Tea
          </h4>
        </div>
      </section>
      <section id="teaOfMonth">
        <h2>Tea of the Month</h2>
        <h4 id="subtitle">What's Steeping at The Tea Cozy?</h4>
        <div id="phx">
          <div id="phx-item">
            <img class="phx-photo" src="./img/img-berryblitz.jpg" />
            <h4 class="img-text">Fall Berry Blitz Tea</h4>
          </div>
          <div id="phx-item">
            <img class="phx-photo" src="./img/img-spiced-rum.jpg" />
            <h4 class="img-text">Spiced Rum Tea</h4>
          </div>
          <div id="phx-item">
            <img class="phx-photo" src="./img/img-donut.jpg" />
            <h4 class="img-text">Seasonal Donuts</h4>
          </div>
          <div id="phx-item">
            <img class="phx-photo" src="./img/img-donut.jpg" />
            <h4 class="img-text">Seasonal Donuts</h4>
          </div>
          <div id="phx-item">
            <img class="phx-photo" src="./img/img-bedford-bizarre.jpg" />
            <h4 class="img-text">Spiced Rum Tea</h4>
          </div>
        </div>
      </section>
      <section id="locations">
        <h2 id="locations-title">Locations</h2>
        <div id="location-content">
          <div class="locations-column">
            <h3>Downtown</h3>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
          </div>
          <div class="locations-column">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
          </div>
          <div class="locations-column">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <section id="f-top">
        <h2 id="f-title">Tea Cozy</h2>
        <h5 class="f-text">[email protected]</h5>
        <h5 class="f-text">917-555-8904</h5>
      </section>
      <section id="f-bottom">
        <p>copyright The Tea Cozy 2017</p>
      </section>
    </footer>
  </body>
</html>

* {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h2 {
    font-size: 32px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

p {

    font-size: 16px;
}

header {
    height: 69px;
    border-bottom: 1px solid seashell;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between
}

main{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

nav {
    display: inline-flex;;
}

li {
    display: inline-flex;
    text-decoration: underline;
}

.slider {
    background-image: url('../img/img-mission-background.jpg');
    height: 700px;
}

#locations {
    background-image: url('../img/img-locations-background.jpg');
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#teaOfMonth {
    width: 1000px;
    padding: 25px;
    display: block;
    justify-content: center;
    align-items: center;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
}

#mission {
    width: 1200px;
    padding: 15px;
}

#phx {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 1000px;
    flex-wrap: wrap;
}

.phx-photo {
    width: 300px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
}

.img-text {
    margin-top: 10px;
    margin-bottom: 20px;
}

#subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#locations-title {
    background-color: transparent;
    width: 1000px;
    margin-bottom: 15px;
}

.locations-column {
    opacity: 1;
    width: 300px;
    height: 200px;
}
.locations-column p,
.locations-column h3 {
    margin: 15px;
}

#location-content {
    display: flex;
    justify-content: center;
    gap: 40px;
    background-color: transparent;
}

#f-top {
    height: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

#f-title {
    margin-top: 10px;
}

.f-text {
    margin: 10px;
}
#f-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
}

Hello everyone,

Took me some time but finally finished it.
A very interesting exercice.
Do not hesitate to comment my humble work.
live page

code

TeaCozy

Hello everyone, this is my Tea Cozy Project Codecademy implementation.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<title>Off-Platform Project: Tea Cozy</title>
</head>
<body>
	<header>
		<h1>The Tea Cozy</h1>
		<img src="images/img-tea-cozy-logo.png" alt="logo">
		<nav>
			<ul>
				<li><a href="#About">Mission</a></li>
				<li><a href="#Main">Featured Tea</a></li>
				<li><a href="#Addresses">Location</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section id="About" class="mission">
			<div>
				<h2>Our Mission</h2>
				<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
			</div>
		</section>
		<section id="Main" class="monthTea">
			<h2>Tea of the Month</h2>
			<h4>What&apos;s Steeping at The Tea Cozy?</h4>
			<figure>
				<img src="images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea" />
				<figcaption>Fall Berry Blitz Tea</figcaption>
			</figure>
			<figure>
				<img src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea" />
				<figcaption>Spiced Rum Tea</figcaption>
			</figure>
			<figure>
				<img src="images/img-donut.jpg" alt="Seasonal Donuts" />
				<figcaption>Seasonal Donuts</figcaption>
			</figure>
			<figure>
				<img src="images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea" />
				<figcaption>Myrtle Ave Tea</figcaption>
			</figure>
			<figure>
				<img src="images/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea" />
				<figcaption>Bedford Bizarre Tea</figcaption>
			</figure>
		</section>
		<section id="Addresses" class="location">
			<h2>Locations</h2>
			<div>
				<h3>Downtown</h3>
				<p>
					384 West 4th St
					<br>
					Suite 108
					<br>
					Portland, Maine
				</p>
			</div>
			<div>
				<h3>Downtown</h3>
				<p>
					3433 Phisherman&apos;s Avenue
					<br>
					(North West Corner)
					<br>
					Portland, Maine
				</p>
			</div>
			<div>
				<h3>Oakdale</h3>
				<p>
					515 Crescent Avenue
					<br>
					Second Floor
					<br>
					Portland, Maine
				</p>
			</div>
		</section>

	</main>
	<footer>
		<div class="contact">
			<h2>The Tea Cozy</h2>
			<h5>[email protected]</h5>
			<small>917-555-8904</small>
		</div>

		<small>copyright The Tea Cozy 2023</small>
		
	</footer>
	
</body>
</html>
CSS
*{
	box-sizing: border-box;
	/* border: 1px solid rebeccapurple; */
}
body {
	font-family: Helvetica, sans-serif;
	font-size: 22px;
	color: seashell;
	background-color: black;
	opacity: 0.9;
	text-align: center;
}

h1 {
	display: none;
}

header {
	width: 100%;
	min-height: 69px;
	border-bottom: 1px solid seashell;
	position: fixed;
	background-color: black;
	top: 0px;
	z-index: 1;
}

header>img {
	height: 50px;
	margin: 10px;
	float: left;
}

nav {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 10px;
	float: right;
}

nav>ul {
	list-style: none;
}

nav>ul li {
	display: inline;
	padding: 5px;
}

nav a {
	color: seashell;
}

.mission {
	position: relative;
	top: 63px;
	height: 700px;
	width: 1200px;
	background-image: url("../images/img-mission-background.jpg");
	margin: 0 auto;
	display: flex;
	align-items: center;
	
}

.mission div {
	background-color: black;
	width: 100%;
}


.monthTea {
	position: relative;
	top:69px;
	width: 1000px;
	margin: 40px auto;
}

.monthTea figure {
	display: inline-block;
	flex-shrink: 1;
	margin: 0px 10px 10px 10px;

}

.monthTea figure img {
	width: 300px;
	height: 200px;
	margin-bottom: 10px;
}

.monthTea h2 {
	margin-top: 69px;
}


.location {
	position: relative;
	top: 69px;
	width: 1200px;
	height: 500px;
	background-image: url("../images/img-locations-background.jpg");
	margin: 0 auto;
}

.location h2 {
	position: relative;
	top: 69px;
	margin: 0 auto;
}

.location div {
	position:relative ;
	top: 69px;
	display: inline-block;
	background-color: black;
	width: 300px;
	margin: 15px 20px;
	opacity: 1;
	line-height: 2;
}

.location h3{
	margin-bottom: 0;
}

.location p {
	margin-top: 0;
}

footer {
	position: relative;
	top:69px;
}

.contact {
	margin: 0 auto;
	height: 200px;
}

footer>small {
	float: left;
	margin-left: 20px;
}

If you have any recommendations or comments about the implementation, I will gladly take your advice into account, thank you. I would especially like to get some advice on the Locations section and some advice on the correctness of my use of semantic tags and class naming.

Also, I managed to use Flexbox only at some blocks (

Hi, the tag should be inside the body. The hierarchy goes:

Hi all,

I just finished this project as well, if anyone would have a look, here it is:

Code: https://github.com/michal-has/TeaCozy/tree/main/tea_cozy_project
Live: Tea Cozy

Any comments are welcome :slight_smile:

1 Like

Bit of the struggle at first somehow ended up finishing it.

https://github.com/romeshl/Codecademy-Tea-Cozy.git

Web: Tea Cozy

Keen for any feedback. Cheers. :slightly_smiling_face: :v:

2 Likes

Good evening,

I’ve completed the Cozy Tea project, which you can find here. During the project, I made a note that I intended to incorporate media queries to adjust certain elements when the window is resized. Specifically, I plan to make some elements smaller using background-size: 100%, such as reducing the size of the pictures.

I would be grateful if you could provide any feedback on the project.

The repo: https://github.com/kenas/codeacademychallengecozytea

1 Like

Also couldn’t find “tea cozy” tag for this project on forum. I want to share my solution for this. Actually don’t know how bad is it, but still want to share.

here is a project live link:
My Website Style Guide (shalabyelectronics.github.io)

can you please help me with my code im near the mission section. and i annot seem to center my h2 and h4. i tried every thing please help me out. please explain me in a simple manner as im a commerce student and it is a bit difficult to grasp the subject

html code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cozy Tea</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="/img-tea-cozy-logo.png" alt="" srcset="">
            </div>
            <nav>
                <ul class="menu">
                    <li><a href="#mission">Mission</a></li>
                    <li><a href="#featured-tea">Featured Tea</a></li>
                    <li><a href="#location">Location</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section>
        <div class="box" id="mission">
            <div class="mission-wrapper">
                <h2>Our Mission</h2>
                <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum est, fugit quo saepe eaque suscipit sint alias! Quisquam.</h4>
            </div>
        </div>
    </section>
</body>
</html>

css code as follows

*{
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;

}
.logo img{
width: 150px;
padding-top: 10px;
padding-left: 10px;

}
.container{
display: flex;
justify-content: space-between;
border: 1px solid seashell;
height: 69px;
width: 100%;
box-sizing: border-box;
}

.menu{
display: flex;

}

.menu li {
list-style: none;
}

.menu li a {
padding: 10px;
}

.box{
margin: auto;

}

#mission {
height: 700px;
width: 1200px;
background-image: url(/img-mission-background.jpg);
display: flex;
align-items: center;
margin-bottom: 80px;
justify-content: center;
}

.mission-wrapper{
display: flex;
flex-direction: column;
align-content: center;
}
.mission-wrapper h2 .mission-wrapper h4{
padding: 0.6rem;
}Preformatted text

Hi there!

I can see that flex is being used, but there is an easier solution for centering text. Can you remember the CSS property used to horizontally align text within an element?