Tea Cozy Project - Feedback and Critique

Hi all,

Finally finished my Tea Cozy Off-Platform project. Took me a while since I am new to the coding world and figuring out the right methods was mainly trial and error. I welcome any feedback or critique that anyone has!

See website here.
See files here.

Thanks!

1 Like

It looks great, well done for completing it! :clap:

The only bit of feedback I would have is this:

    <head>
        <link href="./styles.css" rel="stylesheet">
        <title>Tea Cozy</title>
        <header class="fixed-head">
            <img class="logo"
                 src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"
                 alt="Tea Cozy Logo">
            <nav class="crumbs">
                <ul>
                    <li class="crumb"><a href="#mission">Mission</a></li>
                    <li class="crumb"><a href="#tea">Featured Tea</a></li>
                    <li class="crumb"><a href="#location">Locations</a></li>
                </ul>
            </nav>
        </header>
    </head>

As you can see in the code snippet you currently have your site’s navbar inside of the <head/>. The <head/> should only be used to contain things like metadata, titles, links to external resources/stylesheets etc, it should not contain tags that you want to be part of the main visible site. Everything you want to be displayed actually on the site (including a <header/>) should be in the <body/> tag, so I would suggest moving it down into there :slightly_smiling_face: .

Also, you’ve used semantic tags (figure, section etc) really well, which is awesome for accessability, great job!

2 Likes

Makes sense. So basically just and inside the and then the element can be a separate section, correct?

1 Like

Yup you would want to have your <header/> as a tag inside of the <body/>, although seeing as <header/> is already fairly semantic you wouldn’t have to wrap it inside of a <section/> and could just have it by itself (most likely at the very top of the body) :smile:

1 Like

Ok so just to clarify for myself. Anything that is going to be content (i.e. header, navigation, the rest of the website) goes inside the and then then everything else that is relevant to the “behind-the-scenes structure” of the site (fonts, stylesheets, titles) is in the . Just want to confirm with someone else who knows what they’re talking about lol

1 Like

That’s right yeah! As you said all content and everything that the user should see goes in the body while the “meta” behind the scenes stuff (linking scripts/stylesheets titles, etc) goes in the head :slightly_smiling_face:

1 Like

10-4. Changed it in my saved file and in the Git files. Thanks for the help!

1 Like

Awesome! Glad I could help! :smile: