No use of divs

[farishkash]

Just using this section of your html for example.

  <h2 class="brushes">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg" alt="Brushes">
    <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. <span class="blueText">Starting at $3.00 / brush.</span></p>

would have been written as

<div class="yourclassname">
    <h2 class="brushes">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg" alt="Brushes">
    <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. <span class="blueText">Starting at $3.00 / brush.</span></p>
</div>

[DannyWatsonNZ]

Sorry, but I don't follow your logic behind suggesting the 'div'. As I am not needing to set anything special in CSS for each of the items on the website, surely separating each item out with

and

is just superfluous code.

I appreciate figure please tell me why I should do what you are suggesting. I do understand that it is tidy to use 'div', but if you're not needing to reference that particular paths of the code somewhere else, then is no point in having it.

[farishkash]

First I apologize, there was suppose to be a much longer explanation here, not as long as the one I was going to give right now, but I guess I thought it but didn't write it. About half the learners don't use divs on the first project so I bring this up because by week 4 the projects ramp up in difficulty. Yes technically you don't need it and I wish that Dasmoto was a little bit more complex to force it.

So divs are the basic building block of any website. Yes this was a simple website but my intention is to make you think about best practices. Part of the problem is that because this is such a small website it doesn't force you to look at complexities.

I have more specific control with divs and more reusability especially in the sense of scale.

What if Dasmoto had 400 types of brushes, 400 frames and 400 types of paint.

All the brushes have the same styling.

I place each brush into a div and give that div a class. Noticed below in this example I removed the classes from the h2 and span

<div class="artbrushes">
    <h2>Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg" alt="Brushes">
    <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. <span>Starting at $3.00 / brush.</span></p>
</div>

And css

.artbrushes h2 {
 background-color: mediumspringgreen;
  font-size: 32px;
  color: white;
}
.artbrushes span {
color: blue;
}

So above I basically repeated your css but using a class assigned to div. It seems similar but it is different and here is why.

So what are the advantages here vs what you did.

My css is a little longer but I am not typing class out for h2 and spans for 400 divs anymore. In theory I saved myself coding time here.

Next I can make changes for 400 divs at once without affecting the rest of the website.

For example tomorrow the ceo of Dasmoto comes in and tells me he wants all 400 divs of art brushes to change their heading background color to Cornsilk and the pricing to red but doesn't want to change any parts of the site.

All I have to do is change two lines in my css and the rest of the site is safe

.artbrushes h2 {
 background-color: Cornsilk;
  font-size: 32px;
  color: white;
}
.artbrushes span {
color: red;
}

Where as something like this

<span class="blueText">

I would have to change each one that they didn't want blue text anymore.

Now I will say again you are correct, your setup is perfectly fine and part of the reason why this is perfectly fine is because even though this is not best practices, this site is stylize as through made from the early 1990s when I was using netscape as my browser and there isn't any sense of complexity that is driven in most website.

Next the idea of the div is to make your code more readable as you are segmenting each section into actual sections. You are correct is is more tidy.

If we look at your html right here all we see is one big wall of text with no meaningful divisions which the tag div was derived from.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dasmoto's Arts & Crafts</title>
    <link href="./resources/css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <h2 class="brushes">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg" alt="Brushes">
    <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. <span class="blueText">Starting at $3.00 / brush.</span></p>
    <h2 class="frames">Frames</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg" alt="Art Frames">
    <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. <span class="blueText">Starting at $2.00 / frame.</span></p>
    <h2 class="paint">Paint</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/finnish.jpeg" alt="Clean Finnish Paint">
    <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. <span class="blueText">Starting at $5.00 / tube.</span></p>
  </body>
</html>

vs

<!DOCTYPE html>
<html>
<head>
  <title>Dasmoto's Arts & Crafts</title>
  <link href="./resources/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>

  <h1>Dasmoto's Arts & Crafts</h1>

  <!-- Brushes Section -->

  <div class="item">
    <h2 id="brush">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg"/>
    <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. <span class="price">Starting at $3.00 / brush.</span></p>
  </div>

  <!-- Frames Section -->

  <div class="item">
    <h2 id="frame">Frames</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg"/>
    <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. <span class="price">Starting at $2.00 / frame.</span></p>
  </div>

  <!-- Paint Section -->

  <div class="item">
    <h2 id="paint">Paint</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/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. <span class="price">Starting at $5.00 / tube.</span>
  </div>

</body>
</html>

Even without my comments you can see a clear division of each section.

Now lastly with divs I can do other things that I couldn't do without.

For example lets say I have a set of items that I wanted to display inline within a div.

I can simple use css display-inline and it will align everything in the container.

You get a strong notion of div use when the projects start having use flex-box that might make this explanation clearer in about 4 week.

[DannyWatsonNZ]

Thank you very much for the detailed answer. You certainly have opened my eyes somewhat in regards to best practices and segmentation.

I have taken your advice onboard and will alter the project accordingly, and resubmit it for your review.