Code Review: Dasmoto’s Arts & Crafts

Hey. I would like a code review for my code for the Dasmoto’s Arts & Crafts challenge project. A simple project but good to learn about semantic tags. I look forward to reading your review.

I am keen to do a code review myself so if you are in need of a code review then please let me know. Whether it is for this project or any of the others required on the front end or full stack paths.

My file structure:

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 href="resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>

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

    <main>

<!-- Brushes Section-->

        <section>
            <h2 id="brushes">Brushes</h2>
            <img src="resources/images/hacksaw.jpeg" alt="Hacksaw Brushes">
            <article>
                <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. 
                    <span class="price">
                        Available in different sizes. Starting at $3.00 / brush.
                    </span>
                </p>
            </article>
        </section>

<!-- Frames Section-->

        <section>
            <h2 id="frames">Frames</h2>
            <img src="resources/images/frames.jpeg" alt="Art Frames (assorted)">
            <article>
                <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>
            </article>
        </section>

<!-- Paint Section-->

        <section>
            <h2 id="paint">Paint</h2>
            <img src="resources/images/finnish.jpeg" alt="Clean Finnish Paint">
            <article>
                <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>
            </article>
        </section>

    </main>

</body>
</html>

CSS:

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

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

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

h3 {
    color: black;
    font-weight: bold;
}

p {
    color: black;
    text-align: left;
}

/* price span within paragraphs */

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

/* Brushes section header colour */

#brushes {
    background-color: mediumspringgreen;  
}

/* Frames section header colour */

#frames {
    background-color: lightcoral;
}

/* Paint section header colour */

#paint {
    background-color: skyblue;
}
1 Like

Hey Matt. Your code looks very clean. I like it much better than mine. But, in the CSS file, h1, the url has two periods before /images. Did that cause a problem for you? Also, for the HTML I labeled my sections as classes where you chose ID’s as did the code academy solution. Both ways work. Looks like we are on the same path with code academy. If you get time, you will have to review my next project.

Cheers,

Corey

Hey Corey,

Thank you so much for the code review.
Yes please send me your project & I will repay the favour.

Thanks Matt, will do. I just finished the Dasmoto one myself so, when I get to the next one I will.