Dasmoto Code Review Request

Hi everyone,

I’d be very grateful if anyone had the time to look over my Dasmoto Arts and Crafts project. I tend to fly through the lessons quickly and easily and then go total blank on these so it takes me a while. Took a while to organise it and tried to do it in the spirit of the project, so as though it was a real website and I might want to change things in the future.

Had to look at someone else’s code to get the price class in line with the rest of that paragraph because I don’t recall using the tag at any point before. And I’ve seen other people have used a lot of positioning and alignment styling but it didn’t seem to need it so I left it out to avoid clutter rather than laziness.

Here’s index.html

<!DOCTYPE html>
<html>
<head>
  <title>Dasmoto</title>
  <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<header>
<div class="banner">
  <p>
    Dasmoto's Arts & Crafts
  </p>
  </div>
</header>
<body>
    <section class="brushes">
      <h1>Brushes</h1>
      
    </section>
  <section>
    <img src ="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg">
    <h2>
Hacksaw Brushes
    </h2>
    <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. <div class="price">Starting at $3.00 / brush.</div>
    </p>
    <section class ="frames">
      <h1>Frames</h1>
      </section>
      <section>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg">
        <h2>Art Frames (assorted)</h2>
        <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>
      </section>

    </section>
        </section>
    <section class ="paint">
      <h1>Paint</h1>
      </section>
      <section>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg">
        <h2>Clean Finnish Paint</h2>
        <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>
      </section>
    </section>


</body>
</html>

And here’s index.css

* {
    font-family: Helvetica;
}

header {
    font-size: 100px;
    font-weight: bold;
    color: khaki;

}

h1 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.banner{
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
    text-align: center;
    width: auto;
}

.product-block {
    
}
.price {
    font-weight: bold;
    color: blue;
}

.brushes
{
    background-color: mediumspringgreen;
    margin-top: -30px;
}

.frames{
    background-color: lightcoral;
}

.paint{
    background-color: skyblue;
}


Hello there!

I’ve finished Dasmoto Code today and am writing my first code reviews. I’m very excited bout that!
In html i would use more whitespaces and indentation to make code more clear and easy to read.
Also it was very helpfull for me to scan html with W3C Markup Validation Service (https://validator.w3.org/), when I put your html there it finds few things you may want to look at and fix.

I find it very clever that you don’t code to CSS font-size and font-weight for h2 tags. So clever that i cant figure it out how you did it. Default setting for h2 tags are: font-weight: bold, and font-size: 1.5em. So with default font-size display in browsers those should have 24px. But when i run your project in browser they look like they got 32px. Have no idea how you did that. Would love to know.

Also one thing I’ve discovered today that you may like in your future projects:
In Visual Studio Code type while editing html file:

section*3>h2+img+h3+p

and confirm with enter, you will get this as result:

<section>
    <h2></h2>
    <img src="" alt="">
    <h3></h3>
    <p></p>
</section>
<section>
    <h2></h2>
    <img src="" alt="">
    <h3></h3>
    <p></p>
</section>
<section>
    <h2></h2>
    <img src="" alt="">
    <h3></h3>
    <p></p>
</section>

This helped me a lot with speeding up coding process and also feels very clean.
Hope this helps!