Dasmoto's Arts & Crafts Feedback

Looking for feedback for Dasmoto’s Arts & Crafts! Thank you!!

<!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">
  <link href="resources/css/index.css" type="text/css" rel="stylesheet" >
  <title>Dasmoto's Arts and Crafts</title>
</head>
<header>
  <div class="header">
    <h1>Dasmoto's Arts and Crafts</h1>
    </div>
    </header>
<body>
  <div class="brushes">
    <h2 id=Brushes>Brushes</h2>
    <img src="resources/images/hacksaw.webp">
    <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.</p>
      <span class="price">Starting at $3.00 / brush</span>
</div>
  <div class="frames">
    <h2 id="frames">Frames</h2>
    <img src="resources/images/frames.webp">
    <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. Starting at $2.00 / frame.</p>
      <span class="price">Starting at $2.00 / frame</span>
  </div>
    <div class="paint">
      <h2 id="paint">Paint</h2>
      <img src="resources/images/finnish.jpeg">
      <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</p>
        <span class="price">Starting at $5.00/tube</span>
      </div>
</body>
</html>
* {
    font-family: Helvetica, Arial, sans-serif;
  }
   

   
  h1 {
    background-image: url(../images/pattern.webp);
    height: 100px;
    color: khaki;
    text-align: center;
    font-size: 100px;
    margin: 10 auto;
    padding-bottom: 20px;
  }

  h2 {
    color: white;
  }

  h3 {
    text-size: 12px;
  }

  p {
    text-size: 10px;
  }

  .price {
    color: blue;
  }

  .brushes h2 {
    background-color: aquamarine;
  }
  
  .frames h2 {
    background-color: pink;
  }

  .paint h2 {
  background-color: lightskyblue ;
  }

Hey! I’m new in coding so I may be wrong.

Your code seems to be good but I noticed that every of your h2’s are labeled with id. Maybe it will be helpful in future but as for me it’s useless (and you didn’t use those I just noticed that)

For the styling idk maybe you just wanted to use different colors (and for learning purposes it’s okay to play around I guess) but from the developers standpoint we had the ‘Specs’ from our ‘client’ where colors were specified as mediumspringgreen, lightcoral and skyblue and those are totally legit in css so I think we should use those.

And for fonts you declared Helvetica and Arial for ALL elements (as I know those are two different fonts even though they’re looking similar to each other) and it can’t apply two fonts at the time.

For .brushes h2, .frames h2 and .paint h2 idk maybe that’s actually good idea to label each div with a class but in the end you assigned id’s for those h2’s so it seems pretty pointless to use .paint h2 in css instead of just using its id. (You tried to be less specified as I see but in that case you should be assigning class directly to h2 and using for example .frames instead of .frames h2

And there were absolutely no comments in code for now it’s okay but for the big project it may be painful for others to read through.

Sorry if I was too harsh and thank you for attention :slight_smile:

UPD: I’m now on the lesson with Typography and turned out for me that specifying 2 similar fonts is actually a good thing :slight_smile:

UPD2: Yeah wow you did a great job with fonts. Adding sans-serif at the end was the pro move. :+1:

Thanks for your feedback! Not harsh at all.
I still struggle a bit with when to use CLASS vs ID. I get in theory, but when it comes to building HTML, you don’t necessarily know what you’re going to do in CSS.
Good point about using comments!

Hello!

I am new in coding with HTML and CSS but I saw some things in your code that I think are mistakes. All elements that are visible into the browser should be in . I noticed that the tag is outside the . Also I don’t think that you need div in the header section. You can put class=“header” in tag. As far as I understood from the lectures is a semantic tag that is ment to replace div.

Happy coding!