The Tea Cozy project

alexavrc · August 3, 2023, 4:51pm

After days and days and days of trying to finish this project, I finally did it. To be honest, I almost cried hahaha I read so many of the posts here and didn’t feel lonely with the struggle. Here is my code in case anyone is interested in reviewing it. I would love to receive some feedback since this is my first post and been having a bit of impostor syndrome feeling this is not for me. Thanks to all who get to read my message. Hugs!

gist.github.com

https://gist.github.com/codecademydev/515f20cc38bbe0fe708c3167a84ec408

index.html

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body> 
<!-- Header -->
    <div class="header">
        <img class="logo" src="C:\Users\Alexa\Codecademy Projects\Tea Cozy\resources\css\images\img-tea-cozy-logo.png">

This file has been truncated. show original

style.css

/*-- General --*/
body {
    background-color: black;
    font-family: 'Helvetica';
    font-size: 22px;
    color: seashell;
    text-align: center;
    margin: 0;
    opacity: 0.9;
  }

This file has been truncated. show original

kirativewd · August 4, 2023, 1:41am

Hi, there!

Great work finishing this project! The Tea Cozy can be a doozy!

Some things I noticed:

We want to make sure that we’re using semantic HTML wherever it’s applicable. Instead of <div class="header"> the <header> element would be the correct tag to use.

When creating lists, the direct child is always <li> meant as list-item. <ol> is the other type of list, meaning ordered list.

It’s much easier to work with relative pathing. From the looks of the directory, relative pathing would look like src="../images/img-tea-cozy-logo.png"

Lastly for the HTML, I noticed none of the images have alt tags. We want to ensure that images are accessible to all users, and unless they’re decorative images or other related non-contextual images, need to include alt tags at all times.

As for the CSS, there were some small things I noticed. However, they did not negatively impact the design as it looks similar to the spec. As you complete more projects, you should also start to see where CSS can be redundant and learn more efficient ways of achieving the design you’re looking for.

Keep up the great work!

alexavrc · August 10, 2023, 10:26am

Thank you so much!! I first wrote the list of the nav bar with

but it had the little dot at the beginning of the word so I thought it would be better to use the

Thanks again!!