Review my code please

<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@400;700&family=Edu+VIC+WA+NT+Beginner:wght@400;700&family=Oswald:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
    <title>Website Design System</title>
  </head>
  <header>
    <h1>Website Design System</h1>
  </header>
  <body>
    <h2>Colors</h2>
    <div class="colors">
      <h3 class="Green">bright green, rbg(66, 245, 173)</h3>
      <h3 class="blue">Dark blue, rbg(0, 6, 176)</h3>
      <h3 class="red">Blood red, rbg(130, 8, 8)</h3>
      <h3 class="grey">smokey grey, rbg(176, 174, 176)</h3>
      <h3 class="fr">forest green, rbg(59, 97, 54)</h3>
    </div>
    <h2>Fonts</h2>
    <div class="fonts">
      <div class="edu">
        <h3 class="line">Edu VIC WA NT Beginner</h3>
        <p>I am learning how to code</p>
        <p class="a">I am learning how to code</p>
        <p class="line">I am learning how to code</p>
      </div>
      <div class="sc">
        <h3 class="line">Cormorant SC</h3>
        <p>I am learning how to code</p>
        <p class="a">I am learning how to code</p>
        <p class="line">I am learning how to code</p>
      </div>
      <div class="os">
        <h3 class="line">Oswald</h3>
        <p>I am learning how to code</p>
        <p class="a">I am learning how to code</p>
        <p class="line">I am learning how to code</p>
      </div>
    </div>
    <h2>Text styles</h2>
    <h1> H1: Main heading text style</h1>
    <ul>
      <li>Font-weight: 700(bold)</li>
      <li>Font-size: 26px</li>
      <li>Font-family: Nunito sans</li>
    </ul>
    <h2 class=" h"> h2: subheadings</h2>
    <ul>
      <li>Font-weight: 500</li>
      <li>Font-size: 18px</li>
      <li>Font family: Poppins</li>
    </ul>
    <p class="line">Paragraph text</p>
    <ul>
      <li>Font-weight: 400(regular)</li>
      <li>Font-size: 14px</li>
      <li>Font-family: Poppins</li>
    </ul>
  </body>
</html>

h2{
  margin: 100px;
}
h3{
  display: inline-block;
  padding: 30px;
}
.colors{
  border: 1px solid black;
  padding: 10px;
  padding-left: 100px
}
.green{
  background-color: rgb(66, 245, 173);
}
.blue{
  background-color: rgb(0, 6, 176);
}
.red{
  background-color: rgb(130, 8, 8);
}
.grey{
  background-color: rgb(176, 174, 176);
}
.fr{
  background-color: rgb(59, 97, 54);
}
.fonts{
  border: 1px solid black;
}
.edu{
  font-family: 'Edu VIC WA NT Beginner';
  display: block;
}
.a{
  font-weight: bold;
}
.line{
  text-decoration: underline;
}
.sc{
  font-family: 'Cormorant SC';
  display: inline-block
}
.os{
  font-family: Oswald;
  display: inline-block;
  margin-left: 100px;
}

“Review my code please”?

I appreciate the manner in which you asked for help, but unfortunately it wasn’t really telling regarding what you want as feedback.

I could tell you it’s not “code”, it’s “markup”.

Or, I could tell you that in your HTML file…

  • The space between ss" and /> is unnecessary in your second <link>
  • Your varied use of capitalised and non-capitalised words within <div class="colors"> is going to make for a worse user experience because it looks off
  • Within the same div… it’s rgb, not rbg
  • It’s better to keep class and ID names longer than one or two characters, to save confusion when someone else reads through your markup
  • It’s also a good idea to keep class and ID names different to those used in HTML itself (I’m looking at you, class="a")
  • No-one likes rando m spa ces in class names or content (see the line beginning <h2 class=" h">)

and that in your CSS file, you define styles for .green but in your HTML you’re using Green (capital G). Those should be consistent.

BUT I don’t know what kind of feedback you’re looking for, so I’ll give you this instead:

Youre welcome GIF - Find on GIFER

1 Like

Ty for the advice and tips, this was exactly i was looking for just a clean up of my code or markups. It seems i just need more consistency and i think itll come with more practice again Thank you!

1 Like