Dasmotos Arts & Crafts Code Review

Hi everyone. First time posting on the forums, would be interested to hear any feedback on the project. Thanks in advance!

<!DOCTYPE html>
<html>
<head>
    <title>Dasmoto's Arts & Crafts</title>
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <div class="brushes">
        <h2>Brushes</h2>
        <image class="brushes-image" src="./resources/image2.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="blue-text"> Starting at $3.00 / brush.</span></p>
    </div>
    <div class="frames">
        <h2>Frames</h2>
        <image class="frames-image" src="./resources/image3.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="blue-text"> Starting at $2.00 / frame.</span></p>
    </div>
    <div class="paint">
        <h2>Paint</h2>
        <image class="paints-image" src="./resources/image4.jpeg"/>
        <h3>Clean Finnish Paint</h3>
        <p>Imported 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="blue-text"> Starting at $5.00 / tube.</span></p>
    </div>
</body>
</html>
* {
    font-family: Helvetica;
}
header {
    background-image: url(../image1.jpeg);
    text-align: center;
    font-size: 50px;
    color: rgb(66, 23, 77);
}

.brushes h2 {
    background-color: rgb(230, 172, 119);
    color: white;
    font-size: 35px;
}

.frames h2 {
    background-color: rgb(124, 144, 235);
    color: white;
    font-size: 35px;
}

.paint h2 {
    background-color:rgb(96, 190, 111);
    color: white;
    font-size: 35px;
}

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

This looks great. I think you should avoid the repetition of the color and font size elements in each of the brushes, frames and paint sections. You could do this by having common section styling and then just have the background color element in each of the brushes, frames and paints. You could also add some comments to make the code more readable.

Thanks for the feedback. I haven’t been doing comments and I need to start.

1 Like

Looks good! I think as beginners we will end up repeating more code then we should, but hopefully be able to identify where we can clean up and refactor it as we improve our understanding and skills.