The Tea Cozy - Project Review

Hi All,

I just finished the Tea Cozy project and would like to know if anyone has some advice on anything I can be doing better? I must admit this one had me scratching my head somewhat! The site seems to work perfectly in full screen mode, but when I change to phone screen size using Chrome Dev Tools some aspects seem to align to the left instead of centrally. I cant work out why! Any help massively appreciated!

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">
        <title>Tea Cozy</title>
        <link rel="stylesheet" href="Resources/styles.css">
    </head>
    <!--Top Bar of the Website-->
    <header>
        <!--Tea Cozy Logo Component-->
        <div class="Banner">
            <div class="Logo Container"><img src="Resources/Images/Logo.png" alt="Tea Cozy Logo"></div>
            <div class="Nav Container">
                <nav>
                    <ul>
                        <li><a href="#">Mission</a></li>
                        <li><a href="#">Featured Tea</a></li>
                        <li><a href="#">Locations</a></li>
                    </ul>
            </nav>
            </div>
        </div>
    </header>
    <body>
        <!--Mission Section-->
        <section>
            <div class="Mission">
                <div class="Container">
                    <h2>Our Mission</h2>
                    <h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
                </div>
            </div>
        </section>
        <!--Tea of the month Section-->
        <section>
            <div class="TOTMHead">
                <h2>Tea of the Month</h2>
                <h4>What's sleeping at the Tea Cozy?</h4>
                </div>
            <div class="TOTM">
                <div class="Container Berryblitz">
                    <img src="Resources/Images/Berryblitz.jpeg" alt="Berryblitz">
                    <h4>Berryblitz</h4>
                </div>
                <div class="Container Spiced-Rum">
                    <img src="Resources/Images/Spiced-Rum.jpeg" alt="Spiced-Rum">
                    <h4>Spiced-Rum</h4>
                </div>
                <div class="Container Donut">
                    <img src="Resources/Images/Donut.jpeg" alt="Donut">
                    <h4>Donut</h4>
                </div>
                <div class="Container Myrtle-Ave">
                    <img src="Resources/Images/Myrtle-Ave.jpeg" alt="Myrtle-Ave">
                    <h4>Myrtle-Ave</h4>
                </div>
                <div class="Container Bedford-Bizzare">
                    <img src="Resources/Images/img-bedford-bizarre.jpg" alt="Bedford-Bizzare">
                    <h4>Bedford-Bizzare</h4>
                </div>
            </div>
        </section>
        <!--Locations Section-->
        <section>
            <!--Parent FlexBox Element-->
            <div class="Locations">
                <!--Child Element-->
                <div class="Container TextBox">
                    <h3 class="firstloc">Downtown</h3>
                    <h3 class="secondloc">384 West 4th Street</h3>
                    <h3 class="thirdloc">Suite 108</h3>
                    <h3 class="fourthloc">Portland, Maine</h3>
                </div>
                <!--Child Element-->
                <div class="Container TextBox">
                    <h3 class="firstloc">East Bayside</h3>
                    <h3 class="secondloc">3433 Phishermans Avenue</h3>
                    <h3 class="thirdloc">Northwest Corner</h3>
                    <h3 class="fourthloc">Portland, Maine</h3>
                </div>
                <!--Child Element-->
                <div class="Container TextBox">
                    <h3 class="firstloc">Oakdale</h3>
                    <h3 class="secondloc">515 Crescent Avenue</h3>
                    <h3 class="thirdloc">Second Floor</h3>
                    <h3 class="fourthloc">Portland, Maine</h3>
                </div>
            </div>
        </section>
        <!--Final Section-->
        <section>
            <div class="About">
                <div class="Container">
                    <h2>The Tea Cozy</h2>
                    <h3>[email protected]</h3>
                    <h3>917-555-8904</h3>
                </div>
            </div>
        </section>
    </body>
    <footer>
        <h3 class="copyright">copyright The Tea Cozy 2017</h3>
    </footer>
</html>

CSS:

