Dasmoto's Arts & Crafts Review and Feedback

Quick question on structure of the html document. I felt like the h3 sections would be indented off the h2 sections. Looking at the answer I see they keep the h2 ,h3, and ,p elements on the same indentation. Just curious why or if indenting is also ok. Thank you for reviewing the code too.

<!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">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./Resources/Css/index.css">
</head>
<body>
    <div>
    <h1>Dasmoto's Arts & Crafts</h1>
    </div>
    <div class="items">
        <h2 id="brush">Brushes</h2>
        <img src="./Resources/Images/hacksaw.jpeg" alt="A stack of hacksaw paintbrushes">
            <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 id="price"> Starting at $3.00 / brush.</span></p>
    </div>
    <div class="items">
        <h2 id="frames">Frames</h2>
        <img src="Resources\Images\frames.jpeg" alt="Multiple picture frames of varying sizes">
          <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 id="price"> Starting at $2.00 / frame.</span></p>
    </div>
    <div class="items">
        <h2 id="paint">Paint</h2>
        <img src="Resources\Images\finnish.jpeg" alt="Finnish paint tubes on table with used paintbrush">
          <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 id="price"> Starting at
             $5.00 / tube.</span></p>
    </div>
</body>
</html>
body {
    font-family: Helvetica;
    margin: 8px;
}

h1 {
    background-image: url(C:/Coding/Arts_Crafts/Resources/Images/pattern.jpeg);
    width: 100%;
    height: 120px;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    display: inline-block;
}


.items h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

#price {
    font-weight: bold;
    color: blue;
}
#brush {
    background-color: mediumspringgreen;
}

#frames {
    background-color: lightcoral;
}

As far as the structure of the html goes, I typically like to think of it as so:
<------Wrapping div
<----Could be an h2, h3, or p
<----Could be an h2, h3, or p
<------Another div or ul / ol
<------ li or p depending on document structure
</inner parent>

For me, the indentation is more about wrapping and unwrapping layers of divs / containers rather than thinking about logical content breakpoints in the document. In this instance specifically, I think your h3, h2, and pā€™s should all be at the same indentation level because they are all siblings in the wrapping divs.

1 Like

Ahhh, ok that makes sense. I was looking at it a bit too literally with the h1, h2 etc and thinking of it as a sub heading or subset within an h1 element. Appreciate your feedback. Thank you for taking the time!

1 Like

Sorry, it looks like part of my post was interpreted incorrectly by the Codecademy comment box, haha. I originally had a structure like the following (substitute the ā€œ[ā€ for opening and closing ā€œ<ā€; hopefully it will get rendered this time:

[parent] ā† div
[child /] ā† h2
[sibling /] ā† p
[inner parent] ā† ul
[child /] ā† li
[/inner parent]
[/parent]

Well, darn. It is not keeping the whitespace. One more try:

ā€“[parent]
----[child /]
----[sibling /]
----[inner parent]
------[child /]
----[/inner parent]
ā€“[/parent]

1 Like
<!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" />
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css" />
  </head>
  <body>
    <header>
      <h1>DASMOTO'S ARTS AND CRAFTS</h1>
    </header>

    <main>
      <h2>Brushes</h2>
      <img src="/resources/images/brushes.jpeg" alt="paint brushes" />
      <h3>Hacksaw Brushes</h3>
      <p>
        Made of the highest quality oak, Hacksaw brushes are knownfor their
        weight and ability to hold paint in large amounts. Available in
        different sizes.<span>Starting at $3.00 / brush. </span>
      </p>

      <h2 class="frames">Frames</h2>
      <img src="/resources/images/frames.jpeg" alt="art frames" />
      <h3>Art Frames (assorted)</h3>
      <p>
        Assorted framesmade of different material, including MDF, birchwood and
        PDE.Select framescan be sanded and paintedaccording to your needs.<span
          >Starting at $2.00 / frame.
        </span>
      </p>

      <h2 class="paint">Paint</h2>
      <img src="/resources/images/colors.jpeg" alt="paints" />
      <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 finnish and longevity of any artwork.<span
          >Starting at $5.00 / tube.</span
        >
      </p>
    </main>
  </body>
</html>



* {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
}

header {
  background-image: url("/resources/images/pattern.jpeg");
  background-position: center;
  background-size: cover;
  height: 250px;
  margin: 100px 10px;
}

h1 {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
}

main h2 {
  font-size: 32px;
  font-weight: bold;
  background-color: mediumspringgreen;
  color: white;
  margin-bottom: 20px;
}

.frames {
  background-color: lightcoral;
}

.paint {
  background-color: skyblue;
}

main h3 {
  font-size: 24px;
  font-weight: bold;
}

main p {
  font-size: 17px;
  margin-bottom: 20px;
}

main span {
  color: blue;
  font-weight: bold;
  font-size: 20px;
}