Tea Cozy Project Code Review

Hey there! At first sight this project looked like a piece of cake and I didn’t really expect it to take so long.

Here’s the specs:
Codecademy’s specs

This is what I’ve done:
Mine project

And here’s the code:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="resources/css/styles.css">
    <title>Tea Cozy</title>
</head>
<body>

    <!-- HEADER -->

    <header>
        <img src="resources/images/logo.webp" id="logo" alt="Tea Cozy logo">
        <nav>
            <a href="#mission">Mission</a>
            <a href="#featured">Featured Tea</a>
            <a href="#locations">Locations</a>
        </nav>
    </header>

    <!-- MISSION -->
    <section class="mission">
          
        <img src="resources/images/img-mission-background.webp" id="mission" alt="Upper view of a jar with fruit tea">
        <div class="text">      
            <h2 class="txt">Our Mission</h2>
            <h4 class="txt">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>    
     </section>

<!-- FEATURED -->

    <section id="featured">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        <div class="featured">
            <div class="container">
                <img src="resources/images/img-berryblitz.webp" alt="Upper view of a mug with tea">
                <h4>Fall Berry Blitz Tea</h4>
            </div>
            <div class="container">        
                <img src="resources/images/img-spiced-rum.webp" alt="A box of tea">
                <h4>Spice Rum Tea</h4>
            </div>
            <div class="container">       
                <img src="resources/images/img-donut.webp" alt="A donut">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="container">       
                <img src="resources/images/img-myrtle-ave.jpg" alt="A cup of tea">
                <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="container">      
                <img src="resources/images/img-bedford-bizarre.jpg" alt="A cup of tea">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
    </section>

    <!-- LOCATIONS -->

    <section id="locations">
        <div class="locations">
            
            <div class="boxes">
                    <div class="container-location">
                        <h2>&nbsp</h2>
                         <div class="box">
                            <h3>Downtown</h3>
                            <p>384 West 4th St</p>
                            <p>Suite 108</p>
                            <p>Portland, Maine</p>
                         </div>
                    </div>
            
                     <div class="container-location">
                        <h2>Locations</h2>
                        <div class="box">
                            <h3>East Bayside</h3>
                            <p>3433 Phisherman's Avenue</p>
                            <p>(Northwest Corner)</p>
                            <p>Portland, Maine</p>
                        </div>
                     </div>

                     <div class="container-location">
                         <h2>&nbsp</h2>
                         <div class="box">
                            <h3>Oakdale</h3>
                            <p>515 Crescent Avenue</p>
                            <p>Second Floor</p>
                            <p>Portland, Maine</p>
                         </div>
                    </div>

           </div>
        </div>
    </section>

<!-- FOOTER -->

    <footer>
        <div class="contact">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>
        <h5 class="copy">copyright The Tea Cozy 2017</h5>
    </footer>
</body>
</html>

CSS

html {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: rgb(255, 245, 238, 0.5);
    background-color: black;
    opacity: 0.9;
   
   
}


body {
  box-sizing: border-box;
  margin: 0;
  text-align: center;
  
}


header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid rgb(255, 245, 238, 0.5);
    display: inline-flex;
    background-color: black;

    align-items: center;
    justify-content: space-between;  
}


nav {
    display: inline-flex;
    margin-right: 10px;
    width: 25%;
    justify-content: space-around;
    
}

nav a {
    color: rgb(255, 245, 238, 0.5);
    text-decoration: underline;  
}

.featured {
    display: inline-flex;
    width: 1000px;
    flex-wrap: wrap;
    justify-content: center;
   
}

.featured img {
    height: 200px;
    width: 300px;
    margin: 0 15px;
}

.featured h4 {
    margin-top: 10px;
    margin-bottom: 30px;
}


.mission {
    position: relative;
}

.text {
   
    background-color: black;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    z-index: 3;
}

.txt {
  
    margin: 10px;
}

#logo {
    height: 50px;
    opacity: 0.5;
    margin: 10px;
}

#mission {
    object-position: top;
    object-fit: none;
    height: 700px;
    width: 1200px;
    margin: 0 0 50px 0;
}

#locations {
    display: flex;
    justify-content: center;
    margin-top: 40px;

}
.locations {
    
    height: 500px;
    width: 1200px;
    background-image: url(../images/img-locations-background.webp);
    background-position: 50% 25%;
    
}

 /* .locations h2 {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translate(-50%);
}  */

.boxes {
    display: flex;
    justify-content: center;
    /* align-items: baseline; */
    margin-top: 40px;
    width: 100%;
    height: 100%;
    /* flex-wrap: wrap;
    margin: 0; */
}

 .boxes h2 {
     margin-bottom: 15px;
 }



 .box h3 {
     margin-top: 0;
 }

.box {
    width: 300px;
    height: 280px;
    line-height: 2;
    background-color: black;
    margin: 0 20px;
    
}

.contact {
    height: 200px;
}

.contact h2 {
    margin-top: 10px;
}

.copy {
    text-align: left;
    margin-left: 20px;
}

:target {
    scroll-margin-top: 70px;
}

You can also check it on GitHub


Traditionally here’s a log of things that I’ve learned during this project:

  1. If you need to make an image as your background for the text you should use background-image: property in your css. This will allow you to allign text inside of the image with flexbox. Sounds pretty obvious but it took me too long to figure it out so the first image in mine code is the hard one and I just left it as it is to be some kind of a monument of my stupidity :slight_smile:
  2. Basically the stupidity took me so long and that's what I've figured out: you can use the img tag above your text in html then set image's position: relative; and text's position: absolute; and then you just use top/down/right/left properties in your text{} ruleset to align image as you would like. Main reason why you set the image to be relative is then you can set properties top: 50%; and left: 50%; to allign your text RELATIVELY to the image. If you don't set the image to relative you'll get your text to be alligned relatively to the viewport (screen basically). This is not right way to do this but you can use these somewhere else.
  3. The IMPORTANT one. If your header is fixed to be at the top when the page is scrolling (header{position: sticky; top: 0;}) and then if you use your nav links set to the target on the same page it will scroll to that part of the page BUT start of the target section would be underneath the header as if there's no header. To avoid that in your css you can set :target { scroll-margin-top: 70px; } (70px just because mine header was 70px height you can use any number you need) and it will scroll perfectly to the part of the page you need.
  4. I’m pretty sure I forgot lot of things 'cause the project was done couple of days ago but these are main points.

    Feel free to leave Code Review.

    Thank you for your attention :slight_smile:

1 Like

And

  1. If you set anything to be width: 100vw; /* vw means viewport width */ then when your page extends to the point when the scroll bar at the right side appears then also scroll bar at the bottom will appear (which scrolls left-right) because your screen doesn’t fit the content anymore because of the scroll bar on the right. Better use width: 100%; in this case it will adjust the content to the page size.