/*Globally applicable Rules*/
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: black;
    font-family: Helvetica, sans-serif;
    color: seashell;
}
h2{
    font-size: 40px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}
h4{
    font-size: 22px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.Container{
    display: flex;
    align-items: center;
}

/*The Header Component of the Website*/
.Banner{
    position: fixed;
    display: flex;
    height: 69px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: black;
}
header .Container{
    height: 50px;
    width: auto;
}
header img{
    height: 50px;
}
.Logo{
    margin-left: 10px;
}
nav ul{
    list-style: none;
}
nav li{
    display: inline;
    padding: 10px;
}
/*The Mission section of the Website*/
.Mission{
    height: 700px;
    width: 1200px;
    display: flex;
    background-image: url(../Resources/Images/background.jpeg);
    background-repeat: no-repeat;
    margin: auto;
    align-items: center;
    flex: 1 1 auto;
}

.Mission .Container{
    width: 100%;
    flex-direction: column;
}

/*Tea of the Month section of the Website*/
.TOTMHead{
    display: flex;
    height: auto;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    width: auto;
 }

.TOTM{
    margin-top: 40px;
    width: 1200px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    flex: 1 1 auto;
}

.TOTM .Container{
    height: 240px;
    width: 300px;
    display: flex;
    margin: 10px;
    flex-direction: column;
 }

.Berryblitz img, .Spiced-Rum img, .Donut img, .Myrtle-Ave img, .Bedford-Bizzare img{
    height: 200px;
    
}

/*Locations section of the Website*/
.Locations{
    height: 500px;
    width: 1200px;
    display: flex;
    background-image: url(../Resources/Images/Locations.jpeg);
    background-repeat: no-repeat;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.Locations .TextBox{
    height: auto;
    width: 300px;
    display: flex;
    margin: 20px;
    flex-direction: column;
}

h3.firstloc{
    font-weight: bold;
    margin-top: 30px;
}

h3.secondloc, h3.thirdloc, h3.fourthloc{
    font-size: 15px;
    font-weight: 300;
    margin-top: 40px;
    margin-bottom: 30px;
}

/*About section of the Website*/
.About{
    height: 200px;
    width: auto;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.About .Container{
    height: 200px;
    width: auto;
    display: flex;
    flex-direction: column;
}

.About h2{
    font-weight: 400;
    font-size: 16;
    margin-top: 15px;
    margin-bottom: 0px;

}

.About h3{
    font-weight: 400;
    font-size: 14;
    margin-top: 30px;
}

/*Footer Styling*/
.copyright{
    margin-left: 20px;
    font-weight: 200;
    font-size: 12px;
}

Hi, there!

Real quick, I just noticed that you have your <header> and <footer> outside of your body. The browser will fix it automatically (I think, at least in most cases), but anything you want displayed on your page should always be between your two <body> tags. :slight_smile:

Now, what I think you might find useful is using max-width instead of width for your containers. This will allow your containers to shrink an grow when the page is re-sized, and they will stop growing at the indicated max-width parameter.

I recommend you also check out W3’s information of creating responsive images and background images: responsive images

Those are just some things to check out, but I encourage you to experiment!

Hope this helps,
Happy coding!

Thanks for the response! Ah thanks for pointing that out, I will make sure not to make the mistake in the future. I’ll also have a play around with the max-width and see how it helps!

2 Likes

Here is my completed version of the project.
I want to say that I had a lot of challenging moments and good moments once something not displaying correctly was “fixed”, to realizing 2/3 of my styling that the site was not responsive when shrinking the browser :smile: Thanj frustration struck again. But once again the loop went from bad to good.
P.S. The project is in Git Hub.
https://krakozhia.github.io/

2 Likes

Hello everyone, here’s my version of the site, i fixed some things during the process, passing from a site only for desktop to make it (i think so) fully responsive for mobiles too…
Open for some constructive feedback!

3 Likes

Hi there everyone, I just finished my tea cozy project. Live site - Tea Cozy

Code on this - GitHub - gira1992/Tea-Cozy. Open to feedback :slight_smile: