Tea Cozy Project

What’s good.

My take on the Tea Cozy project.

Looking for any feedback on how I could’ve done this using less code and more efficiently.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link href="./resources/css/teaCozy.css.css" rel="stylesheet">
    </head>
    <body>
        <header class="header">
            <img src="./resources/img-tea-cozy-logo.png" height="50"/>
            <nav class="navbar">
                <a href="#mission">Mission</a>
                <a href="#tea">Featured Tea</a>
                <a href="#locations">Locales</a>
            </nav>
        </header>

        <div class="mission">
        
            <article>
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic tea</h4>
            </article>

        </div>

        <div class="the-tea">
            <p>Tea of the Month</p><aside>What's Steeping at the Tea Cozy?</aside>

            <Section class="tea-images">

            <figure><img src="./resources/img-berryblitz.jpg" height="200" width="300"/>
            <figcaption>Fall Berry Blitz Tea</figcaption></figure>

            <figure><img src="./resources/img-spiced-rum.jpg" height="200" width="300"/> <figcaption>Spiced Rum Tea</figcaption></figure>

            <figure><img src="./resources/img-donut.jpg" height="200" width="300"/><figcaption>Seasonal Donuts</figcaption></figure>

            <figure><img src="./resources/img-myrtle-ave.jpg" height="200" width="300"/><figcaption>Myrtle Ave Tea</figcaption></figure>

            <figure><img src="./resources/img-bedford-bizarre.jpg" height="200" width="300"/><figcaption>Bedford Bizarre Tea</figcaption></figure>
            
            </Section>

        </div>
        
        <div class="the-locations" >
            <h2>Locations</h2>

            <Section class="locales">
            <article>
                <h3>Downtown</h3>
                <p>384 West St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </article>

            <article>
                <h3>East Bayside</h3>
                <p>3433 Phiserman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </article>

            <article>
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </article>

            </Section>
        </div>

        <div class="the-footer">
            <h3>The Tea Cozy</h3>
            <p>[email protected]<p>
            <p>917-555-8904</p>
        </div>

        <p id="copyright">copyright The Tea Cozy 2017</p>

    </body>
</html>

CSS:

/* Body */
body {
    background-color: black;
    opacity: 0.9;
    color: seashell;
    font-size: 22px;
    font-family: Helveitca;
}

/* Header */
.header {
    height: 69px;
    border-bottom: 1px solid seashell;
    position: fixed;
    background-color: black;
    display: flex;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 100;
}

img[src*='logo'] {
    height: 50px;
    margin: 10px 1350px 10px 10px;
}

.navbar {
    display: inline-flex;
    align-items: center;
    float: right;
}

.navbar a {
    text-decoration: underline;
    margin: 0px 10px;
}

/* Mission */

.mission {
    margin: 0px;
    margin-bottom: 100px;
    text-align: center;
}

.mission article {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1067drl*_ga*MTMzMzU4ODc5Mi4xNzA0ODMxOTkw*_ga_3LRZM6TM9L*MTcwNTQ0MjQxMy4xNS4xLjE3MDU0NDI0NjcuNi4wLjA.);
    width: 1000px;
    height: 700px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.mission h2, .mission h4 {
    background-color: black;
    width: 100%;
}

.mission h2 {
    position: relative;
    top: 150px;
    padding: 10px;
}

.mission h4 {
    position: relative;
    bottom: 165px;
    padding: 10px;
}


/*  Teas  */

.the-tea  {
    width: 100%;
    text-align: center;
    margin-bottom: 100px;
}

.the-tea figcaption {
    margin-top: 10px;
}

.tea-images {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
}

/* Locales */

.the-locations {
    width: 100%;
    text-align: center;
}

.the-locations h2 {
    position: relative;
    top: 200px;
    color: whitesmoke;
}

.locales {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*gosb4a*_ga*MTMzMzU4ODc5Mi4xNzA0ODMxOTkw*_ga_3LRZM6TM9L*MTcwNTQ0MjQxMy4xNS4xLjE3MDU0NDI0NjcuNi4wLjA.);
    width: 1200px;
    height: 700px;
    margin: 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}   

.the-locations article {
    background-color: black;
    width: 300px;
    margin: 0px 40px 0 40px;
    opacity: 1;
}

/* Footer */
.the-footer {
    width: 100%;
    text-align: center;
    margin-bottom: 100px;
}

.the-footer p {
    margin-top: 30px;
}

#copyright {
    margin-left: 20px;
}

It looks good. My one point of feedback would be to consider the trade off between using the least amount of code and writing maintainable code. This means it is easy for you to come back in 3 months, or 6 months, or a year later and look at the code and quickly understand what is happening. Not only does this help you, but if someone on a team that you are on needs to touch your code, they can quickly understand how you have things setup. This article has some good tips for this:

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.