Off-Platform Project: Dasmoto's Arts & Crafts

Hello All,

I have completed the Off Platform Project: Dasmoto’s Arts & Crafts, and I would like to get some feedback on how I did. I tried to apply everything I have learned so far in the Full-Stack Engineer path, which is the HTML and CSS sections.

Please let me know what you think.

My index.html file

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Off Platform Project</title>
        <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <section>
                <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.<strong> Starting at $3.00 / brush.</strong></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.<strong> Starting at $2.00 / frame.</strong></p>
            </section>
            <section>
                <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.<strong> Starting at $5.00 / tube.</strong></p>
            </section>
            
        </main>
    </body>
</html>

my index.css file

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

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

strong{
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}
.brushes{
    background-color: mediumspringgreen;
}
.frames{
    background-color: lightcoral;
}
.paint{
    background-color: skyblue;
}

This code looks great. I just completed this one as well. We only have two differences in our code: 1) I didn’t put my sections under a main tag. I will add that now that I see yours. Thank you! 2). I created h3 style rules in my CSS file.

Dasmoto

Dasmoto's Arts & Crafts

    <!-- Content section -->
    <div>
        <h2 id="green">Brushes</h2>
        <img src="./resources/images/hacksaw.jpeg" alt="hacksaw">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold pant in large amounts.
            Available in different sizes. <span class="price">Starting at $3.00 / brushe.</span>
        </p>
    </div>
    <div>
        <h2 id="lightcoral">Frames</h2>
        <img src="./resources/images/frames.jpeg" alt="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 class="price">Starting at $2.00 / frame.</span>
        </p>
    </div>
    <div>
        <h2 id="skyblue">Paint</h2>
        <img src="./resources/images/finnish.jpeg" alt="finnish_paint">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varing in quality (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>

h1{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“/Users/suchaoren/projects/Offplatformprojects/Dasmoto/resources/images/pattern.jpeg”);
}

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

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

#green {
background-color: mediumspringgreen;
}

#lightcoral {
background-color: lightcoral;
}

#skyblue {
background-color: skyblue;
}