Dasmoto's Arts and Craft: Code Review

Projects Skill Path Projects
1

Hi Folks, Please review my attempt at this project. Tried to keep it as simple as possible. Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts and Crafts</title>
    <link rel="stylesheet" href="C:\Projects\Dasmoto\resources\css\index.css">
</head>
<body>
<heading>    
<h1>Dasmoto's Arts and Crafts</h1>
</heading>
<section>
    <p class="heading" id="green">Brushes</p>
    <img src="C:\Projects\Dasmoto\resources\images\hacksaw.jpeg" alt="brushes">
    <h2>Hacksaw Brushes</h2>
    <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="boldblue">Starting at $3.00 / brush.</Span></p>
</section>
<section>
    <p class="heading" id="coral">Frames</p>
    <img src="C:\Projects\Dasmoto\resources\images\frames.jpeg" alt="art frames">
    <h2>Art Frames (assorted)</h2>
    <p>Assorted frames made of different material, including MDF, brichwood, and PDE. Select frames can be sanded and painted according to your needs. <Span class="boldblue">Starting at $2.00 / frame.</Span></p>
</section>     
<section>
    <p class="heading" id="blue">Paint</p>
    <img src="C:\Projects\Dasmoto\resources\images\finnish.jpeg" alt="paint">
    <h2>Clean Finnish Paint</h2>
    <p>Imported paint from Finland. Over 256 colors available in-store, varying in quntity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.<Span class="boldblue">Starting at $5.00 / tube.</Span></p>
</section>     
</body>
</html>

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

h2 {
    font-weight: bold;
}

#green {
    background-color: mediumspringgreen;
}

#coral {
    background-color: lightcoral;
}

#blue {
    background-color: skyblue;
}

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


.boldblue {
    font-weight: bold;
    color: blue;
}
2

I just did a review of the project, and I must say… you did an excellent job!!! I would especially like to praise your choice to use the section tags instead of the div tags (like I did). Your code was also refactored very well! I cannot really find any real “problem”, but if I want to be nit-picky I would look at changing those p tags, like this one:

to a h2 tag.

And then changing the h2 tags, like this:

to an h3. But that does not really affect the functionally of the site. It just might help screen readers :slightly_smiling_face:.

Great job on the project, my friend!!! :+1:

3

You are too kind, thank you for having a look at my code. It really helps getting the support.