Dasmoto Arts & Crafts - Code Review

Here is my HTML portion.

<!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>
        
        <!-- Banner -->
        
        <h1>Dasmoto's Arts & Crafts</h1>

        <!-- Brushes Section -->
        
        <div class="item">
            <h2 id="brush">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="price">Starting at $3.00 / brush.</span></p>
        </div>

        <!-- Frames Section -->
        
        <div class="item">
            <h2 id="frame">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="price">Starting at $2.00 / frame.</span></p>
        </div>
        
        <!-- Paints Section -->
        
        <div class="item">
            <h2 id="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="price">Starting at $5.00 / tube.</span></p>
        </div>

    </body>
</html>

And here is my CSS portion.

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

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

.item h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

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

#brush {
    background-color: mediumspringgreen;
}

#frame {
    background-color: LightCoral;
}

#paint {
    background-color: SkyBlue;
}

What yall think? Is that pretty good? Looks right on the browser, would love some feedback if somethings wrong or a better way to code this.

Hey Coreyhilsen! Good job!
I can read and inspect your code very quickly, because is well formatted and there are comments when is necessary to explain something to someone that reads it for the first time or even to you after doing some other tasks and coming back to this code.

The only thing that maybe can be improved is to replace <div> with <section> in the html portion. As you write in the comments, you call the portion of code “section”(i.e. Brushes section), so why do not use the element?
Here is what I mean:

<!-- Brushes Section -->
        
        <section class="item">
            <h2 id="brush">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="price">Starting at $3.00 / brush.</span></p>
        </section>

Even if there’s absolutely no difference in functionality between <section> and <div> elements, using <section> properly will be good for screen readers (devices used for browsing the internet for people with vision impairment) but also for search engines.

I hope this helps :wave:

Thanks for the reply and the tip. Don’t know why I didn’t use section there, I must have over looked it. I guess I need to remember to thoroughly go through the code, triple check. lol thanks for the feedback tho.