Hello! I’m 9% of the way through the course and came to the project for the Dasmoto’s Arts & webpage. I’ve never done a course like this before, and would be really grateful for any feedback or comments. For example, I’m not sure if my <br> tags were the most efficient way I could have created spacing. I tried to use semantic HTML and consider accessibility, too, so would really like to know if there’s room for improvement there. Thank you in advance for any thoughts!
HTML:
<!DOCTYPE html>
<html>
<!-- Head -->
<head>
<title>Dasmoto's Arts & Crafts</title>
<link href="./resources/css/style.css" rel="stylesheet">
</head>
<!-- Body -->
<body>
<!-- Top banner -->
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<main>
<!-- Brushes -->
<h2 id="brushes">Brushes</h2>
<img src="./resources/images/hacksaw.jpeg" alt="Clean paintbrushes piled on top of each other.">
<br>
<p><strong>Hacksaw brushes</strong></p>
<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>
<!-- Frames -->
<h2 id="frames">Frames</h2>
<img src="./resources/images/frames.jpeg" alt="Wooden picture frames in varying shapes and colors.">
<br>
<p><strong>Art Frames (assorted)</strong></p>
<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>
<!-- Paint -->
<h2 id="paint">Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="Open tubes of Finnish paint in yellow, blue and red.">
<br>
<p><strong>Clear Finnish Paint</strong></p>
<p>Imported from Finland. Over 256 colors available in-store, varying in quantity (1oz. to 8oz.). Clean Finnish paint
microbinds to canvas, increasing the finish and longevity of any artwork. <span class="price">Starting at
$5.00/tube.</span>
</p>
</main>
</body>
<footer>
</footer>
</html>
CSS:
/* Font for the whole page */
* {
font-family: Helvetica;
}
/* Logo */
h1 {
background-image: url(../images/pattern.jpeg);
color: khaki;
font-size: 100px;
font-weight: bold;
text-align: center;
}
/* Section titles */
h2 {
color: white;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
}
#brushes {
background-color: mediumspringgreen;
}
#frames {
background-color: lightcoral;
}
#paint {
background-color: skyblue;
}
/* Price formatting */
.price {
color: blue;
font-weight: bold;
}