Looking for constructive criticism: Tea Cozy practice project

Hi!
I just finished, the Tea Cozy practice project and would be really happy if someone could look at it and give some feedback.
I worked on it for a really long time as I did not properly understand the flexbox from the start. I tried to make it as close as possible to the reference, but there are still a few differences and deficiencies.

<!DOCTYPE html>
<html>
<head>
    <title>Tea Cozy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="tea cozy logo">
        <nav>
            <ul>
                <li><a href="#mission">Mission</a></li>
                <li><a href="#tea-of-the-month">Featured Tea</a></li>
                <li><a href="#locations">Locations</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="mission"> <!-- Here -->
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg" alt="background">
            <div class="front-text">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div> <!-- class = front-text -->
        </section> <!-- id = mission -->
        <section id="tea-of-the-month">
            <div class="title"> <!-- Here -->
                <h2>Tea of the Month</h2>
                <h4>What's Steeping at The Tea Cozy?</h4>
            </div> <!-- class = title -->
            <div class="tea-photos">
            <div class="tea">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                <p>Fall Berry Blitz Tea</p>
            </div> <!-- class = tea -->
            <div class="tea">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                <p>Spiced Rum Tea</p>
            </div> <!-- class = tea -->
            <div class="tea"> <!-- class = tea -->
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="Seasonal Donuts">
                <p>Seasonal Donuts</p>
            </div> <!-- class = tea -->
            <div class="tea">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                <p>Myrtle Ave Tea</p>
            </div> <!-- class = tea -->
            <div class="tea">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="Bedford Bizzare Tea">
                <p>Bedford Bizzare Tea</p>
            </div> <!-- class = tea -->
            </div> <!-- class = tea-photos -->
        </section> <!-- id = tea-of-the-month -->
        <section id="locations">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg" alt="Locations background">
            <h2>Locations</h2>
                <div class="content-wrapper">
            <div class="location-address"> 
                <ul>
                    <li><h3>Downtown</h3></li>
                    <li>384 West 4th St</li>
                    <li>Suite 108</li>
                    <li>Portland Maine</li>
                </ul>
            </div>
            <div class="location-address">
                <ul>
                    <li><h3>East Bayside</h3></li>
                    <li>3433 Phisherman's Avenue</li>
                    <li>(Northwest Corner)</li>
                    <li>Portland, Maine</li>
                </ul>
            </div>
            <div class="location-address">
                <ul>
                    <li><h3>Oakdale</h3></li>
                    <li>515 Crescent Avenue</li>
                    <li>Second Floor</li>
                    <li>Portland, Maine</li>
                </ul>
            </div>
            </div>
        </section> <!-- id = locations -->
         <section class="contact">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
         </section>
        </main>
         <footer>
            <p>copyright The Tea Cozy 2017</p>
         </footer>
</body>
</html>
body {
    background-color: black;
    color: seashell;
    font-family: Helvetica;
    font-size: 22px;
    text-align: center;
    
}

main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
/* Header */
header {
    position: fixed;
    background-color: black;
    top: 0px;
    height: 69px;
    border-bottom: 1px solid seashell;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

header img {
    height: 50px;
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin-right: 20px;
}

nav ul li {
    margin-right: 10px;
}

a {
    color: seashell;
}

nav ul li a:active{
 color: gray;
 text-decoration: none;
}

a:visited {
    color: seashell;
}

/** Mission **/
#mission {
    position: relative;
    height: 700px;
    width: 1200px;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#mission .front-text {
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 140px;
}

/** Tea of The Month **/
#tea-of-the-month {
    margin-top: 100px;
    width: 1000px;
}

.title {
    display: flex;
    justify-content: center;
    flex-direction: column; 
}

.tea-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tea {
    margin: 0 10px;
}

.tea img {
    height: 200px;
    width: 300px;
}

/** Locations **/
#locations {
    position: relative;
    margin-top: 50px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


#locations img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}


.content-wrapper {
    z-index: 1;
    display: flex;
    flex-direction: row;
    margin: 10px;
    align-items: center;
}

#locations h2 { 
    text-align: center;
    margin-bottom: 20px;
    z-index: 1;
}

.location-address {
    display: flex; /* Make it a flex container */
    flex-direction: row;
    justify-content: center; /* Horizontally center its children */
    gap: 20px;
}

.location-address ul{
    background-color: black;
    padding: 10px;
    margin: 15px 20px;
    color: white;
    line-height: 75px;
    width: 300px;
    height: 300px;
    list-style-type: none;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.location-address ul h3{
    margin: 0;
}

/** Contact **/
.contact {
    height: 200px;
    z-index: 1;
    background-color: black;
}

/** Footer **/
footer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    background-color: black;
    z-index: 1;
    bottom: 0px;
}

footer p {
    margin-left: 20px;
    z-index: 1;
}

Hi there!

Welcome to the forums!

You did a great job getting the design to look as close to the spec as possible with the solution provided. However, there appears to be overly complicated CSS. If I remember correctly, Tea Cozy came shortly after we learned about flex, and a lot of learners (myself included when I first completed it) overuse flex in this project. I believe this is also the first “large” project and can be deceitfully complicated.

I’ll go through each section and give feedback on how the design could have been easier to accomplish.

The header is fine. flex is commonly used to put space between the elements. But what I did notice was that the logo has three separate margin applications where the shorthand could have been used instead.

header img {
  height: 50px;
  /* Instead of
  margin-left: 10px;
  margin-top: 8px;
  margin-bottom: 8px; 
  use */
  margin: 8px 0 8px 10px
}

For the hero, it can be tricky working with absolute elements. You did a good job getting it to work, but it could have been much easier if background-image was used instead. This way, you could go from this:

/** Mission **/
#mission {
    position: relative;
    height: 700px;
    width: 1200px;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#mission .front-text {
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 140px;
}

To this:

/** Mission **/
#mission {
  margin: 70px auto 0;
  max-width: 1200px;
  height: 700px;
  background: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg');
  background-position: center center;
  display: flex;
  align-items: center;
}

#mission .front-text {
  width: 100%;
  background: black;
}

For the Tea of the Month section, I can see that the titles are wrapped in a flexed div. This is not necessary, as h1-h6 elements are block-level, which means that they always start on a new line. If the CSS for .title is removed, the design looks exactly the same. Great job with the product section. I see a lot of people asking for help with it. My only suggestion would be to use max-width and not width, so it’s responsive.

The locations section is another spot where background-image would have made the design less complicated. I see that it’s also creating problems for the footers. However, simplifying the CSS like the above would fix the design issues as shown.

Lastly, I have general feedback on the alternative text for the images. We want our images to be as descriptive as possible. So, for example, “Fall Berry Blitz Tea” could instead be, “An overhead photo of a cup of fallberry blitz tea.” This way, users with failed images or users utilizing screen readers receive the same experience as those who can see the images.

But overall, you did a great job completing this project! Many struggle with it and you should feel proud of your work. I encourage you to come back to it in the future to optimize the code and make it responsive.

Keep it up!

1 Like