Code review - Dasmoto's Arts & Crafts

Hello everybody,

My name is Jakub and this is my first project. As everyone in here I’m looking for some code review. Thanks for your patience and time. I hope you won’t suffer too much. ( ͡° ͜ʖ ͡°)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" type="text/css" href="./Resources/CSS/Index.css">
</head>
<body>

    <!--Header-->

    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>

    <!--Content-->

    <main>
        <div>
            <h2 class ="Brushes">Brushes</h2>
            <img src="./Resources/Images/hacksaw.jpeg">
            <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="Starting">Starting at $3.00 / brush.</span></p>
        </div>

        <div>
            <h2 class="Frames">Frames</h2>
            <img src="./Resources/Images/frames.jpeg">
            <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="Starting">Starting at $2.00 / frame.</span></p>
        </div>

        <div>
            <h2 class ="Paint">Paint</h2>
            <img src="./Resources/Images/finnish.jpeg">
            <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="Starting">Starting at $5.00 / tube.</span></p>
        </div>

    </main>
    
</body>
</html>

CSS

h1 {
    background-image: url("../Images/pattern.jpeg");
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}


.Brushes {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}

.Frames {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: lightcoral;
}

.Paint {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: lightblue;

}

.Starting {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}

p {
    font-family: Arial, Helvetica, sans-serif;
}





Hi there, Derek here…

I’ve also just completed this. In terms of knowing what is right/wrong, I guess if your localhost output matched what was in the lesson you probably got it right.

I’d also be curious to know from some of the experienced devs how the code stacks up in relation to the solution. I did take a look at that and noted a fair few differences in how the solution was compared to my own code. Nevertheless, my result matched on the rendered output.

My HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css" type="text/css">
</head>
<body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <section>
            <h2 class="brushes">Brushes</h2>
            <img src="./resources/images/brushes.jpeg"/>
            <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>Starting at $3.00 / brush.</span></p>
        </section>
        <section>
            <h2 class="frames">Frames</h2>
            <img src="./resources/images/frames.jpeg"/>
            <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>Starting at $2.00 / frame.</span></p>
        </section>
        <section>
            <h2 class="paint">Paint</h2>
            <img src="./resources/images/paint.jpeg"/>
            <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>Starting at $5.00 / tube.</span></p>
        </section>
</body>
</html>

My CSS code:

/* HTML elements */

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

h1 {
    background-image: url("../images/pattern.jpeg");
    text-align: center;
    color: khaki;
    font-size: 100px;
    font-weight: bold;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 22px;
}

/* img {
    size: 250px 250px;
} */

p {
    font-size: 18px;
}

span {
    font-weight: bold;
    color: blue;
}

/* Class styles */

.brushes {
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}

.frames {
    font-weight: bold;
    color: white;
    background-color: lightcoral;
}

.paint {
    font-weight: bold;
    color: white;
    background-color: skyblue;
}