Dasmoto's Arts & Crafts Code Review

Hey everyone, I just finished my first project on my own and was hoping someone could review the code for me? Thank you in advance!


<!DOCTYPE html>
<html lang="en">
    <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>Dasmotos Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css">
    <!-- Banner Section -->
    <div class="banner">
            <h1 class="banner">Dasmoto's Arts & Crafts</h1>
    <!-- Products Section -->
    <div class="products">
        <h2 class="brushes">Brushes</h2>
        <img src="./images/hacksaw.jpeg">
        <h3 class="hacksaw">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>
       <h2 class="frames">Frames</h2>
       <img src="./images/frames.jpeg">
       <h3 class="woodframes">Art Frames</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>
       <h2 class="paint">Paint</h2>
       <img src="./images/finnish.jpeg">
       <h3 class="finnish">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>


* {
  font-family: Helvetica;

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

h2.brushes {
  background-color: mediumspringgreen;
  font-size: 32px;
  font-weight: bold;
  color: white;

h2.frames {
  background-color: lightcoral;
  font-size: 32px;
  font-weight: bold;
  color: white;

h2.paint {
  background-color: skyblue;
  font-size: 32px;
  font-weight: bold;
  color: white;

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

Looks good from what I can tell! So many ways to get the same result with the combinations that can be done with all the selectors and how they are arranged and associated in the css file. Mine
end result was similar with some differences in what selectors and used etc.

I like that your css rulesets are obvious in where styles are applied, but also there’s some repetition there (ie font-size, font-weight). I’ve been meaning to post my attempt for critique so when I’m back at my computer that has the source code (I haven’t implemented version control yet, so can’t grab it from this laptop) I’ll post mine and maybe you can give me your opinion :slight_smile:

Also, I originally saved the images onto my computer and used a relative path from the project but then changed to the url. I’m not sure if there is any preference for this project.

Code is very clear and easy to read for me. Everything looks good.
I’ve learned one interesting thing while scanning your HTML code with W3C Markup Validation Service (https://validator.w3.org/):
The img tag should contain alt attribute even if image purpose is just decorational (and imo this is the purpose of three images under h2 tags). In this case alt should have value of null:


Source and more info about providing alternative texts for images if your interested: