Code Review: Dasmoto's Arts & Crafts

Hi all, I just finished the Dasmoto’s Arts & Crafts project and am seeking a code review, I am 7% of the way through the course.

I’m still trying to figure out how to best use section and article tags for a normal webpage structure. Any advice on the implementation for these tags is greatly appreciated as well as any other advice.

Lastly and most importantly I am happy to return the favor and perform code reviews for anyone. Thanks!

<!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/styles.css">
</head>
<body>
  <header>
    <h1 id="main-banner">Dasmoto's Arts & Crafts</h1>
  </header>
  <main>
    <article id="art-supplies">
      <section id="brushes">
        <h2>Brushes</h2>
        <img src="./resources/images/paintbrushes.webp" alt="hacksaw brushes">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushses are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="pricing">Starting at $3.00 / brush</span>.</p>
      </section>
      <section id="frames">
        <h2>Frames</h2>
        <img src="./resources/images/frames.webp" alt="frames">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded painted according to your needs. <span class="pricing">Starting at $2.00 / frame</span>.</p>
      </section>
      <section id="paint">
        <h2>Paint</h2>
        <img src="./resources/images/paint.jpeg" alt="paint supplies">
        <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="pricing">Starting at $5.00 / tube</span>.</p>
      </section>
    </article>
  </main>
</body>
</html>
#main-banner, #art-supplies, .pricing {
  font-family: Helvetica, Arial;
}

/* Banner setup */

#main-banner {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg');
}

/* Section header setup */

#art-supplies h2 {
  font-size: 32px;
  font-weight: bold;
  color: white;
}

#brushes h2 {
  background-color: mediumspringgreen;
}

#frames h2 {
  background-color: lightcoral;
}

#paint h2 {
  background-color: skyblue;
}

/* Pricing text styling */ 

.pricing {
  font-weight: bold;
  color: blue;
}```

Greetings coder,

This is my first time doing a code review. I wish I could give you the credible feedback that your code deserves, but I will say what I came to say and hope it helps you somehow.

I think that your html code has a very readable format, and you seem to make clever use of the section tags. I think your CSS code all used very specific selectors that makes it very easy to see what the code is doing. I copied your CSS code into VS studio and noticed that there was a small error on the last line caused by the ``` symbols. But, your code was still able to run well, and the page loaded quickly. Overall I think you have done a nice job here. Best wishes.
-Austin

Thanks Austin,

I really appreciate the code review. Thanks for pointing out the error on the last line (non sure how I did that :grinning:).

Let me know if you are needing any code reviews as well. I’m glad to help!

1 Like

Nice work!

Main thing I would add is maybe comments and spacing for the html.

I would also take out <article> because it’s doing the same thing as <main>.

E.g

<body>
  <header>
  </header>
  
  <main>

    <!-- Section 1 description -->  
    <section>
      Section 1 stuff
    </section>

    <!-- Section 2 description -->
    <section>
      Section 2 stuff
    </section>

  </main>
</body>

All just personal preference though :slight_smile:

Thanks so much for the feedback!

I really like the spacing idea, it really helps to distinguish the different sections.

Let me know if you ever need a code review on one of your projects!