Dasmoto's Arts and Crafts

Hi I’m just new to front-end developer. Im at 7%. Here is my code to Dasmotos-arts & crafts project. I kept it simple as per task.
Any feedback welcome please.

<!DOCtype html>
<html>
   <head>
      <h1 id='titlebackground'>Dasmoto's Arts & Crafts</h1>
      <link href="./css/dosmotos.css" rel="stylesheet" type='text/css'>
   </head>
   <body>
     <div>
       <h1 id='brushes'>Brushes</h1>
       <img src='./resources/hacksaw.jpeg'/>
       <h2>Hacksaw Brushes</h2>
       <p>Made of the highest quality oak. Hacksaw brushess 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>
      </div>
     <div>
      <h1 id='frames'>Frames</h1>
      <img src='./resources/frames.jpeg'/>
      <h2>Art Frames (Assorted)</h2>
      <p>Assorted .frames made of different materials, including MDF, birchwood and PDE. Set frames can be sanded according to your needs.
      <span class="price">Starting at $2.00 / frame.</span> 
      </p>
    </div>
    <div>
      <h1 id='paint'>Paint</h1>
      <img src='./resources/finnish.jpeg'/>
      <h2>Clean Finnish Paint</h2>
      <p>Imported paint from Finland. Over 256 colours avalable in-store, varying quantity (1oz - 8oz). Clean finnish paint microbinds to
      canvas, increasing the finnish and longevity of any artwork.
      <span class="price">Starting at $5.00 / tube.</span>
    </div>
  </body>
</html>

CSS File

*{
    font-family: Helvetica;
    font-weight: bold;
}

.price{
    color: blue;
  }

#titlebackground{
    font-size: 100px;
    color:khaki;
    text-align:center;
    background-image: url('./resource/pattern.jpeg');
}

#brushes{
    font-size: 32px;
    background-color: mediumspringgreen;
    color:white;
}

#frames{
    font-size: 32px;
    background-color: lightcoral;
    color:white; 
}

#paint{
    font-size: 32px;
    background-color: skyblue;
    color:white; 
}

Consider that brushes, frames and paint all have the same font-size and the same color.
You could created an class for these headings, instead of writing applying it to their id.
If this was a bigger project with a lot of styling and code, this method would make it easier for you or another developer to quickly change the styling.
Remember: if you have styling which you wish to apply to more than one element, it can be a good idea to write it all together in a class or apply it directly to the type of element you wish to style!

Happy coding!

1 Like

Thank you for your feedback. I will adopt that practice in my future coding. Very much appreciated. Thanks!