The Tea Cozy project - Review Code Please!

Get Help CSS
#1

Hi friends!

Just finished the Tea Cozy project after 3 days of struggling. Would be very grateful for your feedback. Still not sure if the structure is ok.

One thing that I couldn’t do is pictures’ positioning in “Featured Tea” section: in the last (second) row pictures supposed to be closer to the cross axis so the space between them is equal to the space between items in the 1st row. I tried all kinds of wrapping, justify-content etc. but still couldn’t make it.

And the other one is background-image in “locations” section. The height is indicated as 500px and the width on the design spec looks to be equal to the first background-image which is 1200px. But in this case the image looks very stretched, - not like displayed on the design specs.

Again, would be grateful for any kind of feedback.

Many thanks!

<!DOCTYPE html>
<html>
    <head>
        <title>Teacozy</title>
        <link href="recources/css/tea2style.css" type="text/css" rel="stylesheet">
    </head>
<!--Section 1. Header-->
    <header>
        <img src="recources/photos/img-tea-cozy-logo.webp">
        <nav>
            <a href="#mission">Mission</a>
            <a href="#featured">Featured Tea</a>
            <a href="#locations">Locations</a>
        </nav>
    </header>
    <body>
<!--Section 2. Mission-->
        <div id="mission">
            <div id="mission-head">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
<!--Section 3. Featured Tea-->
        <div id="featured">
            <h2>Tea of the Month</h2>
            <h4>What's steeping at The Tea Cozy?</h4>
            <div id="pics">
                <div class="types">
                    <img class="tea" src="recources/photos/img-berryblitz.jpg">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="types">
                    <img class="tea" src="recources/photos/img-spiced-rum.webp">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="types">
                    <img class="tea" src="recources/photos/img-donut.webp">
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class="types">
                    <img class="tea" src="recources/photos/img-myrtle-ave.jpg">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="types">
                    <img class="tea" src="recources/photos/img-bedford-bizarre.webp">
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </div>
<!--Section 4. Locations-->
        <div id="locations">
            <h2>Locations</h2>
            <div id="block">
                <div class="container">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="container">
                    <h3>East Bayside</h3>
                    <p>3433 Pisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="container">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>
<!--Section 5. Contacts-->
        <div id="contacts">
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>
    </body>
<!--Section 6. Footer-->
    <footer>
        <h5>copyright the Tea Cozy 2017</h5>
    </footer>
</html>

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

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

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

nav {
    align-items: center;
}

nav a {
    margin: auto 10px;
    color: seashell;
}

#mission {
    height: 700px;
    width: 1200px;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-size: cover;
    display: flex;
    margin: auto auto;
    justify-content: center;
    align-items: center;
}

#mission-head {
    background-color: black;
    width: 100%;
}

#mission-head h2, h4 {
    line-height: 0.5;
}

#featured {
    width: 1000px;
    margin: auto auto;
    }

#pics {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.types {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: auto auto;
}

.tea {
    width: 100%;
    height: 200px;
}

.types h4 {
    margin-top: 10px;
}

#locations {
    height: 500px;
    width: 1200px;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto auto;
}

#locations h2 {
    margin-bottom: 15px;
}

#block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
}

.container {
    width: 300px;
    margin: 0px 40px;
    background-color: black;
}

#contacts {
    height: 200px;
    margin: auto auto;
}

footer h5 {
text-align: start;
margin-left: 20px;
}
1 Like
#2

Hey! Im no professional but from my 2 months experience coding here is my feedback:

  • In the header there should be a meta tag to ensure the webpage fits devices all the same. It would look like this:

  • It is advised not to use lots of id’s for the sake of specificity and other reasons. You can google to look into why its not advsed.

  • Your h2 element with “Our Mission” inside should be an H1 tag because its the main heading. I assume you used h2 for the font size but you can resize the h2 tag inside of your css. Its also for accessability(screen readers) and SEO reasons. Styling should only be dealt with in your css folder. I presume thats also why the contact information in the footer is also in heading tags. They should not be, rather put them in tags or

    tags.

Thats all from me. Great work completing this project! :slight_smile: I’d be happy to answer any questions

#3

Hi! Thanks a lot for your feedback!

1 Like