Dasmoto's Arts and Crafts Code Review

Hey all, looking to get some feedback on Dasmoto’s Arts and Crafts.

I was really, truly, banging rocks together trying to apply semantic html to the project, so if anyone spots anything jank about that please don’t hold back on critique.

I also couldn’t use the .jpg that I’d saved in my resources folder when I was describing the rule on line 10 of the stylesheet, to apply a background image to the h1 element. Tried using a relative path to the file, an absolute path, trying different syntaxes - a whole slew of stuff. Not sure why it was so finicky, looked simple enough when I googled how to do it. But any insight is appreciated.

Anyway, here’s the code:

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

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

        <article>
            <section class="brushes">
                <h2>Brushes</h2>
                <img src="./resources/hacksaw.jpeg" alt="Paintbrushes.">
                <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 class="frames">
                <h2>Frames</h2>
                <img src="./resources/frames.jpeg" alt="Picture frames.">
                <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 class="paint">
                <h2>Paint</h2>
                <img src="./resources/finnish.jpeg" alt="Paint tubes.">
                <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>
        </article>
    </body>
</html>
* {
    font-family: Helvetica;
}

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

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

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

.brushes h2 {
    background-color: mediumspringgreen;
}

.frames h2 {
    background-color: lightcoral;
}

.paint h2 {
    background-color: skyblue;
}
1 Like

Hiya, nice to meet ya, I’m also working on this project as well.
from what I can see, it looks really good! i got the picture issue, I had to go into the folder that contained the image and right-click for the option for getting info, there it mentions the destination that you can copy and paste into Html. Your CSS code looks really good, the only thing I would say is that you don’t have to worry about adding an h2 element with the class tag not just because it could potentially cause conflict with the other h2 elements, but also its easier to read.