Feedback for project: Dasmoto's Arts & Crafts

Hi All,

I’s just starting the full stack engineer course. Below is my code for the Dasmoto’s Arts & Crafts project.

There were some lessons on semantic HTML. I implemented some in my code. Is this done right? or is it overkill?

I would love any feedback.

Thank you!

Greetings,
Danny
HTML

<!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>
        
        <main>

            <!--  Brushes section -->

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

            <!--  Frames section -->

            <article>
                <h2 id="frame">Frames</h2>
                <img src="./resources/images/frames.jpeg" alt="art frame">
                <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>

            <!--  Paint section -->

            <article>
                <h2 id="paint">Paint</h2>
                <img src="./resources/images/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 class="price">Starting at $5.00 / tube.</span></p>
            </article>

        </main>     
    </body>
</html>

CSS

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

h1, h2, h3 {
    font-weight: bold;
}

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

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

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

#brush {
    background-color: mediumspringgreen;
}

#frame {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

looks good to me, this is how mine looks as-well.

Really neat job, I love the comments & spacing in your HTML - makes for very neat code. In regards to semantics I think the fact that you chose to include them is absolutely useful: perhaps a lot for this project, but in more complex projects the habit of including these organisational structures will be really useful.

My only comment would be in regards to how bare your CSS currently is I think this project could do with additional styling, at the moment the page still is quite basic in terms of design - for example - you included sections with article> tags for each section, but no mention to how these structures should act in your css.

for example

"
article
{display: inline - block; } "

etc…

I was also reading in another thread the possibility of a table of contents in CSS, not strictly necessary but maybe nice habit for future, more complex projects. Especially considering you took the time to leave comments in HTML, I would suggest doing something of the same nature for CSS.

That being said the minimal approach is really effective and for this project individual styling isn’t absolutely necessary and I think you did a really neat job.

I uploaded mine to github if you have any feedback it would be greatly appreciated: