Dasmoto project: code review

Projects Off-platform Practice Projects
1

Hi all! I completed the Dasmoto’s Arts & Crafts project, and would appreciate a code review. I have the github repository here (new to github, if I need to make it public for people to view with the link, please let me know). One of the main things I’m wondering about is the semantic correctness of my organization. I had originally used <article> elements to separate the sections, but that didn’t seem quite right given the context, so I changed it to <section>, but I’m not sure if there’s a different element I should’ve used instead.

Here’s the 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" href="./Resources/CSS/styles.css" type="text/css">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <content>
        <section class="brushes">
            <h2>Brushes</h2>
            <img src="./Resources/Images/hacksaw.webp" atl="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. <a class="productlink" href="">Starting at $3.00 / brush.</a></p>
            <!-- Anchor element used so that adding a link to a store or purchase page is easier in the future -->
        </section>
        <section class="frames">
            <h2>Frames</h2>
            <img src="./Resources/Images/frames.webp" alt="Assorted painting 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. <a class="productlink" href="">Starting at $2.00 / frame.</a></p>
        </section>
        <section class="paint">
            <h2>Paint</h2>
            <img src="./Resources/Images/finnish.jpeg" alt="Open paint tubes" />
            <h3>Clean Finnish Paint</h3>
            <p>Imported paint from Finland. Over 256 colors available In-store, varying In quanity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <a class="productlink" href="">Starting at $5.00 / tube.</a></p>
        </section>
    </content>
</body>
</html>

And the css:


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

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    margin: 0.75em auto;
    background-image: url("../Images/pattern.webp")
}

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

section.brushes h2 {
    background-color: mediumspringgreen
}

section.frames h2 {
    background-color: lightcoral;
}

section.paint h2 {
    background-color: skyblue;
}

a.productlink {
    font-weight: bold;
    color: blue;
    text-decoration: none;
}

Any feedback would be appreciated.

2

Hello. This is my first code review so thanks for being kind! (I just finished this project myself and will be doing a code review for mine too.)

Overall the code looks clean. The HTML is semantically sectioned off clearly. I did not think to add sections semantics to mine, but that is a good idea.

Looking at your attached images, I believe it is proper/good practice to use only lowercase for folders.

“./resources/images/hacksaw.webp”

Your CSS file looks very clean as well. You probably could have gotten away with less specific selectors for this project as it is fairly simple. For a bigger project, your specificity would be laudable!

Nice Job!
~P$

1 Like
3

Thanks for the feedback! Using lowercase folders does make a bit of sense now that I’m thinking about it, so I’ll be sure to implement that going forward.