Dasmoto's Arts & Crafts Code Review

Hello,

This is my Off-Platform Project: Dasmoto’s Arts & Crafts. Could I please get a code review? This is my first time asking for a review. Any feedback will be much appreciated.

HTML Code

<!DOCTYPE html>
<html>
  <head>
      <title>Dasmoto</title>
    <link rel="stylesheet" href="C:\Users\RKT12\OneDrive\Documents\DevProject\resources\css\style.css">
  </head>
  <body>
    <header>
      <div>
        <h1>Dasmoto's Arts & Crafts</h1>
      </div>
      <div>
        <h2 id="A1">Brushes</h1>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg">
        <h3 id="B4">Hacksaw</h3>
        <h4 id="C5">Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <strong>Starting at $3.00 / brush.</strong></h4>
      </div>
      <div>
        <h2 id="A2">Frames</h1>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg">
        <h3 id="B4">Art Frames (assorted)</h3>
        <h4 id="C5">Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <strong>Starting at $2.00 / frame.</strong></h4>
      </div>
      <div>
        <h2 id="A3">Paint</h1>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg">
        <h3 id="B4">Clean Finnish Paint</h3>
        <h4 id="C5">Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <strong>Starting at $5.00 / tube.</strong></h4>
      </div>
    </header>
  </body>
</html>

CSS Code

h1 {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
  text-align: center;
  color: khaki;
  font-weight: bold;
  font-size: 100px;
  font-family: Helvetica;
}

#A1 {
  color: white;
  font-weight: bold;
  font-size: 32px;
  font-family: Helvetica;
  background-color: mediumspringgreen;
}

#A2 {
  color: white;
  font-weight: bold;
  font-size: 32px;
  font-family: Helvetica;
  background-color: lightcoral;
}

#A3 {
  color: white;
  font-weight: bold;
  font-size: 32px;
  font-family: Helvetica;
  background-color: skyblue;
}

#B4 {
  font-weight: bold;
  font-family: Helvetica;
}

#C5 {
  font-weight:lighter;
  font-family: Helvetica;
}

strong {
  color: blue;
  font-family: Helvetica;
  font-weight: bold;
}

Hi @travisdunn1120160462 !
I don’t know if you received any feedback since then but if you didn’t I’ll try to do it :slight_smile: .
They are several things you could improve in your HTML and CSS.

The important one for me would be the way you used the id selector. Putting id on almost every element makes it harder to edit, especially if you start writing longer code. Favoring the .class selector or directly using the name of the tag (like you did with the tag <strong>) will make your code easier to edit and read not only for you but for other developer as well. You won’t need to add the font-family and font-weight to all of the h2 individually.

There are two other things that can be refine :

  • The <strong> tag automatically makes a text bold so there is no need to add a font-weight property to it.

  • You have misplaced the closing </header> tag

Other than that everything is good and works exactly as intended ! :smile:
I hope this helps !