Dasmoto's Project Code Review

Projects Off-platform Practice Projects
1

Hey All!
Any reviews on this code would be greatly appreciated! Few Quick Questions:

1: In the solution there was a lack of semantic HTML used is that because this project is too simple to use it and therefore is overkill?

2: My original did not include the comments, I added them in after seeing solution. Again, is it overkill to combine this with Semantic HTML?

HTML:

<!DOCTYPE html>
<html>
<head>
  <link href="./resources/css/reset.css" type="text/css" rel="stylesheet">
  <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
  <title>Dasmoto's Arts & Crafts</title>
</head>

<body>
  <header>
    <h1 class="title">Dasmoto's Arts & Crafts</h1>
  </header>

   <!-- Brushes Section -->

  <section>
    <div class="item">
        <h2 class="bg-green">Brushes</h2>
        <img src="./resources/images/hacksaw.jpeg" alt="group of paint brushes" height="250px" width="250px">
        <h3> Hacksaw Brushes</h3>
        <p> 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 <span class="price">Starting at $3.00 / brush.</span></p>
    <div>
  </section>

  <!-- Frames Section -->

  <section>
    <div class="item">
        <h2 class="bg-red">Frames</h2>
        <img src="./resources/images/frames.jpeg" alt="multicoloured frames" height="250px" width="250px">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.<span class="price">Starting at $2.00 / brush.</span></p>
    <div>
  </section>

  <!-- Paint Section -->

  <section>
    <div class="item">
        <h2 class="bg-blue">Frames</h2>
        <img src="./resources/images/finnish.jpeg" alt="open tubes of paint" height="250px" width="250px">
        <h3>Clean Finnish Paint</h3>
        <p>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. <span class="price">Starting at $5.00 / tube.</span></p>
    <div>
  </section>
  
</body>
</html>

CSS

body {
    padding: 8px;
}

h1, h2, h3, p {
    font-family: Helvetica;
}

h1 {
    font-size: 100px;
    font-weight: bold;
    color: Khaki;
    text-align: center;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
}


h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin: 0.83em 0;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.price {
    font-weight: bold;
    color: blue;
}

.bg-green {
    background-color: mediumspringgreen;
}

.bg-red {
    background-color: lightcoral;
}

.bg-blue {
    background-color: skyblue;
}

.title {
    background-image: url("../images/pattern.jpeg");
}

.item {
    display: block;
    height: 393.984px;
    width: 1310px;
}

Thanks!

2

Also Note, I used a reset.css file thus the use of the body padding and a few other strange declarations (the specific heights / widths like 393.984px etc were gathered from DevTools, but was done quickly so presuming these use an em or something like that)